前端面試的時候，總會被問到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新增標簽，先羅列到這兒了。。