HTML5 CSS3网站设计基础教程（第3版）课件 第2章 HTML5标签和属性

第2章HTML5标签和属性《HTML5+CSS3网站设计基础教程（第3版）》学习目标/Target掌握文本控制标签的用法，能够使用文本控制标签设置文本样式。掌握图像标签的用法，能够使用图像标签在网页中嵌入图片。掌握超链接标签的用法，能够使用超链接实现页面的跳转。掌握列表标签的用法，能够使用列表标签设置导航选项。学习目标/Target熟悉结构标签的用法，能够使用结构标签搭建网页结构。熟悉页面交互标签的用法，能够使用页面交互标签设置页面展示信息。熟悉全局属性的用法，能够使用全局属性设置网页效果。章节概述/SummaryHTML5中既包含了大部分原有的标签和属性，也增加了一些新的标签和属

性。这些标签使网页结构更加清晰明确，这些属性使标签的功能更加强大。掌握这些标签和属性是熟练使用HTML5构建网页的基础。本章将详细讲解HTML5的各类标签和属性。目录/Contents2.1文本控制标签2.2图像标签2.3列表标签2.4超链接标签目录/Contents2.5结构标签2.6页面交互标签2.7全局属性2.8阶段案例——影片介绍网页文本控制标签2.1无论网页内容如何丰富，文字自始至终都是网页中最基本的元素。为了使文字排版整齐、结构清晰，HTML中提供了一系列文本控制标签。例如，页面格式化标签、文本格式化标签等。本节将详细讲解HTML中的文本控制标签。2.1文本控制标签2.1.1页面格式化标签一篇结构清晰的文章通常都会通过标题、段落、分割线等对文章进行结构排列。2.1文本控制标签2.1.1页面格式化标签网页也不例外。为了使网页中的文字有条理地显示出来，HTML提供了相应的页面格式化标签，如标题标签、段落标签、水平线标签、换行标签。2.1文本控制标签标题标签段落标签水平线标签换行标签掌握标题标签的用法，能够写出标题标签的基本语法格式。学习目标2.1文本控制标签2.1.1页面格式化标签标题标签文本控制标签页面格式化标签h1h2h3h4h5h6标题标签标题标签用于将文本设置为标题，HTML提供了6个等级的标题标签，即<h1>~<h6>，从<h1>~<h6>标题标签的重要性依次递减。标题标签2.1文本控制标签2.1.1页面格式化标签标题标签标题标签的基本语法格式<hn

align="对齐方式">标题文本</hn>可选属性，用于指定标题的对齐方式。√left

：设置标题文字左对齐（默认值）√center：设置标题文字居中对齐√right：设置标题文字右对齐align属性值2.1.1页面格式化标签2.1文本控制标签标题标签案例演示2.1文本控制标签页面格式化标签标题标签注意：一个页面中最好只使用一个<h1>标签，该标签通常被用在网站的Logo部分。由于标题标签拥有特殊的语义。初学者切勿为了设置文字加粗或更改文字的大小而使用标题标签。HTML中一般不建议使用标题标签的align属性设置对齐方式，可使用CSS样式设置。掌握段落标签的用法，能够写出段落标签的基本语法格式。学习目标2.1文本控制标签2.1.1页面格式化标签段落标签2.1文本控制标签2.1.1页面格式化标签段落标签在网页中，可以使用<p>标签来定义段落。<p>标签是HTML文档中常用的标签，默认情况下，一个段落中的文本会根据浏览器窗口的大小自动换行。段落标签的基本语法格式<p

align=“对齐方式”>段落文本</p>2.1文本控制标签2.1.1页面格式化标签段落标签段落示例掌握水平线标签的用法，能够写出水平线标签的基本语法格式。学习目标2.1文本控制标签2.1.1页面格式化标签水平线标签2.1文本控制标签2.1.1页面格式化标签水平线标签水平线可以通过<hr/>标签来定义。水平线标签的基本语法格式<hr属性="属性值"/>2.1文本控制标签2.1.1页面格式化标签水平线标签<hr/>标签的常用属性属性名含义属性值align设置水平线的对齐方式可选择left、right、center三种值，默认为center，居中对齐显示size设置水平线的粗细以像素为单位，默认为2像素color设置水平线的颜色可用颜色名称、十六进制#RGB、rgb(r,g,b)width设置水平线的宽度可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100%2.1文本控制标签2.1.1页面格式化标签水平线标签水平线示例掌握换行标签的用法，能够写出换行标签的基本语法格式。学习目标2.1文本控制标签2.1.1页面格式化标签换行标签2.1文本控制标签2.1.1页面格式化标签换行标签如果想要将某段文本强制换行显示，就需要使用换行标签<br/>。2.1文本控制标签2.1.1页面格式化标签换行标签注意：<br/>标签虽然可以实现换行的效果，但并不能取代结构标签<h>、<p>等。掌握文本格式化标签的用法，能够为文字设置特殊显示的文本效果。学习目标2.1.2文本格式化标签2.1文本控制标签2.1.2文本格式化标签文本格式化标签用于为文字设置粗体、斜体或下划线等一些特殊显示的文本效果2.1文本控制标签2.1.2文本格式化标签常用的文本格式化标签及文本显示效果2.1文本控制标签标签显示效果<b>标签和<strong>标签文本以粗体方式显示<u>标签和<ins>标签文本以添加下划线方式显示<i>标签和<em>标签文本以斜体方式显示<s>标签和<del>标签文本以添加删除线方式显示<cite>标签文本以斜体方式显示，用于标注引用的参考文献<time>标签文本正常显示，用于标注时间和日期<mark>标签文本以添加底色方式显示2.1.2文本格式化标签1.<b>标签和<strong>标签2.1文本控制标签VS<b>标签<b>标签是物理标签只用于设置显示样式<strong>标签<strong>标签是逻辑标签可以设置显示样式可以将标签语义化（强调重要性）推荐使用<strong>标签2.1.2文本格式化标签2.<u>标签和<ins>标签2.1文本控制标签VS<u>标签<u>标签是物理标签只设置下划线显示样式<ins>标签<ins>标签是逻辑标签设置下划线显示样式可以将标签语义化推荐使用<ins>标签2.1.2文本格式化标签3.<i>标签和<em>标签2.1文本控制标签VS<i>标签<i>标签是物理标签<em>标签em>标签是逻辑标签推荐使用<em>标签2.1.2文本格式化标签4.<s>标签和<del>标签2.1文本控制标签VS<s>标签<s>标签是物理标签<del>标签del>标签是逻辑标签推荐使用<del>标签2.1.2文本格式化标签2.1文本控制标签案例演示<b>标签和<strong>标签<u>标签和<ins>标签<i>标签和<em>标签<s>标签和<del>标签2.1.2文本格式化标签5.<cite>标签<cite>标签是一个逻辑标签，该标签嵌套的文本是对某个参考文献的引用。例如，书籍或者杂志中的内容。2.1文本控制标签2.1.2文本格式化标签5.<cite>标签<cite>标签中的文本会以斜体样式显示在页面中。与<i>标签、<em>标签嵌套的文本显示样式相同，它们的差异在于语义不同，<cite>标签着重强调引用内容。2.1文本控制标签2.1文本控制标签2.1.2文本格式化标签<time>标签<time>标签是一个逻辑标签，用于标注时间（24小时制）或日期。被<time>标签标注的时间或日期不会在浏览器中呈现任何特殊效果，但是能够以机器可读的方式进行编码。<time>标签的两个属性datetime用于定义相应的时间或日期。其属性值必须为一个有效的时间或日期格式，不会显示给用户。pubdate用于设置文档的发布日期或时间。取值为“pubdate”，可以省略属性值。2.1.2文本格式化标签7.<mark>标签<mark>标签是一个逻辑标签，用于高亮显示文本。2.1文本控制标签掌握文本样式标签的用法，能够为文字设置效果，例如，字体、字号、颜色等。学习目标2.1.3文本样式标签2.1文本控制标签2.1文本控制标签2.1.3文本样式标签文本样式标签可以设置一些文字效果，例如，字体、字号、文字颜色，让网页中的文字样式变得更加丰富。文本样式标签的基本语法格式<font属性="属性值">文本内容</font>√face：设置字体，例如，微软雅黑、黑体、宋体等。√size：设置字号，可以取1到7之间的整数值，无需添加单位。√color：设置文字颜色，颜色值可以为英文单词、十六进制颜色值等。常用属性2.1.3文本样式标签2.1文本控制标签案例演示在实际应用中，通常会使用CSS样式替代<font>标签。掌握特殊字符的用法，能够为网页添加特殊字符，例如，空格、大于号、小于号等。学习目标2.1.4特殊字符2.1文本控制标签2.1.4特殊字符常用特殊字符对应代码-12.1文本控制标签特殊字符描述字符的代码空格符

<小于号<>大于号>&和号&￥人民币¥©版权©2.1.4特殊字符常用特殊字符对应代码-22.1文本控制标签特殊字符描述字符的代码®注册商标®°度数符号°±正负号±×乘号×÷除号÷²平方2（上标2）²³立方3（上标3）³图像标签2.2在网页中巧妙地使用图像可以让网页丰富多彩。本节将通过常用图像格式、图像标签、相对路径和绝对路径3个知识点，详细讲解HTML5中图像的应用方法。2.2图像标签熟悉常用的图像格式，能够说出不同图像格式的特点。学习目标2.2.1常用图像格式2.2图像标签2.2.1常用图像格式2.2图像标签GIFPNGJPGGIF格式最突出的特点是支持动画，它是一种无损压缩的图像格式，即修改图像之后GIF格式的图像质量没有损失。而且GIF格式支持透明，很适合在互联网上使用。但GIF格式只能处理256种颜色。因此在网页制作中，GIF格式常常用于Logo、小图标和其他色彩相对单一的图像。2.2.1常用图像格式2.2图像标签GIFPNGJPGPNG格式包括PNG-8格式和真色彩PNG格式（包括PNG-24格式和PNG-32格式）。相对于GIF格式，PNG格式最大的优势是体积更小，支持Alpha透明（全透明、半透明），并且颜色过渡更平滑，但PNG格式不支持动画。其中，PNG-8格式与GIF格式类似，只能支持256种颜色，如果用作静态图可以取代GIF格式；真色彩PNG格式可以支持更多的颜色，同时真色彩PNG格式（特指PNG-32格式）支持半透明图像效果。图像标签常用图像格式GIFPNGJPEGJPEG格式是一种有损压缩的图像格式，该格式的图像稍小，但每修改一次图像都会造成一些图像数据的丢失。JPEG格式是专为照片设计的图像格式，网页中类似于照片的图像（如横幅广告、商品图像、较大的插图等）都可以保存为JPEG格式。掌握定义图像的方法，能够写出定义图像的语法格式。学习目标2.2.2图像标签及其属性2.2图像标签2.2图像标签定义图像的基本语法格式<img

src="图像URL"/>src属性用于指定图像的路径，它是<img/>标签的必需属性。2.2.2图像标签及其属性要想在网页中显示图像就需要使用图像标签。在HTML中使用<img/>标签来定义图像2.2.2图像标签及其属性<img/>标签的其他的属性-12.2图像标签属性属性值描述alt文本图像不能显示时的替换文本。title文本鼠标指针悬停时显示的内容。width像素值设置图像的宽度。height像素值设置图像的高度。border数字设置图像边框的宽度。vspace像素值设置图像顶部和底部的空白（垂直边距）。.com2.2.2图像标签及其属性<img/>标签的其他的属性-2yx.ityxb2.2图像标签属性属性值描述hspace像素值设置图像左侧和右侧的空白（水平边距）。alignleft将图像对齐到左边。right将图像对齐到右边。top将图像的顶端和文本的第一行文字对齐，其他文字居图像下方。middle将图像的水平中线和文本的第一行文字对齐，其他文字居图像下方。bottom将图像的底部和文本的第一行文字对齐，其他文字居图像下方。2.2.2图像标签及其属性2.2图像标签alt图像的替换文本属性，在图像无法显示时告诉用户该图片的内容。案例演示2.2.2图像标签及其属性2.2图像标签title设置鼠标指针悬停时，图像的提示文字案例演示2.2.2图像标签及其属性2.2图像标签width和height用于自定义图像的宽度和高度，通常只设置一个属性，另一个会依据已设置的属性而变化，以等比例显示原图。2.2.2图像标签及其属性2.2图像标签border√可以为图像添加边框，并且可以设置边框的宽度；√使用HTML的border属性无法更改边框颜色。√border属性的取值无需添加单位。案例演示2.2.2图像标签及其属性2.2图像标签在HTML

4.01之前，可以通过vspace属性和hspace属性分别调整图像的垂直边距和水平边距。Vspace和hspace2.2.2图像标签及其属性2.2图像标签align使用align属性实现图像和文字环绕效果案例演示注意：1.实际制作网页时，HTML5并不支持<img/>标签中使用

border、vspace、hspace和align属性，这四个属性在HTML4.01已废弃，可用CSS样式替代。2.网页制作中，装饰性的图像不建议直接插入<img/>标签，最好通过CSS设置背景图像的方式来实现。2.2.2图像标签及其属性2.2图像标签熟悉绝对路径和相对路径，能够说出不推荐使用绝对路径的原因。学习目标2.2.3绝对路径和相对路径2.2图像标签2.2.3绝对路径和相对路径2.2图像标签什么是路径？2.2.3绝对路径和相对路径2.2图像标签路径在使用计算机查找需要的文件时，需要知道文件的位置，而表示文件位置的方式就是路径。2.2.3绝对路径和相对路径2.2图像标签相对路径绝对路径相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。绝对路径就是网页上的文档或目录在盘符（即C盘、D盘等）中的真正路径。例如，“D:\案例源码\chapter02\images\tao.png”是一个盘符中的绝对路径。2.2.3绝对路径和相对路径2.2图像标签相对路径设置方法图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如<img

src=“logo.gif”/>。图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img

src="img/img01/logo.gif"/>。3

图像文件位于html文件的上一级文件夹：在文件名之前加入“../”，如果是上两级，则需要使用“../../”，以此类推，如<img

src="../logo.gif"/>。2.2.3绝对路径和相对路径2.2图像标签网页中不推荐使用绝对路径，因为网页制作完成之后需要将所有的文档上传到服务器。在服务器中，路径存储根目录会发生改变，有可能不存在“D:\案例源码\chapter02\images\banner1.jpg”这样很精准的路径。若路径错误，网页就无法正常显示图像。使用相对路径，可以很好的避免这个问题。列表标签2.3一个网站由多个网页构成，每个网页上都有响应的信息。将这些信息以列表的方式呈现，可以使信息排列有序，条理清晰。HTML语言提供了3种列表，分别

为无序列表、有序列表和定义列表，本节将对这3种列表以及列表的嵌套进行详细讲解。2.3列表标签掌握无序列表的用法，能够写出无序列表的语法格式。学习目标2.3.1无序列表2.3列表标签2.3.1无序列表无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为其各个列表项之间没有顺序级别之分，通常是并列的。2.3列表标签2.3.1无序列表2.3列表标签无序列表的基本语法格式<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>...</ul><ul>标签用于定义无序列表<li>标签用于描述具体的列表项每对<ul>中至少应包含一对<li>2.3.1无序列表<ul>标签和<li>标签都拥有type属性，用于指定列表项目符号。列表项目符号是列表项前显示的符号。当为type属性设置不同的属性值，可以呈现不同的符号。无序列表的type属性值与显示效果2.3列表标签type属性值显示效果disc（默认值）●circle○square■2.3.1无序列表2.3列表标签案例演示注意：在HTML中不建议直接使用<ul>标签的type属性。<ul>标签中需要嵌套<li>标签，不建议在<ul>标签中直接输入文本内容。2.3.1无序列表2.3列表标签掌握有序列表的用法，能够写出有序列表的语法格式。学习目标2.3.2有序列表2.3列表标签2.3.2有序列表有序列表的各个列表项按照一定的顺序排列。例如，网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。2.3列表标签2.3.2有序列表2.3列表标签<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>...</ol><ol>标签用于定义有序列表<li>标签用于描述具体的列表项每对<ol>中至少应包含一对<li>有序列表的基本语法格式.com2.3.2有序列表在有序列表中，除了type属性之外，还可以为<ol>标签定义start属性、为<li>标签定义value属性。有序列表的属性和属性值及相关描述yx.ityxb2.3列表标签属性属性值描述type1（默认）项目符号显示为数字1、2、3……a或A项目符号显示为英文字母a、b、c……或A、B、C……i或I项目符号显示为罗马数字i、ii、iii……或I、II、III……start数字规定全部列表项的初始值。value数字规定当前列表项的初始值。reversedreversed（可以省略）规定列表顺序为降序。2.3.2有序列表2.3列表标签案例演示掌握定义列表的用法，能够写出定义列表的语法格式。学习目标2.3.3定义列表2.3列表标签2.3.3定义列表定义列表常用于对名词进行解释和描述，与无序列表和有序列表不同，定义列表的列表项前没有任何项目符号。2.3列表标签2.3.3定义列表定义列表的基本语法格式2.3列表标签<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd>...<dt>名词2</dt><dd>名词2解释1</dd><dd>名词2解释2</dd>...</dl><dl>标签用于指定定义列表<dt>标签用于指定术语名词<dd>标签用于对名词进行解释和描述案例演示2.3.3定义列表2.3列表标签2.3.3定义列表在网页设计中，定义列表常用于实现图文混排效果。其中，<dt>标签中插入图片，<dd>标签中放入对图片解释说明的文字。2.3列表标签注意：<dl>、<dt>、<dd>三个标签之间不允许出现其他标签。<dl>标签必须与<dt>标签相邻。2.3.3定义列表2.3列表标签掌握列表的嵌套，能够在列表中创建子列表。学习目标2.3.4列表的嵌套2.3列表标签2.3列表标签2.3.4列表的嵌套在使用列表时，列表项中也有可能包含若干子列表项，我们要想在列表项中定义子列表项就需要将列表进行嵌套。列表嵌套的示例<ul><li>列表项1</li><li>列表项2</li><li><ol><li>列表项1</li><li>列表项2</li></ol></li></ul>2.3.4列表的嵌套2.3列表标签案例演示注意：在制作网页时，不建议直接使用列表标签的属性，通常使用CSS样式替代。2.3列表标签2.3.4列表的嵌套超链接标签2.4一个网站通常由多个页面构成，打开网站，通常先看到的是首页。如果想从首页跳转到其他页面，就需要在首页的相应位置添加超链接。在网页中使用超链接标签添加超链接，本节将对超链接标签进行详细讲解。2.4超链接标签掌握创建超链接的方法，能够在网页中创建超链接。学习目标2.4.1创建超链接2.4超链接标签2.4.1创建超链接使用<a>标签可以创建超链接。创建超链接的语法格式2.4超链接标签<a

href="跳转目标"target="目标窗口的弹出方式">文本或图像</a>href用于指定链接目标的url地址，当为<a>标签应用href属性时，它就具有了超链接的功能。target用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，意为在原窗口中打开，_blank为在新窗口中打开。2.4.1创建超链接2.4超链接标签案例演示注意：暂时没有确定链接目标时，通常将<a>标签的href属性值定义为

“#”(即href="#")，表示该链接暂时为一个空链接。在网页中不仅可以创建文本超链接，各种网页元素，如图像、音频、视频等都可以添加超链接。2.4.1创建超链接2.4超链接标签掌握锚点链接的使用方法，能够在网页中创建锚点链接。学习目标2.4.2锚点链接2.4超链接标签2.4.1创建超链接2.4超链接标签如果网页内容较多，页面过长浏览网页时就需要不断地拖动滚动条，来查看所需要的内容。效率较低不方便2.4.1创建超链接2.4超链接标签为了提高信息的检索速度HTML语言提供了一种特殊的链接——锚点链接，通过创建锚点链接，用户能够快速定位到目标内容。步骤1步骤2创建锚点链接对象：<a

href="#id名">链接文本</a>2.4.1创建超链接创建锚点链接分为两步：2.4超链接标签创建锚点跳转目标：<标签id=“id”>显示内容</标签>2.4.1创建超链接2.4超链接标签案例演示结构标签2.5结构标签是HTML5中新增的标签，用于丰富页面的功能结构，主要包括<header>标签、<nav>标签、<article>标签等。本节将介绍常用的结构标签。2.5结构标签熟悉<header>标签的使用方法，能够使用<header>标签定义网页的头部。学习目标2.5.1<header>标签2.5结构标签2.5.1<header>标签HTML5中的<header>标签是一种具有引导作用的结构标签，可以包含所有放在页面头部的内容。此外<header>标签也可以用来放置整个页面或页面内的某个内容区块的标题，还可以包含网站Logo图像、表单或者其他相关内容。2.5结构标签2.5.1<header>标签2.5结构标签<header><h1>文字内容</h1>…</header><header>标签的示例代码2.5.1<header>标签2.5结构标签案例演示熟悉<nav>标签的使用方法，能够定义导航链接。学习目标2.5.2<nav>标签2.5结构标签2.5结构标签2.5.2<nav>标签<nav>标签是HTML5新增的标签,用于定义导航链接。<nav>标签可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。<nav>标签的示例代码<nav><ul><li><a

href="#">首页</li><li><a

href="#">公司概况</li><li><a

href="#">产品展示</li><li><a

href="#">联系我们</li></ul></nav>2.5.2<nav>标签2.5结构标签<nav>可以设置的导航传统导航条侧边栏导航页内导航翻页导航熟悉<footer>标签的使用方法，能够定义网页的底部。学习目标2.5.3<footer>标签2.5结构标签2.5.3<footer>标签<footer>标签用于定义一个页面或者区域的底部，它可以包含所有放在页面底部的内容。与<header>标签类似，一个页面中可以包含多个<footer>标签。2.5结构标签2.5.3<footer>标签2.5结构标签<footer>页面底部内容</footer><footer>标签的示例代码熟悉<artical>标签的使用方法，能够定义页面中与上下文不相关的独立部分。学习目标2.5.4<artical>标签2.5结构标签2.5.4<artical>标签<article>标签用于定义文档、页面或者应用程序中与上下文不相关的独立部分，该元素经常被用于定义日志、新闻或用户评论等。2.5结构标签2.5.4<artical>标签<artical>标签的示例代码<article><header><h1>秋天的味道</h1><p>你想不想知道秋天的味道？它是甜、是苦、是涩。</p></header><footer><p>著作权归XXXXXX公司所有。</p></footer></article>2.5结构标签熟悉<section>标签的使用方法，能够使用<section>标签把段落标注起来。学习目标2.5.5<section>标签2.5结构标签2.5.5<section>标签<section>标签用于定义一段专题性的内容，一般会带有标题，主要应用在文章的章节中。2.5结构标签2.5.5<section>标签使用<section>标签的原则:2.5结构标签1<section>标签具有语义化。当一个标签只是为了样式化或者方便脚本使用时，应该使用无语义化的标签。2如果<article>标签、<aside>标签或<nav>标签更符合使用条件，则无需使用<section>标签。3没有标题的内容模块不要使用<section>标签。4<section>标签和<article>标签可以互相嵌套，没有上下级关系。2.5.5<section>标签2.5结构标签案例演示熟悉<aside>标签的使用方法，能够使用<aside>标签定义网页中的附属信息。学习目标2.5.6<aside>标签2.5结构标签2.5.6<aside>标签<aside>标签用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等有别于主要内容的部分。2.5结构标签<aside>标签的用法2.5.6<aside>标签2.5结构标签被包含在article元素内，用于定义主要内容的附属信息部分。用法1在article元素之外使用，用于定义页面或网站的附属信息部分。用法21<article>23456<header><h1>标题</h1></header><section>文章主要内容</section><aside>文章的其他相关信息</aside>7</article>8<aside>右侧菜单</aside>2.5.6<aside>标签<aside>标签的使用示例代码2.5结构标签熟悉<figure>标签和<figcaption>标签的使用方法，能够定义独立的网页内容。学习目标2.5.7<figure>标签和<figcaption>标签2.5结构标签<figure>标签用于定义独立的网页内容，例如，图像、图表、照片、代码等。<figure>标签嵌套的内容应该与网页内容相关，如果删除<figure>标签嵌套的内容，也不应对文档流产生影响。<figcaption>标签嵌套在<figure>标签中，用于为<figure>标签添加标题。一个<figure>标签内

最多允许使用一个<figcaption>标签，该<figcaption>标签应该放在<figure>标签的第一个或者最后一个子标签的位置。2.5.7<figure>标签和<figcaption>标签2.5结构标签2.5结构标签案例演示2.5.7<figure>标签和<figcaption>标签熟悉<hgroup>标签的使用方法，能够将多个标题组成一个标题组。学习目标2.5.8<hgroup>标签2.5结构标签2.5.8<hgroup>标签<hgroup>标签用于将多个标题（主标题、副标题或子标题）组成一个标题组，通常与<h1>~<h6>标签组合使用。<hgroup>标签不会改变标题的样式。使用hgroup元素的注意事项:2.5结构标签2当一个标题标签中包含其他标题标签、<section>标签或者<article>标签，通常将<hgroup>标签和这些标签放到<header>标签中1如果只有一个标题元素不建议使用hgroup元素。案例演示2.5.8<hgroup>标签2.5结构标签页面交互标签2.6在HTML5中，新增了一些页面交互标签，例如，<details>标签、<summary>标签等。这些页面交互标签可以通过用户操作或图文展示给用户带来良好的使用体验，极大的丰富了网页内容展现形式。本节将对HTML5中一些常用的页面交互标签进行详细讲

解。2.6页面交互标签学习目标熟悉<details>标签的使用方法，能够在网页中创建一个可展开折叠的元素。熟悉<summary>标签的使用方法，能够定义标题。2.6.1<details>标签和<summary>标签2.6页面交互标签<details>标签可以在网页中创建一个可展开折叠的元素，让一段文字或标题包含一些隐藏的信息。在使用<details>标签时，可以在<details>标签中嵌入<summary>标签。<summary>标签可以作为<details>标签的第一个子标签，用于为<details>标签定义标题。当用户单击<summary>标签定义的标题时，会显示或隐藏<details>标签中嵌入的其他内容。2.6.1<details>标签和<summary>标签2.6页面交互标签2.6.1<details>标签和<summary>标签2.6页面交互标签案例演示熟悉<progress>标签的使用方法，能够定义任务进度条。学习目标2.6.2<progress>标签2.6页面交互标签2.6页面交互标签2.6.2<progress>标签<progress>标签用来定义任务进度条，该标签可以配合JavaScript代码实现一些进度条动画效果。<progress>标签的语法格式<progress属性="属性值"></progress><progress>标签属性说明value：已经完成的工作量。max：总共有多少工作量。案例演示2.6.2<progress>标签2.6页面交互标签学习目标熟悉<meter>标签的使用方法，可以定义给定范围的数据。2.6.3<meter>标签2.6页面交互标签2.6.3<meter>标签<meter>标签用来定义给定范围的数据。在网页中，<meter>标签的显示效果很像进度条，但是<meter>标签不能用来定义进度条。如果要定义进度条，需要使用<progress>标签。<meter>标签的语法格式<meter属性="属性值"></meter>2.6页面交互标签属性说明value表示实际数据。如果不做指定该数据，那么<meter>标签中的第一个数字就会被认为实际数据，如果标签内没有数字，那么实际数据为0。min表示数据范围的最小数值。max表示数据范围的最大数值。2.6.3<meter>标签<meter>标签的常用属性-12.6页