html5新增的标签

1.新增的结构标签

（1）section标签

<section>标签，定义文档中的节，比如章节、页眉、页脚或文档中的其它部分。一般用于成节的内容，会在文档流中开始一个新的节。它用来表现普通的文档内容或应用区块，通常由内容及其标题组成。但section标签并非一个普通的容器元素，它表示一段专题性的内容，一般会带有标题。

（2）article标签

<article>是一个特殊的section标签，它比section具有更明确的语义，它代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。例如，一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。article可以嵌套，内层的article标签对外层的article标签有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论可以用article的形式嵌入其中。

（3）aside标签

通常用来描述跟主内容相关，但是又可以独立的内容。比如，以TOPYS网为例，红色的主要内容区是一篇独立的文章，可以使用article标签，右侧的蓝色框可以使用aside标签，该模块展示了与文章相关性的内容，可以是评论也可以是推荐文章等。

（4）header、footer、nav常用语义化标签

在HTML5之前，如果开发相关的页面布局的时候，往往都是使用CSS来定义相关的头部、底部及其导航部分。在新的HTML5标准中，定义的这些标签（header、footer、nav）帮助你更语义化的定义页面层次和逻辑，我们做网页布局就不仅限于div标签布局了。

这三种标签，顾名思义，就是对文章或区块，定义相关的头部信息、底部信息及导航内容的。

（5）hgroup、figure辅助主体布局标签

hgroup标签是对网页或区段section的标题元素（h1-h6）进行组合。例如，在一区段中你有连续的h系列的标签元素，则可以用hgroup将他们括起来。

figure标签规定独立的流内容（图像、图表、照片、代码等等）。figure元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

2.多媒体标签

（1）audio音频标签

audio音频标签用在网页中嵌入音频文件。语法结构及各属性如下：

<audio src="demo.mp3">您的浏览器不支持audio标签</audio>

• src属性

指定音频URL地址，可以是相对的URL也可以是绝对的URL。

<audio src="demo.mp3"></audio>

注意：音频可以支持三种格式，分别是wav、MP3、ogg，都是音频格式，而且在不同的浏览器中还有不同的兼容性。下面是主流的几个浏览器对它的支持性：

• controls属性

添加该属性之后，音频播放控件将会显示，控件包括：播放、暂停、定位、音量等。

<audio src="demo.mp3" controls></audio>

• autoplay属性

添加autoplay属性并准确赋值时，音频将会自动播放。

<audio src="demo.mp3" controls autoplay></audio>

• loop属性

添加loop属性并准确赋值时，音频将会循环播放。

<audio src="demo.mp3" controls loop></audio>

• preload属性

可选值有auto（当页面加载后载入整个音频）、meta（当页面加载后只载入元数据）和none（当页面加载后不载入音频），如果设置了前面的autoplay属性，那么preload将会被忽略。

<audio src="demo.mp3" controls preload="auto"></audio>

（2）video视频标签

video视频标签就是向页面中嵌入视频元素。

<video src="shipin.mp4">您的浏览器不支持video标签</video>

视频标签和音频标签很多属性用法都是一样的，如src、controls、autoplay、loop、preload相同的属性，这里就不做过多的介绍了，下面主要介绍视频独有的一些属性。

• src属性

注意：视频也支持3种格式，分别是WebM、MPEG4、ogg，而且在不同的浏览器中还有不同的兼容性。下面是主流的几个浏览器对它的支持性：

• width、height属性

宽度和高度一般只要指定一个属性即可。如果不知道源视频的大小，两个属性一起修改会把视频比例调整变形，只指定宽度或高度一个属性即可等比例缩放。

<video src="shipin.mp4" controls width="500"></video>

• muted属性

规定视频的输出音量被静音。

<video src="shipin.mp4" controls muted></video>

• poster属性

规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。

<video src="shipin.mp4" controls poster="tu.jpg">  

（3）source标签

该标签是对audio和video标签的补充，source标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源，以video视频标签为例，火狐浏览器不支持MP4格式，但是支持ogg格式，因此为了在各种浏览器下都能显示视频，做以下兼容方式：

<video controls="controls">    <source src="video.ogg" type="video/ogg">    <source src="video.mp4" type="video/mp4"></video>

3.其他功能性标签

（1）details标签和summary标签

• details用于描述文档或文档某个部分的细节。
• summary做为details的标题，标题是可见的，用户点击标题时，会显示出details的详细内容。

语法：

<details>        <summary>这里填写标题文字</summary>        <p>这里填写详细内容</p></details>

（2）progress标签和meter标签

• progress标签，顾名思义，是一个进度条，有两个常用参数value（表示当前进度）、    max（表示总进度）。
• meter标签的结构类似progress控件，都是设置一个max参数，使用value来指定显示的结果。但它比progress多了几个参数，还可以设置min表示最低量，以及low、high、optimum这些参数来描述数据的状态。

（3）mark标签、cite标签、time标签

• mark标签突出显示部分文本。
• cite标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
• time标签定义日期或时间，或者两者，格式如下：

<time datetime="2016-10-01">国庆节</time>

注意：datetime属性，定义元素的日期和时间，标签内的文字只是展示效果，搜索引擎抓取的事实上是datetime属性内的时间。

（4）canvas标签

canvas标签可以实现在网页中直接绘制复杂的图形，但canvas只是一个图像的容器，使用脚本才能绘制想要的图形，该标签会在HTML5高级中进行讲解。