HTML5新增标签的汇总与详解

趁着一点闲暇时间，把HTML5的新增标签整理了一下，用了表格的形式展现，分别归纳了各标签的用法及属性分析。这样方便各位以后在运用HTML5标记遇到疑惑时，直接上来对照看下就明了了，希望对大家有帮助哦。

标签

标记意义及用法分析/示例

属性/属性值/描述

<article>

定义独立的内容，如论坛帖子、报纸文章、博客条目、用户评论等内容。

支持HTML5的全局属性和事件属性。

<aside>

定义两栏或多栏页面的侧边栏内容，如联系我们、客服、网站公告等内容。

支持HTML5的全局属性和事件属性。

<audio>

定义音频内容，如音乐或其他音频流。

autoplay	autoplay	自动播放。
controls	controls	显示控件。
loop	loop	自动重播。
preload	preload	预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	音频的URL。

支持HTML5的全局属性和事件属性。

<audio src=”audio.wav”>

您的浏览器不支持 audio 标签。（注：可以在开始标签和结束标签之间加上此文本内容，这样若浏览器不支持此元素，就可以显示出这个信息。）

</audio>

<canvas>

定义图形，如图表和其他图像。（注：<canvas> 只是图形容器，我们必须使用脚本来绘制图形。）

height	pixels	设置 canvas 的高度。
width	pixels	设置 canvas 的宽度。

支持HTML5的全局属性和事件属性。

<canvas id=”myCanvas”></canvas>

<script type=”text/javascript”>

var canvas=document.getElementById(‘myCanvas’);

var ctx=canvas.getContext(‘2d’);

ctx.fillStyle=’#FFFF00′;

ctx.fillRect(0,0,20,30);

</script>

<command>

标记定义一个命令按钮，比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。

checked	checked	定义是否被选中。仅用于 radio 或 checkbox 类型
disabled	disabled	定义 command 是否可用
icon	url	定义作为 command 来显示的图像的url
label	text	为 command 定义可见的 label
radiogroup	groupname	定义 command 所属的组名。仅在类型为 radio 时使用
type	checkbox command radio	定义该 command 的类型。默认是 “command”

支持HTML5的全局属性和事件属性。

<menu>

<command onclick=”alert(‘Hello!’)”>Click here.</command>

</menu>

<datalist>

定义选项列表，需与 input 元素配合使用，通过input 元素的 list 属性来绑定，用来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

支持HTML5的全局属性和事件属性。

<input id=”fruits” list=”fruits” />

<datalist id=”fruits”>

<option value=”Apple”>

<option value=”Banana”>

</datalist>

<details>

用于描述文档或文档某个部分的细节。

open

open

定义 details 是否可见

支持HTML5的全局属性和事件属性。

<details>

<summary>Some title.</summary>

<p>Some details about the title.</p>

</details>

<embed>

定义外部的可交互的内容或插件。

height	pixels	设置嵌入内容的高度
src	url	嵌入内容的 URL
type	type	定义嵌入内容的类型
width	pixels	设置嵌入内容的宽度

支持HTML5的全局属性和事件属性。

<embed src=”someone.swf” />

<figure>

定义一组媒体内容（图像、图表、照片、代码等）以及它们的标题。如果被删除，则不应对文档流产生影响。

支持HTML5的全局属性和事件属性。

<figure>

<p>The title of the image.</p>

<img src=”someimage.jpg” width=”100″ height=”50″ />

</figure>

<footer>

定义一个页面或一个区域的页脚。可包含文档的作者姓名、创作日期或者联系信息。

支持HTML5的全局属性和事件属性。

<header>

定义一个页面或一个区域的头部。

支持HTML5的全局属性和事件属性。

<hgroup>

定义文件中一个区块的相关信息，使用 <hgroup> 标签对网页或区段（section）的标题进行组合。

支持HTML5的全局属性和事件属性。

<hgroup>

<h1>Welcome my world!</h1>

<h2>This is a title.</h2>

</hgroup>

<keygen>

定义表单里一个生成的键值。规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。

autofocus	autofocus	使 keygen 字段在页面加载时获得焦点
challenge	challenge	如果使用，则将 keygen 的值设置为在提交时询问
disabled	disabled	禁用 keytag 字段
form	formname	定义该 keygen 字段所属的一个或多个表单
keytype	rsa	定义 keytype。rsa 生成 RSA 密钥
name	fieldname	定义 keygen 元素的唯一名称，用于在提交表单时搜集字段的值。

支持HTML5的全局属性和事件属性。

<form action=”demo_keygen.asp” method=”get”>

Username: <input type=”text” name=”usr_name” />

Encryption: <keygen name=”security” />

<input type=”submit” />

</form>

<mark>

定义有标记的文本。请在需要突出显示文本时使用此标签。

支持HTML5的全局属性和事件属性。

<p>I like <mark>apple</mark> most.</p>

<meter>

定义度量衡。仅用于已知最大和最小值的度量。（注：必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。）

high	number	定义度量的值位于哪个点，被界定为高的值
low	number	定义度量的值位于哪个点，被界定为低的值
max	number	定义最大值。默认值是 1
min	number	定义最小值。默认值是 0
optimum	number	定义什么样的度量值是最佳的值。如果该值高于 “high” 属性，则意味着值越高越好。如果该值低于 “low” 属性的值，则意味着值越低越好。
value	number	定义度量的值

支持HTML5的全局属性和事件属性。

<meter min=”0″ max=”10″>2</meter>

<meter>2 out of 5</meter>

<meter>10%</meter>

<nav>

定义导航链接。（注：如果文档中有“前后”按钮，则应该把它放到 <nav> 元素中。）

支持HTML5的全局属性和事件属性。

<nav>

<a href=”index.asp”>Home</a>

<a href=”Previous.asp”>Previous</a>

<a href=”Next.asp”>Next</a>

</nav>

<output>

定义不同类型的输出，比如脚本的输出。

for	id of another element	定义输出域相关的一个或多个元素
form	formname	定义输入字段所属的一个或多个表单
name	unique name	定义对象的唯一名称。（表单提交时使用）

支持HTML5的全局属性和事件属性。

<progress>

定义任务（如下载）的过程，可以使用此标签来显示 JavaScript 中耗费时间的函数的进度。

max	number	定义完成的值
value	number	定义进程的当前值

支持HTML5的全局属性和事件属性。

<progress>

<span id=”progress”>15</span>%

</progress>

<ruby>

定义 ruby 注释（中文注音或字符）。在东亚使用，显示的是东亚字符的发音。ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 “ruby” 元素时显示的内容。

支持HTML5的全局属性和事件属性。

<section>

定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

cite

URL

当 section 摘自 web 的时候使用

支持HTML5的全局属性和事件属性。

<source>

为媒介元素（比如 <video> 和 <audio>）定义媒介资源。

media	media query	定义媒介资源的类型，供浏览器决定是否下载
src	url	媒介的 URL
type	numeric value	定义播放器在音频流中播放起始位置。默认是从开头播放。

支持HTML5的全局属性和事件属性。

<time>

定义一个日期/时间，该元素能够以机器可读的方式对日期和时间进行编码，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

datetime	datetime	规定日期或时间。否则，由元素的内容给定日期或时间
pubdate	pubdate	指示 <time> 元素中的日期或时间是文档的发布日期

支持HTML5的全局属性和事件属性。

<p>大家都是早上 <time>9:00</time> 上班。</p>

<p><time datetime=”2012-01-01″>元旦</time>晚会。</p>

<video>

定义视频，比如电影片段或其他视频流。

autoplay	autoplay	自动播放。
controls	controls	显示控件。
height	pixels	设置视频播放器的高度
loop	loop	自动重播。
preload	preload	预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	视频的URL。
width	pixels	设置视频播放器的宽度

支持HTML5的全局属性和事件属性。