1.HTML5 新元素
HTML5提供了新的元素來創(chuàng)建更好的頁面結(jié)構(gòu)：
我這邊篩選了部分常用的元素
| 元素 | 作用 |
|---|---|
| <article> | 定義頁面獨(dú)立的內(nèi)容區(qū)域。 |
| <aside> | 定義頁面的側(cè)邊欄內(nèi)容。 |
| <footer> | 定義 section 或 document 的頁腳。 |
| <header> | 定義了文檔的頭部區(qū)域 |
| <nav> | 定義導(dǎo)航鏈接的部分。 |
| <progress> | 定義任何類型的任務(wù)的進(jìn)度。 |
| <wbr> | 規(guī)定在文本中的何處適合添加換行符。 |
| <section> | 定義文檔中的節(jié)（section、區(qū)段）。 |
| <progress> | 定義任何類型的任務(wù)的進(jìn)度。 |
| <ruby> <rt> <rp> | 定義 ruby 注釋（中文注音或字符）。 |
2.HTML5 Canvas
HTML5 <canvas> 元素用于圖形的繪制，通過腳本 (通常是JavaScript)來完成，
<canvas> 標(biāo)簽只是圖形容器，必須使用腳本來繪制圖形。
3.元素拖放
拖放是一種常見的特性，即抓取對象以后拖到另一個(gè)位置。
在 HTML5 中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放。
①設(shè)置元素為可拖放
首先，為了使元素可拖動(dòng)，把 draggable 屬性設(shè)置為 true ：
<img draggable="true" />
②其他相關(guān)事件：
拖動(dòng)什么 - ondragstart 和 setData()
放到何處 - ondragover
進(jìn)行放置 - ondrop
4.HTML5 地理定位
HTML5 Geolocation API 用于獲得用戶的地理位置。
鑒于該特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的。
5.HTML5 Audio(音頻)、Video(視頻)
HTML5 規(guī)定了在網(wǎng)頁上嵌入音頻元素的標(biāo)準(zhǔn)，即使用 <audio> 元素。
<audio controls>
<source src="horse.ogg"type="audio/ogg">
<source src="horse.mp3"type="audio/mpeg">
您的瀏覽器不支持 audio 元素。
</audio>
HTML5 規(guī)定了一種通過 video 元素來包含視頻的標(biāo)準(zhǔn)方法。
<video width="320"height="240"controls>
<source src="movie.mp4"type="video/mp4">
<source src="movie.ogg"type="video/ogg">
您的瀏覽器不支持Video標(biāo)簽。
</video>
6.HTML5 Input 類型
HTML5 擁有多個(gè)新的表單輸入類型。這些新特性提供了更好的輸入控制和驗(yàn)證。
color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week
<input type="range"name="points"min="1"max="10">
Search Google: <input type="search"name="googlesearch">
電話號碼: <input type="tel"name="usrtel">
7.HTML5 Web 存儲(chǔ)
Web Storage DOM API 為Web應(yīng)用提供了一個(gè)能夠替代cookie的Javascript解決方案
sessionStorage—客戶端數(shù)據(jù)存儲(chǔ)，只能維持在當(dāng)前會(huì)話范圍內(nèi)。
sessionStorage 方法針對一個(gè) session 進(jìn)行數(shù)據(jù)存儲(chǔ)。當(dāng)用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)會(huì)被刪除。
localStorage—客戶端數(shù)據(jù)存儲(chǔ)，能維持在多個(gè)會(huì)話范圍內(nèi)。
localStorage 對象存儲(chǔ)的數(shù)據(jù)沒有時(shí)間限制。第二天、第二周或下一年之后，數(shù)據(jù)依然可用。
對于大量復(fù)雜數(shù)據(jù)結(jié)構(gòu)，一般使用IndexDB
8.HTML5 離線Web應(yīng)用（應(yīng)用程序緩存）
HTML5 引入了應(yīng)用程序緩存，這意味著 web 應(yīng)用可進(jìn)行緩存，并可在沒有因特網(wǎng)連接時(shí)進(jìn)行訪問。
應(yīng)用程序緩存為應(yīng)用帶來三個(gè)優(yōu)勢：
離線瀏覽 - 用戶可在應(yīng)用離線時(shí)使用它們
速度 - 已緩存資源加載得更快
減少服務(wù)器負(fù)載 - 瀏覽器將只從服務(wù)器下載更新過或更改過的資源。
9.HTML5 Web Workers
當(dāng)在 HTML 頁面中執(zhí)行腳本時(shí)，頁面的狀態(tài)是不可響應(yīng)的，直到腳本已完成。
web worker 是運(yùn)行在后臺的 JavaScript，獨(dú)立于其他腳本，不會(huì)影響頁面的性能。您可以繼續(xù)做任何愿意做的事情：點(diǎn)擊、選取內(nèi)容等等，而此時(shí) web worker 在后臺運(yùn)行。（相當(dāng)于實(shí)現(xiàn)多線程并發(fā)）
10.HTML5 WebSocket
WebSocket是HTML5開始提供的一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議。在WebSocket API中，瀏覽器和服務(wù)器只需要做一個(gè)握手的動(dòng)作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。瀏覽器通過 JavaScript 向服務(wù)器發(fā)出建立 WebSocket 連接的請求，連接建立以后，客戶端和服務(wù)器端就可以通過 TCP 連接直接交換數(shù)據(jù)。當(dāng)你獲取 Web Socket 連接后，你可以通過 send() 方法來向服務(wù)器發(fā)送數(shù)據(jù)，并通過 onmessage 事件來接收服務(wù)器返回的數(shù)據(jù)。以下 API 用于創(chuàng)建 WebSocket 對象。
其他
包括一些css3的內(nèi)容，動(dòng)畫，暫不討論。
