一、HTML5簡介
HTML5是HTML最新的修訂版本，2014年10月由萬維網(wǎng)聯(lián)盟（W3C）完成標準制定。
HTML5的設計目的是為了在移動設備上支持多媒體。
HTML5 是下一代 HTML 標準。
HTML , HTML 4.01的上一個版本誕生于 1999 年。自從那以后，Web 世界已經經歷了巨變。
HTML5 仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經具備了某些 HTML5 支持。
二、HTML5包含哪些內容
新的特殊內容元素，比如 article、footer、header、nav、section
新的表單控件，比如 calendar、date、time、email、url、search
用于繪畫的 canvas 元素
用于媒介回放的 video 和 audio 元素
對本地離線存儲的更好的支持
2D/3D 制圖
三、HTML標簽
1.article
作用：<article> 標簽定義獨立的內容。<article> 標簽定義的內容本身必須是有意義的且必須是獨立于文檔的其余部分。
格式：<abbr title=”全稱”>簡寫 </abbr><article></article>
案例：
<article style="color:red;">
<h4>"article "標簽規(guī)定獨立的自包含內容。一篇文章應有其自身 的意義，應該有可能獨立于站點的其余部分對其進行分發(fā)。html5 添加</h4>
<p>"artile"元素的潛在來源</p>
<ul>
<li>論壇帖子</li>
<li>報紙文章</li>
<li>博客條目</li>
<li style="color:green;">用戶評論</li>
</ul>
<p>"article"lei類似于“div”擁有“div”的所有屬性</p>
</article>
<!-- <article>與<div>相似而<article>的原因是為了更容易在代碼中清除標簽所表示的含義。
例：看到<header>便清除其內容在網(wǎng)頁中展示的是頂部內容 -->
2. aside
作用：<aside> 標簽定義 <article> 標簽外的內容。
aside 的內容應該與附近的內容相關。
格式：<abbr title=”全稱”>簡寫 </abbr>
案例：
<aside style="color:red;">
<p>aside的內容應該與附近的內容相關</p>
<h4 style="color:green;">asideaaaaaaaaa</h4>
<p>aside不不不不不不不不不不不不不</p>
<p>啦啦啦啦啦啦啦啦綠綠綠綠綠綠綠綠綠綠綠綠綠綠綠綠綠綠 綠綠綠綠綠綠綠綠綠綠綠不不不不不不不不不不不不不aside</p>
<span>突突突突突突拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖</span>
</aside>
3. audio
作用：<audio> 標簽定義聲音，比如音樂或其他音頻流。
格式：<audio title=”全稱”>簡寫 </audio>
屬性：
案例：
<audio controls >
音樂一
<source src="http://dx.sc.chinaz.com/Files/DownLoad/sound1/201608/7631.mp3" >
</audio>
<audio controls>
音樂二
<source src="http://dx.sc.chinaz.com/Files/DownLoad/sound1/201606/7463.mp3" >
</audio>
4.bdi
作用： <bdi> 元素 (雙向隔離元素) 會隔離可能以不同方向進行格式化的外部文本。
當不知道是從什么方向嵌入文本，如來自于數(shù)據(jù)庫的文本（有起數(shù)據(jù)庫的文本方向）的時候，該元素是十分有用的。
格式：<bdi></bdi>
案例：
<body>
<p>在下面的示例中,顯示著每個用戶比賽的分數(shù)。將用戶名從周圍的文本方向設置中隔離出來。</p>
<ul>
<li>用戶 <bdi>hrefs</bdi>: 60 分</li>
<li>用戶 <bdi>jdoe</bdi>: 80 分</li>
<li>用戶 <bdi>????</bdi>: 90 分</li>
</ul>
<p>
<b>注意：</b> 目前只有 Firefox 和 Chrome 瀏覽器支持 bdi 標簽。
</p>
</body>
5.Canvas
作用：<canvas> 標簽定義圖形，比如圖表和其他圖像，通過腳本 (通常是JavaScript)來完成。（canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成：）
格式： <canvas></canvas>
屬性：
案例：
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">您的瀏覽器不支持 HTML5 canvas 標簽。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
6.datailst
作用：<datalist> 標簽規(guī)定了 <input> 元素可能的選項列表。
<datalist> 標簽被用來在為 <input> 元素提供"自動完成"的特性。用戶能看到一個下拉列表，里邊的選項是預先定義好的，將作為用戶的輸入數(shù)據(jù)。
格式<datalist></datalist>
案例：
<body>
<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p>
<strong>注意:</strong> Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 標簽。
</p>
</body>
7.dialog
作用：<dialog>標簽定義一個對話框、確認框或窗口。在窗口的附近定義窗口的內容。
格式：<dialog open>簡寫 </dialog>
屬性：
案例：
<body>
<p>
<b>注意：</b>目前只有 Chrome 和 Safari 6 支持 dialog 標簽。
</p>
<table border="1">
<tr>
<th>January <dialog open>This is an open dialog window</dialog></th>
<th>February</th>
<th>March</th>
</tr>
<tr>
<td>31</td>
<td>28</td>
<td>31</td>
</tr>
</table>
</body>
8.abbr
作用：用于標記縮寫
格式：<abbr title=”全稱”>簡寫 </abbr>
屬性：title ：用于鼠標懸浮的提示信息
案例：
The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
