新增的元素
html5新增了一些語義化更好的標(biāo)簽元素酵紫。
結(jié)構(gòu)元素
article元素错维，表示頁面中的一塊與上下文不相關(guān)的獨(dú)立內(nèi)容，比如博客中的一篇文章需五。
aside元素，表示article內(nèi)容之外的內(nèi)容宏邮，輔助信息。
header元素械筛，表示頁面中一個(gè)內(nèi)容區(qū)塊或整個(gè)頁面的頁眉飒炎。
hgroup元素，用于對(duì)頁面中一個(gè)區(qū)塊或整個(gè)頁面的標(biāo)題進(jìn)行組合郎汪。
footer元素，表示頁面中一個(gè)內(nèi)容區(qū)塊或整個(gè)頁面的頁腳煞赢。
figure元素，表示媒介內(nèi)容的分組照筑，以及它們的標(biāo)題瘦陈。
section元素波俄，表示頁面中一個(gè)內(nèi)容區(qū)塊，比如章節(jié)捉貌。
nav元素冬念，表示頁面中的導(dǎo)航鏈接昏翰。
其他元素
video元素刘急，用來定義視頻浸踩。
audio元素，用來定義音頻据块。
Canvas元素折剃，用來展示圖形另假，該元素本身沒有行為怕犁，僅提供一塊畫布。
embed元素戈轿，用來插入各種多媒體阵子，格式可以是Midi思杯、Wav挠进、AIFF、AU暖璧、MP3等攘须。
mark元素漆撞，用來展示高亮的文字。
progress元素悍汛，用來展示任何類型的任務(wù)的進(jìn)度至会。
meter元素，表示度量衡奉件，定義預(yù)定義范圍內(nèi)的度量。
time元素术陶，用來展示日期或者時(shí)間。
command元素煤痕，表示命令按鈕梧宫。
details元素，用來展示用戶要求得到并且可以得到的細(xì)節(jié)信息摆碉。
summary元素塘匣，用來為details元素定義可見的標(biāo)題。
datalist元素巷帝，用來展示可選的數(shù)據(jù)列表忌卤，與input元素配合使用楞泼，可以制作出輸入值的下拉列表驰徊。
datagrid元素，也用來展示可選的數(shù)據(jù)列表现拒，以樹形列表的形式來顯示辣垒。
keygen元素，表示生成密匙印蔬。
output元素勋桶，表示不同類型的輸出。
source元素侥猬，為媒介元素定義媒介資源例驹。
menu元素，表示菜單列表退唠。
ruby元素鹃锈，表示ruby注釋， rt元素表示字符的解釋或發(fā)音瞧预。 rp元素在ruby注釋中使用屎债，以定義不支持ruby元素的瀏覽器所顯示的內(nèi)容仅政。
wbr元素，表示軟換行盆驹。與br元素的區(qū)別是：br元素表示此處必須換行圆丹，而wbr元素的意思是瀏覽器窗口或父級(jí)元素的寬度夠?qū)挄r(shí)。不進(jìn)行換行躯喇，而當(dāng)寬度不夠時(shí)辫封，主動(dòng)在此處進(jìn)行換行。
bdi元素廉丽，定義文本的文本方向倦微，使其脫離其周圍文本的方向設(shè)置。
dialog元素正压，表示對(duì)話框或窗口欣福。
廢除的元素
html5中廢除了一些純表現(xiàn)的元素，只有部分瀏覽器支持的元素還有一些會(huì)對(duì)可用性產(chǎn)生負(fù)面影響的元素焦履。·
純表現(xiàn)元素
純表現(xiàn)的元素就是那些可以用css替代的元素劣欢。basefont、big裁良、center、font校套、s价脾、strike、tt笛匙、u這些元素侨把，他們的功能都是純粹為頁面展示服務(wù)的，html5提倡把頁面展示性功能放在css樣式表中統(tǒng)一處理妹孙，所以將這些元素廢除秋柄，用css樣式進(jìn)行替代。·
對(duì)可用性產(chǎn)生負(fù)面影響的元素
對(duì)于frameset元素蠢正、frame元素與noframes元素骇笔，由于frame框架對(duì)網(wǎng)頁可用性存在負(fù)面影響，在html5中已不支持frame框架嚣崭，只支持iframe框架笨触，html5中同時(shí)將frameset、frame和noframes這三個(gè)元素廢除雹舀。·
對(duì)于applet芦劣、bgsound、blink说榆、marquee等元素虚吟，由于只有部分瀏覽器支持寸认，特別是bgsound元素以及marquee元素，只被IE支持串慰，所以在html5中被廢除偏塞。其中applet元素可由embed元素或object元素替代，bgsound元素可由audio元素替代模庐，marquee可以由javascript編程的方式替代烛愧。
新增的API
Canvas API
上文提到的canvas元素可以為頁面提供一塊畫布來展示圖形。結(jié)合Canvas API掂碱，就可以在這塊畫布上動(dòng)態(tài)生成和展示各種圖形怜姿、圖表、圖像以及動(dòng)畫了疼燥。Canvas本質(zhì)上是位圖畫布沧卢，不可縮放，繪制出來的對(duì)象不屬于頁面DOM結(jié)構(gòu)或者任何命名空間醉者。不需要將每個(gè)圖元當(dāng)做對(duì)象存儲(chǔ)但狭，執(zhí)行性能非常好。·
利用Canvas API進(jìn)行繪圖撬即，首先要獲取canvas元素的上下文立磁，然后用該上下文中封裝的各種繪圖功能進(jìn)行繪圖。
var canvas = document.getElementById('canvas');
var context =canvas.getContext("2d"); // 獲取上下文
//設(shè)置純色
context.fillStyle = "red";
context.strokeStyle = "blue";
// 實(shí)踐表明在不設(shè)置fillStyle下的默認(rèn)fillStyle為black
context.fillRect(0, 0, 100, 100);
// 實(shí)踐表明在不設(shè)置strokeStyle下的默認(rèn)strokeStyle為black
context.strokeRect(120, 0, 100, 100);
SVG
SVG是html5的另一項(xiàng)圖形功能剥槐，它是一種標(biāo)準(zhǔn)的矢量圖形唱歧，是一種文件格式，有自己的API粒竖。html5引入了內(nèi)聯(lián)SVG颅崩，使得SVG元素可以直接出現(xiàn)在html標(biāo)記中。·
<svg height=100 width=100><circle cx=50 cy=50 r=50 /></svg>
音頻和視頻
audio和video元素的出現(xiàn)讓html5的媒體應(yīng)用多了新選擇蕊苗，開發(fā)人員不必使用插件就能播放音頻和視頻沿后。對(duì)于這兩個(gè)元素，html5規(guī)范提供了通用朽砰、完整尖滚、可腳本化控制的API。
html5規(guī)范出來之前瞧柔，在頁面中播放視頻的典型方式是使用Flash熔掺、QuickTime或者Windows Media插件往html中嵌入音頻視頻，相對(duì)這種方式非剃，使用html5的媒體標(biāo)簽有兩大好處置逻。·
作為瀏覽器原生支持的功能，新的audio和video元素?zé)o需安裝备绽。
媒體元素想web頁面提供了通用券坞、集成和可腳本化控制的API鬓催。
瀏覽器支持性檢測(cè)
瀏覽器檢測(cè)是否支持audio元素或者video元素最簡單的方式是用腳本動(dòng)態(tài)創(chuàng)建它，然后檢測(cè)特定函數(shù)是否存在恨锚。·
varhasVideo = !!(document.createElement('video').canPlayType);
Geolocation API
html5的Geolocation API（地理定位API）宇驾，可以請(qǐng)求用戶共享他們的位置。使用方法非常簡單猴伶，如果用戶同意课舍，瀏覽器就會(huì)返回位置信息，該位置信息是通過支持html5地理定位功能的底層設(shè)備（如筆記本電腦或手機(jī)）提供給瀏覽器的他挎。位置信息由緯度筝尾、經(jīng)度坐標(biāo)和一些其他元數(shù)據(jù)組成。·
位置信息從何而來
Geolocation API不指定設(shè)備使用哪種底層技術(shù)來定位應(yīng)用程序的用戶办桨。相反筹淫，它只是用于檢索位置信息的API，而且通過該API檢索到的數(shù)據(jù)只具有某種程度的準(zhǔn)確性呢撞，并不能保證設(shè)備返回的位置是精確的损姜。設(shè)備可以使用下列數(shù)據(jù)源：·
IP地址
三維坐標(biāo)
GPS
從RFID、WiFi和藍(lán)牙到WiFi的MAC地址
GSM或CDMA手機(jī)的ID
用戶自定義數(shù)據(jù)
使用方法
// 一次更新navigator.geolocation.getCurrentPosition(updateLocation, handleLocationEror);
functionupdateLocation(position)
{varlatitude = position.coords.latitude;// 緯度
varlongitude = position.coords.longitude;// 經(jīng)度
varaccuracy = position.coords.accuracy;// 準(zhǔn)確度
vartimestamp = position.coords.timestamp;// 時(shí)間戳}// 錯(cuò)誤處理函數(shù)functionhandleLocationEror(error){? ? ....}// 重復(fù)更新navigator.geolocation.watchPosition(updateLocation, handleLocationEror);// 不再接受位置更新navigator.geolocation.clearWatch(watchId);
跨文檔消息傳遞
出于安全方面的考慮殊霞，運(yùn)行在同一瀏覽器中的框架摧阅、標(biāo)簽頁、窗口間的通信一直都受到了嚴(yán)格的限制绷蹲。然而逸尖，現(xiàn)實(shí)中存在一些合理的讓不同站點(diǎn)的內(nèi)容能在瀏覽器內(nèi)進(jìn)行交互的需求。這種情形下瘸右，如果瀏覽器內(nèi)部能提供直接的通信機(jī)制，就能更好地組織這些應(yīng)用岩齿。
html5中引入了一種新功能太颤，跨文檔消息通信，可以確保iframe盹沈、標(biāo)簽頁龄章、窗口間安全地進(jìn)行跨源通信。postMessage API為發(fā)送消息的標(biāo)準(zhǔn)方式乞封，發(fā)送消息非常簡單：·
window.postMessage('Hello, world','http://www.example.com/');
接收消息時(shí)做裙，僅需在頁面中增加一個(gè)事件處理函數(shù)。當(dāng)某個(gè)消息到達(dá)時(shí)肃晚，通過檢查消息的來源來決定是否對(duì)這條消息進(jìn)行處理锚贱。
window.addEventListener("message", messageHandler,true);
functionmessageHandler(e)
{switch(e.origin)?
{case"friend.example.com":// 處理消息
processMessage(e.data);break;default:// 消息來源無法識(shí)別// 消息被忽略}
}
消息事件是一個(gè)擁有data(數(shù)據(jù))和origin(源)屬性的DOM事件。data屬性是發(fā)送方傳遞的實(shí)際消息关串，而origin屬性是發(fā)送來源拧廊。
XMLHttpRequest Level2
XMLHttpRequest API使得ajax技術(shù)成為可能监徘，作為XMLHttpRequest的改進(jìn)版，XMLHttpRequest Level2在功能上有了很大的改進(jìn)吧碾。主要兩個(gè)方面：·
跨源XMLHttpRequest
進(jìn)度事件
過去凰盔，XMLHttpRequest僅限于同源通信，XMLHttpRequest Level2通過CORS實(shí)現(xiàn)了跨源XMLHttpRequest倦春』Ь矗跨源HTTP請(qǐng)求包含一個(gè)Origin頭部，它為服務(wù)器提供HTTP請(qǐng)求的源信息睁本。
WebSockets是html5中最強(qiáng)大的通信功能尿庐，它定義了一個(gè)全雙工通信信道，僅通過Web上的一個(gè)Socket即可進(jìn)行通信添履。
為了建立WebSockets通信屁倔，客戶端和服務(wù)器在初始握手時(shí)，將HTTP協(xié)議升級(jí)到WebSocket協(xié)議暮胧。一旦連接建立成功锐借，就可以在全雙工模式下在客戶端和服務(wù)器之間來回傳遞WebSocket消息。
除了對(duì)WebSockets協(xié)議定義外往衷，該規(guī)范還同時(shí)定義了用于JavaScript應(yīng)用程序的WebSocket接口钞翔。WebSockets接口的使用很簡單。要連接遠(yuǎn)程主機(jī)席舍，只需要新建一個(gè)WebSocket實(shí)例布轿，提供希望連接的對(duì)端URL。
tel元素来颤，表示電話號(hào)碼汰扭。
email元素，表示電子郵件地址文本框福铅。
url元素萝毛，表示網(wǎng)頁的url。
search元素滑黔，用于搜索引擎笆包，比如在站點(diǎn)頂部顯示的搜索框。
range元素略荡，特定值范圍內(nèi)的數(shù)值選擇器庵佣，典型的顯示方式是滑動(dòng)條。
number元素汛兜，只包含數(shù)值的字段巴粪。
color元素，顏色選擇器，基于調(diào)色盤或者取色板進(jìn)行選擇验毡。
datetime元素衡创，顯示完整的日期和時(shí)間，包括時(shí)區(qū)晶通。
datetime-local璃氢，顯示日期和時(shí)間。
time元素狮辽，不含時(shí)區(qū)的時(shí)間選擇器和指示器一也。
date元素，日期選擇器喉脖。
week元素椰苟，某年中的周選擇器。
month元素树叽，某年中的月選擇器舆蝴。
當(dāng)用戶還沒輸入值的時(shí)候，輸入型控件可以通過placeholder特性向用戶顯示描述性說明或者提示信息题诵。
autocomplete
瀏覽器通過autocomplete特性能夠知曉是否應(yīng)該保存輸入值以備將來使用洁仗。·
通過autofocus特性可以指定某個(gè)表單元素獲得輸入焦點(diǎn)，每個(gè)頁面上只允許出現(xiàn)一個(gè)autofocus特性性锭，如果設(shè)置了多個(gè)赠潦，則相當(dāng)于未指定此行為。
可對(duì)帶有文本內(nèi)容的輸入控件和textarea空間控制spellcheck屬性草冈。設(shè)置完后她奥，會(huì)詢問瀏覽器是否應(yīng)該給出拼寫檢查結(jié)果反饋。spellcheck屬性需要賦值怎棱。
通過組合使用list特性和datalist元素哩俭，開發(fā)人員能夠?yàn)槟硞€(gè)輸入型控件構(gòu)造一張選值列表。
?<option value="a@qq.com"></option>
min和max
通過設(shè)置min和max特性拳恋，可以將range輸入框的數(shù)值輸入范圍限定在最低值和最高值之間凡资。可以只設(shè)置一個(gè)诅岩，也可以兩個(gè)都設(shè)置，也可以都不設(shè)置带膜。·
對(duì)于輸入型控件吩谦，設(shè)置其step特性能夠指定輸入值遞增或者遞減的粒度。
一旦為某輸入型控件設(shè)置了required特性膝藕，那么此項(xiàng)必填式廷，否則無法提交表單。
draggable屬性
如果網(wǎng)頁元素的draggable元素為true芭挽，這個(gè)元素就是可以拖動(dòng)的滑废。·
<div draggable="true">Draggable Div</div>
拖放事件
拖動(dòng)過程會(huì)觸發(fā)很多事件蝗肪，主要有下面這些：·
dragstart：網(wǎng)頁元素開始拖動(dòng)時(shí)觸發(fā)。
drag：被拖動(dòng)的元素在拖動(dòng)過程中持續(xù)觸發(fā)蠕趁。
dragenter：被拖動(dòng)的元素進(jìn)入目標(biāo)元素時(shí)觸發(fā)薛闪，應(yīng)在目標(biāo)元素監(jiān)聽該事件。
dragleave：被拖動(dòng)的元素離開目標(biāo)元素時(shí)觸發(fā)俺陋，應(yīng)在目標(biāo)元素監(jiān)聽該事件豁延。
dragover：被拖動(dòng)元素停留在目標(biāo)元素之中時(shí)持續(xù)觸發(fā)，應(yīng)在目標(biāo)元素監(jiān)聽該事件腊状。
drap：被拖動(dòng)元素或從文件系統(tǒng)選中的文件诱咏，拖放落下時(shí)觸發(fā)。
dragend：網(wǎng)頁元素拖動(dòng)結(jié)束時(shí)觸發(fā)缴挖。
draggableElement.addEventListener('dragstart',function(e)
{console.log('拖動(dòng)開始袋狞！');});
dataTransfer對(duì)象
拖動(dòng)過程中，回調(diào)函數(shù)接受的事件參數(shù)映屋，有一個(gè)dataTransfer屬性苟鸯，指向一個(gè)對(duì)象，包含與拖動(dòng)相關(guān)的各種信息秧荆。·
draggableElement.addEventListener('dragstart',function(event){? ? event.dataTransfer.setData('text','Hello World!');});
dataTransfer對(duì)象的屬性有：·
dropEffect：拖放的操作類型倔毙，決定了瀏覽器如何顯示鼠標(biāo)形狀，可能的值為copy乙濒、move陕赃、link和none。
effectAllowed：指定所允許的操作颁股，可能的值為copy么库、move、link甘有、copyLink诉儒、copyMove、linkMove亏掀、all忱反、none和uninitialized（默認(rèn)值，等同于all滤愕，即允許一切操作）温算。
files：包含一個(gè)FileList對(duì)象，表示拖放所涉及的文件间影，主要用于處理從文件系統(tǒng)拖入瀏覽器的文件注竿。
types：儲(chǔ)存在DataTransfer對(duì)象的數(shù)據(jù)的類型。
dataTransfer對(duì)象的方法有：
setData(format, data)：在dataTransfer對(duì)象上儲(chǔ)存數(shù)據(jù)。第一個(gè)參數(shù)format用來指定儲(chǔ)存的數(shù)據(jù)類型巩割，比如text裙顽、url、text/html等宣谈。
getData(format)：從dataTransfer對(duì)象取出數(shù)據(jù)愈犹。
clearData(format)：清除dataTransfer對(duì)象所儲(chǔ)存的數(shù)據(jù)。如果指定了format參數(shù)蒲祈，則只清除該格式的數(shù)據(jù)甘萧，否則清除所有數(shù)據(jù)。
setDragImage(imgElement, x, y)：指定拖動(dòng)過程中顯示的圖像梆掸。默認(rèn)情況下扬卷，許多瀏覽器顯示一個(gè)被拖動(dòng)元素的半透明版本。參數(shù)imgElement必須是一個(gè)圖像元素酸钦，而不是指向圖像的路徑怪得，參數(shù)x和y表示圖像相對(duì)于鼠標(biāo)的位置。
Web Workers API
Javascript是單線程的卑硫。因此，持續(xù)時(shí)間較長的計(jì)算欢伏，回阻塞UI線程入挣，進(jìn)而導(dǎo)致無法在文本框中填入文本，單擊按鈕等硝拧，并且在大多數(shù)瀏覽器中径筏，除非控制權(quán)返回，否則無法打開新的標(biāo)簽頁滋恬。該問題的解決方案是Web Workers恢氯，可以讓W(xué)eb應(yīng)用程序具備后臺(tái)處理能力勋拟，對(duì)多線程的支持性非常好妈候。·
但是在Web Workers中執(zhí)行的腳本不能訪問該頁面的window對(duì)象州丹，也就是Web Workers不能直接訪問Web頁面和DOM API吓揪。雖然Web Workers不會(huì)導(dǎo)致瀏覽器UI停止響應(yīng)，但是仍然會(huì)消耗CPU周期叭首，導(dǎo)致系統(tǒng)反應(yīng)速度變慢。
Web Storage是html5引入的一個(gè)非常重要的功能焙格，可以在客戶端本地存儲(chǔ)數(shù)據(jù)夷都，類似html4的cookie冬阳，但可實(shí)現(xiàn)功能要比cookie強(qiáng)大的多。
sessionStorage將數(shù)據(jù)保存在session中肝陪，瀏覽器關(guān)閉數(shù)據(jù)就消失刑顺。
localStorage則一直將數(shù)據(jù)保存在客戶端本地捏检，除非手動(dòng)刪除贯城，否則一直保存。
不管是sessionStorage执泰，還是localStorage术吝，可使用的API相同沦寂，常用的有如下幾個(gè)（以localStorage為例）：
保存數(shù)據(jù)：localStorage.setItem(key,value);
讀取數(shù)據(jù)：localStorage.getItem(key);
刪除單個(gè)數(shù)據(jù)：localStorage.removeItem(key);
刪除所有數(shù)據(jù)：localStorage.clear();
得到某個(gè)索引的key：localStorage.key(index);
原文：http://hyuhan.com/2017/07/06/html5-of-interview/
抄一抄 總會(huì)有提高彤守！
