HTML5 發展史
HTML5草案的前身名為 Web Applications 1.0，於2004年被WHATWG（網頁超文本應用技術工作小組）提出，於2007年被W3C接納，並成立了新的 HTML 工作團隊。HTML 5 的第一份正式草案已於2008年1月22日公布。HTML5 仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些 HTML5 支持。
2012年12月17日，萬維網聯盟（W3C）正式宣布凝結了大量網絡工作者心血的HTML5規范已經正式定稿。根據W3C的發言稿稱：“開放的HTML5是Web網絡平台的奠基石。” 2013年5月6日， HTML 5.1正式草案公布。該規范定義了第五次重大版本，第一次要修訂萬維網的核心語言：超文本標記語言（HTML）。在這個版本中，新功能不斷推出，以幫助Web應用程序的作者，努力提高新元素交互操作性。
本次草案的發布，從2012年12月27日至今，進行了多達近百項的修改，包括HTML和XHTML的標簽，相關的API、Canvas等，同時HTML5的圖像img標簽及svg也進行了改進，性能得到進一步提升。
HTML5 的瀏覽器兼容
支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等；國內的 遨游瀏覽器（Maxthon），以及基於IE或Chromium（Chrome的工程版或稱實驗版）所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹 瀏覽器等國產瀏覽器同樣具備支持HTML5的能力。
HTML5 語法
內容類型（ContentType）
HTML5的文件擴展符與內容類型保持不變，仍然為".html"或".htm"。
DOCTYPE聲明
<!DOCTYPE html>
不區分大小寫
指定字符集編碼
<meta charset="UTF-8">
可省略標記的元素
不允許寫結束標記的元素：br、col、embed、hr、img、input、、link、meta
可以省略結束標記的元素：li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
可以省略全部標記的元素：html、head、body、colgroup、tbody
省略引號
屬性值可以使用雙引號，也可以使用單引號
HTML5 新增語義化標簽
section元素 表示頁面中的一個內容區塊 DIV
header元素 表示頁面中一個內容區塊或整個頁面的標題
footer元素 表示頁面中一個內容區塊或整個頁面的腳注
nav元素 表示頁面中導航鏈接部分
article元素 表示一塊與上下文無關的獨立的內容
aside元素 在article之外的，與article內容相關的輔助信息
figure元素 表示一段獨立的流內容，使用figcaption元素為其添加標題(第一個或最后一個子元素的位置)
main元素 表示頁面中的主要的內容 (ie不兼容)
<dialog> 標簽定義對話框或窗口。
屬性open 規定 dialog 元素是活動的，用戶可與之交互。 <dialog open>這是打開的對話窗口</dialog>
<canvas>畫布
HTML5 <canvas> 元素用於圖形的繪制，通過腳本 (通常是JavaScript)來完成.
<canvas> 標簽只是圖形容器，您必須使用腳本來繪制圖形。
你可以通過多種方法使用 canvas 繪制路徑,盒、圓、字符以及添加圖像。
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
兼容低版本瀏覽器： <script src=“html5.js”></script>
<!--[if lt IE9]> <script> (function() { if (! /*@cc_on!@*/ 0) return; var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', '); var i= e.length; while (i--){ document.createElement(e[i]) } })() </script> <![endif]-->
HTML5 智能表單
Type=“email” 限制用戶必須輸入email類型
Type=“url” 限制用戶必須輸入url類型
Type=“range” 產生一個滑動條表單
Type=“search” 產生一個搜索意義的表單
Type=“color” 生成一個顏色選擇的表單
Type=“time” 限制用戶必須輸入時間類型
Type=“date” 限制用戶必須輸入時間類型
Type=“month” 限制用戶必須輸入月類型
Type=“week” 限制用戶必須輸入周類型
Type=“datetime-local” 選取本地時間
input類型設置
email：專門用來輸入email地址的文本框,如果該文本框中內容不是email地址格式的，則不允許提交。但它不檢查email地址是否存在。提交時可以為空，除非加上了required屬性。
required屬性。
具有multiple屬性，它允許在該文本框中輸入一串以逗號分隔的email地址。
url類型
專門用來輸入URL地址的文本框。如果該文本框中內容不是URL地址格式的，則不允許提交。mail地址。 例：<input name=‘url1’ type=‘url’ value=‘’http://www.baidu.com”>
Number類型
專門用來輸入數字的文本框。在提交時會檢查其中的內容是否為數字，具有min、max、step的屬性。 例：<input name=“number1” type=“number” value=“25” min=“10” max=“100” step=“5” />
ange類型
是用來只允許輸入一段范圍內數值的文本框，它具有min屬性與max屬性，及step屬性，可以指定每次拖動的步幅。 例： <input name=“range1” type=“range” value=“25” min=“0” max=“100” step=“5” />
min 最小值
max 最大值
step 數字間隔
output：
定義不同類型的輸出，如計算結果的輸出，或腳本的輸出。
注：必須從屬於某個表單。即，必須將它書寫在表單內部
Output標簽IE不支持
對新元素樣式的使用：
注意，跟 input 標簽設置樣式一樣，但是要設置標簽中局部的樣式不能實現。如改變日歷的背景色，顏色框的按鈕效果，等，這些都不可以實現。
<form action="" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0<input id="a" type="range" min="0" max="100">100+
<input id="b" type="text" value="50">
= <output name="x" for="a b"></output>
</form>
Datalist ：選項列表
例： <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
提示：option 元素永遠都要設置 value 屬性。 list屬性：結合datalist元素使用
1、新增屬性 placeholder屬性：文本框處於未輸入狀態時文本框中顯示的輸入提示。
2、autofocus屬性：給文本框、選擇框、或者按鈕控件加上該屬性，當打開頁面時，該控件自動獲得焦點，一個頁面只能有一個。
3、required屬性：驗證輸入不能為空
4、autocomplete屬性：輸入富足和所用的自動完成功能，是一個節省輸入時間，同時也十分方便的功能。屬性值：on/off。on可是顯示指定候補輸入的數據列表，使用datalist元素與list屬性提供候補輸入的數據列表，自動完成時，可以將該datalist元素中的數據作為候補輸入的數據在文本框中顯示：
<input type="text" autocomplete="on" list ="greeting">
5、novalidate取消驗證 可以對form表單添加novalidate屬性，即使form表單中的input添加了required，也將不進行驗證partten
6、Multiple:可以輸入一個或多個值，每個值之間用逗號分開 例：<input type=“email” multiple/> 還可以應用於file
7、pattern屬性
pattern用於驗證表單輸入的內容，通常HTML5的type屬性，比如email、tel、number、data類、url等，已經自帶了簡單的數據格式驗證功能了，加上pattern后，前端部分的驗證更加簡單高效了。
顯而易見，pattern的屬性值要用正則表達式。
實例
簡單的數字驗證
數字的驗證有兩個： <input type="number" pattern="\d">
<input type="number" pattern="[0-9]*">
</input type="number" pattern="[0-9]*">
</input type="number" pattern="\d">
[abc] a、b 或 c（簡單類）
[^abc] 任何字符，除了 a、b 或 c（否定）
[a-zA-Z] a到 z 或 A 到 Z，兩頭的字母包括在內（范圍）
[a-d[m-p]] a到 d 或 m 到 p：[a-dm-p]（並集）
[a-z&&[def]] d、e 或 f（交集）
[a-z&&[^bc]] a 到 z，除了 b 和 c：[ad-z]（減去）
[a-z&&[^m-p]] a 到 z，而非 m 到 p：[a-lq-z]（減去）
信用卡 [0-9]{13,16}
銀聯卡 ^62[0-5]\d{13,16}$
Visa: ^4[0-9]{12}(?:[0-9]{3})?$
萬事達：^5[1-5][0-9]{14}$
QQ號碼： [1-9][0-9]{4,14}
手機號碼：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
身份證：^([0-9]){7,18}(x|X)?$
密碼：^[a-zA-Z]\w{5,17}$ 字母開頭，長度在6~18之間，只能包含字母、數字和下划線
強密碼：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$ 包含大小寫字母和數字的組合，不能使用特殊字符，長度在8-10之間 7
個漢字或14個字符：^[\u4e00-\u9fa5]{1,7}$|^[\dA-Za-z_]{1,14}$
Video和audio的應用
video元素 定義視頻
<video src="movie.ogg" controls="controls">Video元素</video>
audio元素 定義音頻
<audio src="someaduio.wav">Audio元素</audio>
controls屬性：如果出現該屬性，則向用戶顯示控件，比如播放按鈕。
autoplay屬性：如果出現該屬性，則視頻在就緒后馬上播放。
loop屬性：重復播放屬性。 muted屬性：靜音屬性。
poster屬性：規定視頻正在下載時顯示的圖像，直到用戶點擊播放按鈕。
<source> 標簽為媒介元素（比如 <video> 和 <audio>）定義媒介資源。
<source> 標簽允許您規定可替換的視頻/音頻文件供瀏覽器根據它對媒體類型或者編解碼器的支持進行選擇。
<video controls>
<source src="../mv/movie.ogg" type="video/ogg">
<source src="../mv/web.mp4" type="video/mp4">
</video>
Type屬性值： 用於視頻：video/ogg video/mp4 video/webm
用於音頻：audio/ogg audio/mpeg audio/mp3
HTML <iframe> 標簽-不是HTML5新增
