本节书摘来异步社区《HTML5移动应用开发入门经典》一书中的第2章，第2.1节，作者：【美】Jennifer Kyrnin，更多章节内容可以访问云栖社区“异步社区”公众号查看。
2.1 HTML5中的新标签
HTML5移动应用开发入门经典
HTML5为HTML规范加入了一些新的特性，其中最容易理解的就是新的标签。它们过去从未成为HTML的一部分，但现在却是HTML元素了。
2.1.1 新布局标签
大部分新标签被称为“分节”元素，它们为HTML文档的布局及分段提供语义。第9章将更详细地介绍这些标签。
新布局标签如下所示。
- ——文档或站点的一个独立部分。
- ——页面或站点主题之外的内容。
- ——figure元素的标题。
- ——独立于文本流之外的一段流内容（如图形、图表等）。
- ——文档或章节的页脚。
- ——文档或标题的页眉。
- ——标题组。
- ——导航部分。
- ——无法被以上类型定义的普通章节。
这些标签用来定义HTML文档中的对应区域。使用它们，不但便于附加CSS样式（通常被称为CSS钩子），也给页面的相关部分提供了语义含义。
注意：
使用语义标签提供含义
语义标签让浏览器或用户代理（User Agent，术语，指Web页面解析工具）辨别标签内容。换言之，例如这类语义标签不会简单地为一段文档定义其位于相关页面上的位置，而会告诉浏览器此内容属于独立文章的一部分。
使用这些新的布局标签并不难。事实上，许多Web页面正在使用与这些标签作用相似的
Try It Yourself
转换到新的布局标签
可能你已经在Web页面上见过许多类似下面这样的标记语言。
其中包括了一个被写成
而将这些
注意：
使用id属性
需要注意到的是，新的HTML5元素，诸如、、等，代表的不仅仅是页面的页眉、页脚以及导航。一个页面可以包括许多此类元素，因此加入id属性（例如，）通常能为文档样式提供帮助。第9章将详细讨论这些元素。
2.1.2 其他语义元素
在为文档定义具体项目时，可以用到一些HTML5的语义元素。它们让浏览器或者用户代理识别出除了文本含义之外的具体标签内容含义。第9章将会详细讨论这些标签。下面是一些HTML5中出现的新语义标签。
- <details>——新增信息。
- <figcaption>——figure元素的标题。
- <figure>——独立于文档流之外的图形或相关文本引用。
- <mark>——被突出或标记的内容。
- <meter>——计量器。
- <output>——脚本或表单结果。
- <progress>——进度指示。
- <summary>——details元素的概要或说明。
- <time>——日期或时间。
- <wbr>——可选的换行符（软换行）。
AI 代码解读
元素是最容易理解的新语义元素之一。在此标签内出现的为时间或日期。用户代理可以通过调用时间及日期来进行自动添加日历链接等。尽管当前的浏览器都不支持标签，但还是可以通过图2.1来了解使用此标签时可能出现的画面。
警告：
语义标签可能无所作为
有关对语义标签的抱怨中，最常见之一是它们无所作为。此类标签用来为内容添加额外信息，然而用户代理可能会选择忽视它们。这并不意味着这些标签没有用处。它们提供的CSS钩子让页面样式制作变得更有效率，同时也为用户代理在将来对它们的使用提供了可能性。另外，即便在某些浏览器中它们无所作为，但在其他浏览器下情况又有可能不同。
不要专门为了使用语义标签而为其添加内容。当发现文档的某个部分有语义含义时，将它嵌入语义标签中就可以了。
2.1.3 新的多媒体标签
HTML5的新标签中讨论得最多的是多媒体标签。可以通过以下标签为HTML增添多媒体元素。
<audio>——内嵌音频文件。
<canvas>——内嵌动态图形。
<embed>——增添其他不包含特定HTML5元素的技术。
<source>——内嵌音频及视频的源文件。
<track>——内嵌音频及视频的辅助多媒体轨道。
<video>——内嵌视频文件。
AI 代码解读
标签用于在HTML页面中绘制矢量图像。可以通过它来为页面增添自定义字体、创建简单或复杂的游戏、让矢量图形动起来，并通过HTML来控制这一切，而且并不需要插件或额外的XML文件。图2.2所示为iOS浏览器支持的标签。
图2.2的效果对应的HTML代码只有以下一行。
在中加入另外的JavaScript代码形成方形。
警告：
记得加载脚本
在使用前置脚本为Web页面加入方形时，不要忘记在标签中加入，以便在页面加载时执行脚本。否则，将保持空白。
第10章中将详细介绍标签。
另外，HTML5还有一些有趣的扩展。例如，标签现在是规范的一部分了。在HTML5之前，大部分浏览器支持的标签并不是合法的HTML，因此以前需要确保页面有效性的开发者无法使用它。
还可以用HTML5中的和
提示：
内嵌任意类型的视频或音频
HTML5多媒体特性的伟大之处在于它的灵活性。可以用
2.1.4 新的表单功能
与HTML 4表单相比，HTML5的表单拥有更多的功能。除了标准文本字段、下拉菜单及其他HTML 4表单中的常见类型之外，现在开发者还可以从其他字段收集更多不同类型的数据。
在HTML5中，可以通过使用标签来为多个表单元素定义一个单一的动作，也可以为标签提供预定义的数据，还可以通过标签生成一对公/私密钥对以保障表单数据安全。而最让人高兴的是，标签现在包括了13种类型，用于收集特定数据。
<input type=color>
<input type=date>
<input type=datetime>
<input type=datetime-local>
<input type=email>
<input type=month>
<input type=number>
<input type=range>
<input type=search>
<input type=time>
<input type=tel>
<input type=url>
<input type=week>
AI 代码解读
新的input类型可以用于所有的浏览器。即便没有针对标签的特殊处理，所有的浏览器也会将其显示为文本字段，以收集数据。如图2.3所示，虽然浏览器对新标签的支持还在逐渐普及的阶段，但使用类似的类型将给支持的浏览器及用户代理提供额外的功能。
在第13章中将深入讨论HTML5表单。
2.1.5 更好的国际化支持
以下5个HTML5新标签进一步为非英语文档提供支持。
<bdi>
<meta charset>
<rp>
<rt>
<ruby>
AI 代码解读
标签用来改变HTML中文本文字的方向。例如，若想在一个英文（从左至右书写的语言）文档中加入希伯来文（从右至左书写的语言），可以将希伯来文字用标签围起来，从而指明该段落的文本方向有所改变。
标签用来定义Web页面使用的字符集编码。例如，若HTML使用的是utf-8字符集，需要包括以下标签。
最后，若使用中文、日文等双字节语言书写HTML时，通常会有附注文字字符，它们是字符旁边的小注释，通常用来标记读音。标签指明附注文字字符的范围，可包括代表附注文本的和代表附注文本两侧括号的。下面以一段伪代码的实例：
