自学HTML5第二节（标签篇---新增标签详解）

HTML5新增标签：

<article> 标签

规定独立的自包含内容。一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。

<article> 元素的潜在来源：

论坛帖子

报纸文章

博客条目

用户评论

实例：

<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>
</article>

<aside> 标签

定义其所处内容之外的内容。aside 的内容应该与附近的内容相关。

提示：<aside> 的内容可用作文章的侧栏。

<p>Me and my family visited The Epcot center this summer.</p>
[code]<aside>

<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.

</aside>

<audio> 标签

定义声音，比如音乐或其他音频流。

提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	规定视频输出应该被静音。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。
src	url	要播放的音频的 URL。

<audio src="someaudio.wav">

您的浏览器不支持 audio 标签。

</audio>

<bdi> 标签

指的是 bidi 隔离。允许您设置一段文本，使其脱离其父元素的文本方向设置。在发布用户评论或其他您无法完全控制的内容时，该标签很有用。

属性值描述

ltr

rtl

auto

规定 <bdi> 元素内的文本的文本方向。默认值：auto。

<canvas> 标签

定义图形，比如图表和其他图像。只是图形容器，您必须使用脚本来绘制图形。

<canvas id="myCanvas"></canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
//x轴 Y轴 宽 高
</script>[/code]

<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"。

<menu>
<command onclick="alert('Hello World')">
Click Me!</command>
</menu>

<datalist> 标签

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

<input id="myCar" list="cars" />
[code]<datalist id="cars">

<option value="BMW">
<option value="Ford">
<option value="Volvo">

</datalist>

<details> 标签

用于描述文档或文档某个部分的细节。提示：与 <summary> 标签 配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。

<details>

<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>

</details>

<dialog> 标签

定义对话框或窗口

table border="1">
<tr>
<th>一月 <dialog open>这是打开的对话窗口</dialog></th>
<th>二月</th>
<th>三月</th>
</tr>
<tr>
<td>31</td>
<td>28</td>
<td>31</td>
</tr>
</table>

<embed> 标签

定义嵌入的内容，比如插件。

<embed src="helloworld.swf" />

属性	值	描述
height	pixels	设置嵌入内容的高度。
src	url	嵌入内容的 URL。
type	type	定义嵌入内容的类型。
width	pixels	设置嵌入内容的宽度。

<figcaption> 标签

定义 figure 元素的标题（caption）。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。用作文档中插图的图像，带有一个标题：

<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<img src="/i/shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

<figure> 标签

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

提示：请使用 <figcaption> 元素为 figure 添加标题（caption）。

<footer> 标签

文档中的页脚部分

页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

您可以在一个文档中使用多个 <footer> 元素。

提示：<footer> 元素内的联系信息应该位于 <address> 标签中。

<footer>
<p>Posted by: W3School</p>
<p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>

<header> 标签

定义文档的页眉（介绍信息）。

<header>

<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>

</header>

<keygen> 标签

带有 keygen 字段的表单.

规定用于表单的密钥对生成器字段。

当提交表单时，私钥存储在本地，公钥发送到服务器。

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

<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: [code]<keygen name="security" />

<input type="submit" />
</form>[/code]

<mark> 标签

定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。

<p>Do not forget to buy [code]<mark>milk</mark>

today.</p>[/code]

<meter> 标签

使用 meter 元素来度量给定范围（gauge）内的数据.

定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。

例子：磁盘用量、查询结果的相关性，等等。

注释：<meter> 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress> 标签。

属性	值	描述
form	form_id	规定 <meter> 元素所属的一个或多个表单。
high	number	规定被视作高的值的范围。超出范围的会有黄色显示
low	number	规定被视作低的值的范围。低于最低范围的会有黄色显示
max	number	规定范围的最大值。
min	number	规定范围的最小值。
optimum	number	规定度量的优化值。
value	number	必需。规定度量的当前值。

<meter value="3" min="0" max="10">十分之三</meter>

<meter value="0.6">60%</meter>

<nav> 标签

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

<nav>

<a href="index.asp">Home</a>
<a href="html5_meter.asp">Previous</a>
<a href="html5_noscript.asp">Next</a>

</nav>

<output> 标签

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

属性	值	描述
for	element_id	定义输出域相关的一个或多个元素。
form	form_id	定义输入字段所属的一个或多个表单。
name	name	定义对象的唯一名称。（表单提交时使用）

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=[code]<output name="x" for="a b"></output>

</form> [/code]

<progress> 标签

正在进行的下载：提示：请结合 <progress> 标签与 JavaScript 一同使用，来显示任务的进度。注释：<progress> 标签不适合用来表示度量衡（例如，磁盘空间使用情况或查询结果）。如需表示度量衡，请使用 <meter> 标签代替

属性	值	描述
max	number	规定任务一共需要多少工作。
value	number	规定已经完成多少任务。

<progress value="22" max="100"></progress>

<ruby> 标签

定义 ruby 注释（中文注音或字符）。

<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

<rp> 标签

在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。

ruby 注释是中文注音或字符。

在东亚使用，显示的是东亚字符的发音。

与 <ruby> 以及 <rt> 标签一同使用：

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

提示：支持 "ruby" 元素的浏览器不会显示 "rp" 元素的内容。

<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

<rt> 标签

定义字符（中文注音或字符）的解释或发音。

ruby 注释是中文注音或字符。

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

提示：支持 "ruby" 元素的浏览器不会显示 "rp" 元素的内容。

<section> 标签

cite

URL

section 的 URL，假如 section 摘自 web 的话。

<section>

<h1>PRC</h1>
<p>The People's Republic of China was born in 1949...</p>

</section>

<source> 标签

拥有两份源文件的音频播放器。浏览器应该选择它所支持的文件（如果有的话）

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

<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

属性	值	描述
media	media query	规定媒体资源的类型。
src	url	规定媒体文件的 URL。
type	numeric value	规定媒体资源的 MIME 类型。

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<summary> 标签

标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。提示：请与 <details> 标签一起使用。标题是可见的，当用户点击标题时会显示出详细信息。

details>
[code]<summary>HTML 5</summary>

This document teaches you everything you have to learn about HTML 5.
</details>[/code]

<time> 标签

定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。

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

属性	值	描述
datetime	datetime	规定日期 / 时间。否则，由元素的内容给定日期 / 时间。
pubdate	pubdate	指示 <time> 元素中的日期 / 时间是文档（或 <article> 元素）的发布日期。

<p>我们在每天早上 [code]<time>9:00</time>

开始营业。</p>

<p>我在

<time datetime="2008-02-14">情人节</time>

有个约会。</p>[/code]

<video> 标签

定义视频，比如电影片段或其他视频流。提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

<video src="movie.ogg" controls="controls">

您的浏览器不支持 video 标签。

</video>

<wbr> 标签

规定在文本中的何处适合添加换行符。

提示：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 <wbr> 元素来添加 Word Break Opportunity（单词换行时机）。

<p>
如果想学习 AJAX，那么您必须熟悉 XML[code]<wbr>

Http<wbr>Request 对象。
</p>[/code]

<track> 标签

为诸如 video 元素之类的媒介规定外部文本轨道。

用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。

播放带有字幕的视频：

<video width="320" height="240" controls="controls">
<source src="forrest_gump.mp4" type="video/mp4" />
<source src="forrest_gump.ogg" type="video/ogg" />
<track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
<track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
</video>