h5新标签以及用法

前端面试的时候，总会被问到h5的问题，最基本的就是h5有什么新标签，遇到这样的问题，我很不屑回答，一个是因为有点多，最重要的是因为我不知道到底有多少，今天花点时间在这里整理下吧。

1、<article>     定义文章，规定独立的自包含内容

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

2、<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>

3、<audio>  定义声音内容，比如音乐或其他音频流

<audio src="someaudio.wav">
　　您的浏览器不支持 audio 标签。
</audio>

4、<bdi>  定义文本的文本方向，使其脱离其周围文本的方向设置（没看懂这个具体是怎么用）

<ul>
<li>Username <bdi>Bill</bdi>:80 points</li>
<li>Username <bdi>Steve</bdi>: 78 points</li>
</ul>

5、<canvas>   定义图形   （这是h5的新特性，用的还蛮多的）

<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);

</script>

6、<command>   定义命令按钮  (只有ie9支持这个标签)

<menu>
<command onclick="alert('Hello World')">
Click Me!</command>
</menu>
没觉得与button有什么区别啊

7、<datalist>     定义下拉列表（配合input使用）

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

这个应该比较下与select有什么区别:

select：5个值里面选择1个；
datalist：你可以在文本框里填值，也可以在下面5个值里选1个。

8、<details>   定义元素的细节:页面只显示summary里的内容，点击之后才显示p里的内容

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

9、<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>

没太明白这个有什么作用

10、<embed>  定义外部交互内容或插件

<embed src="helloworld.swf" />

11、<figcaption>   定义figure元素的标题

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

12、<figure>  定义媒介

   用作文档中插图的图像：

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

13、<footer>   定义section或page的页脚

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

14、<header>  定义section或page的页眉

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

15、<keygen>  定义生成密钥

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

16、<mark>  定义有记号的文本

<p>Do not forget to buy <mark>milk</mark> today.</p>

17、<meter>  定义预定义范围内的度量

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

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

18、<nav>  定义导航链接

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

19、<output>   定义输出的一些类型

<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">
   =<output name="x" for="a b"></output>
</form> 

20、<progress>  定义任何类型的任务的进度 ：这个进度条和那个meter感觉没什么区别呢

 正在进行的下载：

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

21、<rp>  定义若浏览器不支持ruby元素显示的内容

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

22、<rt>   定义ruby注释的解释

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

23、<ruby>  定义ruby注释

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

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

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

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

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

24、<section>   定义section

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

25、<source>   定义媒介源

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

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

26、<summary>  为<details>元素定义可见的标题

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

27、<time>  定义日期/时间

　　如何定义时间和日期：

　　<p>我们在每天早上 <time>9:00</time> 开始营业。</p>

　　<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>

28、<track>  定义用在媒体播放器中的文本轨道

　　播放带有字幕的视频：

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

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

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

29、<video>  定义视频，比如电影片段或其他视频流。

　　一段简单的 HTML5 视频：

　　<video src="movie.ogg" controls="controls">
　　您的浏览器不支持 video 标签。
　　</video>

30、<wbr>   定义视频

<p>
如果想学习 AJAX，那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。
</p>

用法：

Word Break Opportunity (<wbr>) 规定在文本中的何处适合添加换行符。

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

这是w3school里的所有h5新增标签，先罗列到这儿了。。