HTML5
1.HTML5?新元素
HTML5提供了新的元素來(lái)創(chuàng)建更好的頁(yè)面結(jié)構(gòu)：
標(biāo)簽描述
2.HTML5 Canvas
HTML5? <canvas>? 元素用于圖形的繪制锯玛，通過(guò)腳本?(通常是JavaScript)來(lái)完成.
?<canvas>? 標(biāo)簽只是圖形容器，您必須使用腳本來(lái)繪制圖形沿盅。
使用 JavaScript 來(lái)繪制圖像
canvas 元素本身是沒(méi)有繪圖能力的。所有的繪制工作必須在 JavaScript 內(nèi)部完成：
3.HTML5?拖放
?拖放是一種常見(jiàn)的特性脊另，即抓取對(duì)象以后拖到另一個(gè)位置宁赤。在 HTML5 中筹燕，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放蛹含。
設(shè)置元素為可拖放
4.HTML5?地理定位
?HTML5 Geolocation API 用于獲得用戶的地理位置毅厚。
鑒于該特性可能侵犯用戶的隱私，除非用戶同意浦箱，否則用戶位置信息是不可用的吸耿。
5.HTML5??Audio(音頻)、Video(視頻)
?HTML5 規(guī)定了在網(wǎng)頁(yè)上嵌入音頻元素的標(biāo)準(zhǔn)憎茂，即使用 <audio>元素。
HTML5 規(guī)定了一種通過(guò) video 元素來(lái)包含視頻的標(biāo)準(zhǔn)方法锤岸。
6.HTML5 Input?類型
?HTML5 擁有多個(gè)新的表單輸入類型竖幔。這些新特性提供了更好的輸入控制和驗(yàn)證。
color是偷、date拳氢、datetime、datetime-local蛋铆、email馋评、month、number刺啦、range留特、search、tel玛瘸、time蜕青、url、week
7.HTML5?表單元素
?HTML5 有以下新的表單元素:
<datalist>? 元素規(guī)定輸入域的選項(xiàng)列表糊渊。
<datalist> 屬性規(guī)定 form 或 input 域應(yīng)該擁有自動(dòng)完成功能右核。當(dāng)用戶在自動(dòng)完成域中開(kāi)始輸入時(shí)，瀏覽器應(yīng)該在該域中顯示填寫(xiě)的選項(xiàng)：
使用 元素的列表屬性與 元素綁定.
8.HTML5?表單屬性
?HTML5 的 <form>? 和? <input> 標(biāo)簽添加了幾個(gè)新屬性.
<form> 新屬性：
autocomplete渺绒、novalidate
<input> 新屬性：
autocomplete贺喝、autofocus、form宗兼、formaction躏鱼、formenctype、formmethod殷绍、formnovalidate挠他、formtarget、height and width篡帕、list殖侵、min and max贸呢、multiple、pattern (regexp)拢军、placeholder楞陷、required、step
?
9.HTML5?語(yǔ)義元素
?HTML5提供了新的語(yǔ)義元素來(lái)明確一個(gè)Web頁(yè)面的不同部分:
10.HTML5 Web?存儲(chǔ)
?Web Storage DOM API 為Web應(yīng)用提供了一個(gè)能夠替代cookie的Javascript解決方案
sessionStorage—客戶端數(shù)據(jù)存儲(chǔ)茉唉，只能維持在當(dāng)前會(huì)話范圍內(nèi)固蛾。
? ? ? ? ? ? ?sessionStorage 方法針對(duì)一個(gè) session 進(jìn)行數(shù)據(jù)存儲(chǔ)。當(dāng)用戶關(guān)閉瀏覽器窗口后度陆，數(shù)據(jù)會(huì)被刪除艾凯。
localStorage—客戶端數(shù)據(jù)存儲(chǔ)，能維持在多個(gè)會(huì)話范圍內(nèi)懂傀。
? ? ? ? ? ? ?localStorage 對(duì)象存儲(chǔ)的數(shù)據(jù)沒(méi)有時(shí)間限制罩息。第二天枣察、第二周或下一年之后笛粘，數(shù)據(jù)依然可用外臂。
對(duì)于大量復(fù)雜數(shù)據(jù)結(jié)構(gòu)，一般使用IndexDB
?
11.HTML5?離線Web應(yīng)用（應(yīng)用程序緩存）
?HTML5 引入了應(yīng)用程序緩存犀斋，這意味著 web 應(yīng)用可進(jìn)行緩存贝乎，并可在沒(méi)有因特網(wǎng)連接時(shí)進(jìn)行訪問(wèn)。
應(yīng)用程序緩存為應(yīng)用帶來(lái)三個(gè)優(yōu)勢(shì)：
離線瀏覽 - 用戶可在應(yīng)用離線時(shí)使用它們
速度 - 已緩存資源加載得更快
減少服務(wù)器負(fù)載 - 瀏覽器將只從服務(wù)器下載更新過(guò)或更改過(guò)的資源叽粹。
HTML5 Cache Manifest 實(shí)例
下面的例子展示了帶有 cache manifest 的 HTML 文檔（供離線瀏覽）：
Manifest 文件
manifest 文件是簡(jiǎn)單的文本文件览效，它告知瀏覽器被緩存的內(nèi)容（以及不緩存的內(nèi)容）。
manifest 文件可分為三個(gè)部分：
CACHE MANIFEST?- 在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存
NETWORK?- 在此標(biāo)題下列出的文件需要與服務(wù)器的連接虫几，且不會(huì)被緩存
FALLBACK?- 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁(yè)面無(wú)法訪問(wèn)時(shí)的回退頁(yè)面（比如 404 頁(yè)面
1-CACHE MANIFEST
2-# 2012-02-21 v1.0.0
3-/theme.css
4-/logo.gif
5-/main.js
6-NETWORK:
7-login.php
8-FALLBACK:
9-/html/ /offline.html
12.HTML5 Web Workers
?當(dāng)在 HTML 頁(yè)面中執(zhí)行腳本時(shí)朽肥，頁(yè)面的狀態(tài)是不可響應(yīng)的，直到腳本已完成持钉。
web worker 是運(yùn)行在后臺(tái)的 JavaScript衡招，獨(dú)立于其他腳本，不會(huì)影響頁(yè)面的性能每强。您可以繼續(xù)做任何愿意做的事情：點(diǎn)擊始腾、選取內(nèi)容等等，而此時(shí) web worker 在后臺(tái)運(yùn)行空执。（相當(dāng)于實(shí)現(xiàn)多線程并發(fā)）
?
13.HTML5 SSE
?Server-Sent 事件指的是網(wǎng)頁(yè)自動(dòng)獲取來(lái)自服務(wù)器的更新浪箭。
以前也可能做到這一點(diǎn)，前提是網(wǎng)頁(yè)不得不詢問(wèn)是否有可用的更新辨绊。通過(guò)服務(wù)器發(fā)送事件奶栖，更新能夠自動(dòng)到達(dá)。
例子：Facebook/Twitter 更新、估價(jià)更新宣鄙、新的博文袍镀、賽事結(jié)果等。
EventSource 對(duì)象用于接收服務(wù)器發(fā)送事件通知：
14.HTML5 WebSocket
?WebSocket是HTML5開(kāi)始提供的一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議冻晤。在WebSocket API中苇羡，瀏覽器和服務(wù)器只需要做一個(gè)握手的動(dòng)作，然后鼻弧，瀏覽器和服務(wù)器之間就形成了一條快速通道设江。兩者之間就直接可以數(shù)據(jù)互相傳送。瀏覽器通過(guò) JavaScript 向服務(wù)器發(fā)出建立 WebSocket 連接的請(qǐng)求攘轩，連接建立以后叉存，客戶端和服務(wù)器端就可以通過(guò) TCP 連接直接交換數(shù)據(jù)。當(dāng)你獲取 Web Socket 連接后度帮，你可以通過(guò)?send()?方法來(lái)向服務(wù)器發(fā)送數(shù)據(jù)歼捏，并通過(guò)?onmessage?事件來(lái)接收服務(wù)器返回的數(shù)據(jù)。以下 API 用于創(chuàng)建 WebSocket 對(duì)象够傍。
