hgroup、header、meter|HTML5实战宝典

2023-10-28 理论教育版权反馈

【摘要】：HTML5新增了一些标签，但它们并不像我们想象的那样陌生，它们只是更加符合我们的思维方式，更人性化。下面详细介绍HTML5新增的标签以及它们的用法。代码示例：2）hgroup标签对网页或区段的标题进行组合代码示例：header标签相当于页面主体上的头部（页眉），注意区别于head标签。meter标签表示特定范围内的数值，可用于工资、数量、百分比等。

HTML5新增了一些标签，但它们并不像我们想象的那样陌生，它们只是更加符合我们的思维方式，更人性化。按照以往的布局方式，我们要划分页面结构时都是使用的div，例如<divclass="header"></div>、<divid="footer"></div>等。HTML5直接用header、footer标签来代替div，这类标签更加语义化，便于爬虫读取（SEO）。下面详细介绍HTML5新增的标签以及它们的用法。

1.结构性标签

结构性标签（construct tag）主要负责Web的上下文结构的定义，确保HTML文档的完整性，使网页的文档结构更加明确。这类标签包括以下几个：

（1）section标签用于表达文档的一部分或一章，或者一章内的一节。在Web页面应用中，该标签也可以用于区域的章节表述。它用来表现普通的文档内容或应用区块，通常由内容及其标题组成。但section标签并非一个普通的容器元素，它表示一段专题性的内容，一般会带有标题。

代码示例：

2）hgroup标签对网页或区段（section）的标题进行组合

代码示例：

（3）header标签相当于页面主体上的头部（页眉），注意区别于head标签。这里可以给初学者提供一个判断区别的小技巧：head标签中的内容往往是不可见的，而header标签往往在一对body标签之中。

代码示例：

（4）footer标签相当于页面的底部（页脚）。通常，人们会在这里标出网站的一些相关信息，例如关于我们、法律申明、邮件信息、管理入口等。

代码示例：

5）nav标签是专门用于菜单导航、链接导航的标签，是navigator的缩写

代码示例：

6）article标签用于表示一篇文章的主体内容，一般为文字集中显示的区域

代码示例：

2.块级性标签

块级性标签（block tag）主要完成Web页面区域的划分，确保内容的有效分隔，这类标签包括以下几个。

（1）aside标签是用以表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。从一个简单页面显示上看，就是侧边栏，可以在左边，也可以在右边。从一个页面的局部看，就是摘要。

代码示例：

2）figure标签规定独立的流内容（图像、图表、照片等），通常与figcaption联合使用

代码示例：

3）code标签表示一段代码块

代码示例：

（4）dialog标签定义对话框或窗口，配合<dt>、<dd>标签使用。它的属性open规定dialog元素是活动的，用户可与之交互。

代码示例：

（5）Canvas标签。它是一个画布标签，用它可以实现电脑上的画图工具，可以在网页中画出不同的图形。

3.行内标签

行内语义性标签（in-line tag）主要完成Web页面具体内容的引用和表述，是丰富内容展示的基础，这类标签包括以下几个标签。

（1）meter标签表示特定范围内的数值，可用于工资、数量、百分比等。max表示最大值，min表示最小值，value代表当前值，如图2-1所示。

代码示例：(www.chuimin.cn)

图2-1 meter示例

(2)time标签表示时间值，该元素能够以机器可读的方式对日期和时间进行编码，属性datetime强调日期和时间。

代码示例：

(3)progress标签用来表示任务的进度条，属性max表示最大任务值，属性value表示完成了多少任务，如图2-2所示。

代码示例：

图2-2 progress示例

4.多媒体标签

多媒体标签（multimedia tag），它可以让网页对视频和音频有着更好的实现，不用再与其他的插件配合使用。HTML5中提供了video视频标签与audio音频标签，详情参照第8章HTML5对多媒体的支持。

5.表单控件

HTML5中的表单更加自由，不用将表单元素全部放在form标签对中，它可以放在页面的任何位置，表单元素只需要通过form属性指向元素所属表单的id值，就可以与表单关联起来。而且以前使用表单，都需要用JavaScript来验证用户输入的信息是否规范，现在新增的一些表单控件自带验证功能，大大的解放了我们的双手。例如datalist选项列表标签、output输出标签、email输入类型、url输入类型、日期时间类型、number类型、range滑块类型、search类型、tel类型、color类型等。详情参照第3章HTML5表单新功能。

6.交互性标签

交互性标签（interactive tag）主要用于功能性的内容表达，会有一定的内容和数据的关联，它是各种事件的基础，这类标签包括以下几个。

（1）menu标签主要用于交互菜单（这是一个曾被废弃现在又被重新启用的标签），它会实现鼠标右击元素会出现一个菜单，但几乎所有的主流浏览器都不支持它。

属性说明：

1）type：规定要显示哪种菜单类型。它有3个值分别是：

list：列表菜单，一个用户可执行或激活的命令列表。

context：上下文菜单，它必须在用户能够与命令进行交互之前被激活。

toolbar：工具栏菜单，允许用户立即与命令进行交互，它是一个活动式命令。其中list，toolbar功能还未实现。

2）label：规定菜单的可见性，值为text（想要显示的文本）。

代码示例：