首页 > 代码库 > 自学HTML5第二节（标签篇---新增标签详解）
自学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><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="http://www.mamicode.com/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><command> 标签
表示用户能够调用的命令。可以定义命令按钮，比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。
| 属性 | 值 | 描述 |
|---|---|---|
| checked | checked | 定义是否被选中。仅用于 radio 或 checkbox 类型。 |
| disabled | disabled | 定义 command 是否可用。 |
| icon | url | 定义作为 command 来显示的图像的 url。 |
| label | text | 为 command 定义可见的 label。 |
| radiogroup | groupname | 定义 command 所属的组名。仅在类型为 radio 时使用。 |
| type |
| 定义该 command 的类型。默认是 "command"。 |
<menu><command onclick="alert(‘Hello World‘)">Click Me!</command></menu><datalist> 标签
定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。请使用 input 元素的 list 属性来绑定 datalist。
<input id="myCar" list="cars" /><datalist id="cars"> <option value="http://www.mamicode.com/BMW"> <option value="http://www.mamicode.com/Ford"> <option value="http://www.mamicode.com/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="http://www.mamicode.com/helloworld.swf" />| 属性 | 值 | 描述 |
|---|---|---|
| height | pixels | 设置嵌入内容的高度。 |
| src | url | 嵌入内容的 URL。 |
| type | type | 定义嵌入内容的类型。 |
| width | pixels | 设置嵌入内容的宽度。 |
<figcaption> 标签
定义 figure 元素的标题（caption）。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。用作文档中插图的图像，带有一个标题：
<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<img src="http://www.mamicode.com/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: <keygen name="security" /><input type="submit" /></form><mark> 标签
定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。
<p>Do not forget to buy <mark>milk</mark> today.</p><meter> 标签
使用 meter 元素来度量给定范围（gauge）内的数据.
定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。
例子：磁盘用量、查询结果的相关性，等等。
注释：<meter> 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress> 标签。
| 属性 | 值 | 描述 |
|---|---|---|
| form | form_id | 规定 <meter> 元素所属的一个或多个表单。 |
| high | number | 规定被视作高的值的范围。超出范围的会有黄色显示 |
| low | number | 规定被视作低的值的范围。低于最低范围的会有黄色显示 |
| max | number | 规定范围的最大值。 |
| min | number | 规定范围的最小值。 |
| optimum | number | 规定度量的优化值。 |
| value | number | 必需。规定度量的当前值。 |
<meter value="http://www.mamicode.com/3" min="0" max="10">十分之三</meter><meter value="http://www.mamicode.com/0.6">60%</meter> <nav> 标签
定义导航链接的部分。提示：如果文档中有“前后”按钮，则应该把它放到 <nav> 元素中。
<nav><a href="http://www.mamicode.com/index.asp">Home</a><a href="http://www.mamicode.com/html5_meter.asp">Previous</a><a href="http://www.mamicode.com/html5_noscript.asp">Next</a></nav><output> 标签
定义不同类型的输出，比如脚本的输出。
| 属性 | 值 | 描述 |
|---|---|---|
| for | element_id | 定义输出域相关的一个或多个元素。 |
| form | form_id | 定义输入字段所属的一个或多个表单。 |
| name | name | 定义对象的唯一名称。（表单提交时使用） |
<form oninput="x.value=http://www.mamicode.com/parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="http://www.mamicode.com/50">100 +<input type="number" id="b" value="http://www.mamicode.com/50"> =<output name="x" for="a b"></output></form> <progress> 标签
正在进行的下载：提示：请结合 <progress> 标签与 JavaScript 一同使用，来显示任务的进度。注释：<progress> 标签不适合用来表示度量衡（例如，磁盘空间使用情况或查询结果）。如需表示度量衡，请使用 <meter> 标签代替
| 属性 | 值 | 描述 |
|---|---|---|
| max | number | 规定任务一共需要多少工作。 |
| value | number | 规定已经完成多少任务。 |
<progress value="http://www.mamicode.com/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="http://www.mamicode.com/horse.ogg" type="audio/ogg"> <source src="http://www.mamicode.com/horse.mp3" type="audio/mpeg"> Your browser does not support the audio element.</audio> <summary> 标签
标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。提示：请与 <details> 标签一起使用。标题是可见的，当用户点击标题时会显示出详细信息。
details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details><time> 标签
定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。
该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。
| 属性 | 值 | 描述 |
|---|---|---|
| datetime | datetime | 规定日期 / 时间。否则，由元素的内容给定日期 / 时间。 |
| pubdate | pubdate | 指示 <time> 元素中的日期 / 时间是文档（或 <article> 元素）的发布日期。 |
<p>我们在每天早上 <time>9:00</time> 开始营业。</p><p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p><video> 标签
定义视频，比如电影片段或其他视频流。提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。
<video src="http://www.mamicode.com/movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video><wbr> 标签
规定在文本中的何处适合添加换行符。
提示：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 <wbr> 元素来添加 Word Break Opportunity（单词换行时机）。
<p>如果想学习 AJAX，那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。</p><track> 标签
为诸如 video 元素之类的媒介规定外部文本轨道。
用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。
播放带有字幕的视频：
<video width="320" height="240" controls="controls"> <source src="http://www.mamicode.com/forrest_gump.mp4" type="video/mp4" /> <source src="http://www.mamicode.com/forrest_gump.ogg" type="video/ogg" /> <track kind="subtitles" src="http://www.mamicode.com/subs_chi.srt" srclang="zh" label="Chinese"> <track kind="subtitles" src="http://www.mamicode.com/subs_eng.srt" srclang="en" label="English"></video>自学HTML5第二节（标签篇---新增标签详解）