HTML5培訓教程：HTML5基礎介紹

　　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的瀏覽器包括Firefox(火狐瀏覽器)，IE9及其更高版本，Chrome(谷歌瀏覽器)，Safari，Opera等;國內的 遨遊瀏覽器(Maxthon)，以及基於IE或Chromium(Chrome的工程版或稱實驗版)所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器等國產瀏覽器同樣具備支援HTML5的能力。

語法：
內容型別（ContentType）
HTML5的檔案擴充套件符與內容型別保持不變，仍然為".html"或".htm"

DOCTYPE宣告
不區分大小寫

指定字符集編碼
<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
屬性值可以使用雙引號，也可以使用單引號。

語義化標籤：
在HTML 5出來之前，我們用div來表示頁面章節，但是這些div都沒有實際意義。（即使我們用css樣式的id和class形容這塊內容的意義）。這些標籤只是我們提供給瀏覽器的指令，只是定義一個網頁的某些部分。但現在，那些之前沒“意義”的標籤因為因為html5的出現消失了，這就是我們平時說的“語義”。
section元素 表示頁面中的一個區塊
article元素 表示一塊與上下文無關的獨立的內容
aside元素 在article之外的，與article內容相關的輔助資訊
header元素 表示頁面中一個內容區塊或整個頁面的標題
footer元素 表示頁面中一個內容區塊或整個頁面的腳註
nav元素 表示頁面中導航連結部分
figure元素 表示一段獨立的內容，使用figcaption元素為其新增標題(第一個或最後一個子元素的位置)
main元素 表示頁面中的主要的內容(ie不相容)
hgroup標題的一個分組
mark定義高亮顯示的文字(span)
time時間
dialog標記定義一個對話方塊(會話框)類似微信
embed 標記定義外部的可互動的內容或外掛 比如flash

多媒體標籤：
<video src=""></video>
<audio src=""></audio>
屬性
controls屬性：如果出現該屬性，則向使用者顯示控制元件，比如播放按鈕。
autoplay屬性：如果出現該屬性，則影片在就緒後馬上播放。
loop屬性：重複播放屬性。
muted屬性：靜音屬性。
poster屬性：規定影片正在下載時顯示的影像，直到使用者點選播放按鈕。

source
<source> 標籤為媒介元素（比如 <video> 和 <audio>）定義媒介資源。
<source> 標籤允許您規定可替換的影片/音訊檔案供瀏覽器根據它對媒體型別或者編解碼器的支援進行選擇。
Type屬性值：
用於影片：video/ogg video/mp4 video/webm
用於音訊：audio/ogg audio/mpeg

HTML5表單：
新增type型別
Type=“email” 限制使用者必須輸入email型別
Type=“url” 限制使用者必須輸入url型別
Type=“range” 產生一個滑動條表單
Type=“number” 限制使用者必須輸入number型別
Type=“search” 產生一個搜尋意義的表單
Type=“color” 生成一個顏色選擇的表單
Type=“time” 限制使用者必須輸入時間型別
Type=“month” 限制使用者必須輸入月型別
Type=“week” 限制使用者必須輸入周型別
Type=“datetime-local” 選取本地時間
Type=”date”
新增表單屬性
required 監測是否為空。
min 最小
max 最大
step 步幅 確定一個法定值。 -3 0 3 6 9
list 必須結合datalist標籤，繫結datalist id名稱。
autocomplete 是否自動提示資訊 屬性值 on off
placeholder 文字框的提示資訊
autofocus 自動聚焦。一個頁面只能由一個。
pattern 後面的屬性值是一個正規表示式。
novalidate 取消驗證
multiple 選擇（上傳）多個
新增表單標籤
output
<form action="" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<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 必須和list屬性結合使用。做提示資訊。
<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value=" />
<option label="Google" value=" />
<option label="Microsoft" value=" />
</datalist>