前端面試必備之html5的新特性

什麼是HTML5:HTML5 是下一代的HTML,將成為HTML、XHTML 以及HTML DOM 的新標準。今天來談談前端面試中基本上每次一面的時候都會被問到的一個問題，那就是html5的新特性。這個是學習前端必須掌握的基礎知識。

html5新增了一些語義化更好的標籤元素。

1. article元素，表示頁面中的一塊與上下文不相關的獨立內容，比如博客中的一篇文章。
2. aside元素，表示article內容之外的內容，輔助信息。
3. header元素，表示頁面中一個內容區塊或整個頁面的頁眉。
4. hgroup元素，用於對頁面中一個區塊或整個頁面的標題進行組合。
5. footer元素，表示頁面中一個內容區塊或整個頁面的頁腳。
6. figure元素，表示媒介內容的分組，以及它們的標題。
7. section元素，表示頁面中一個內容區塊，比如章節。
8. nav元素，表示頁面中的導航鏈接。

1. video元素，用來定義視頻。
2. audio元素，用來定義音頻。
3. canvas元素，用來展示圖形，該元素本身沒有行為，僅提供一塊畫布。
4. embed元素，用來插入各種多媒體，格式可以是Midi、Wav、AIFF、AU、MP3等。
5. mark元素，用來展示高亮的文字。
6. progress元素，用來展示任何類型的任務的進度。
7. meter元素，表示度量衡，定義預定義範圍內的度量。
8. time元素，用來展示日期或者時間。
9. command元素，表示命令按鈕。
10. details元素，用來展示用戶要求得到並且可以得到的細節信息。
11. summary元素，用來為details元素定義可見的標題。
12. datalist元素，用來展示可選的數據列表，與input元素配合使用，可以製作出輸入值的下拉列表。
13. datagrid元素，也用來展示可選的數據列表，以樹形列表的形式來顯示。
14. keygen元素，表示生成密匙。
15. output元素，表示不同類型的輸出。
16. source元素，為媒介元素定義媒介資源。
17. menu元素，表示菜單列表。
18. ruby元素，表示ruby註釋， rt元素表示字符的解釋或發音。 rp元素在ruby註釋中使用，以定義不支持ruby元素的瀏覽器所顯示的內容。
19. wbr元素，表示軟換行。與br元素的區別是：br元素表示此處必須換行，而wbr元素的意思是瀏覽器窗口或父級元素的寬度夠寬時。不進行換行，而當寬度不夠時，主動在此處進行換行。
20. bdi元素，定義文本的文本方向，使其脫離其周圍文本的方向設置。
21. dialog元素，表示對話框或窗口。

html5中廢除了一些純表現的元素，只有部分瀏覽器支持的元素還有一些會對可用性產生負面影響的元素。

純表現的元素就是那些可以用css替代的元素。 basefont、big、center、font、s、strike、tt、u這些元素，他們的功能都是純粹為頁面展示服務的，html5提倡把頁面展示性功能放在css樣式表中統一處理，所以將這些元素廢除，用css樣式進行替代。

對於frameset元素、frame元素與noframes元素，由於frame框架對網頁可用性存在負面影響，在html5中已不支持frame框架，只支持iframe框架，html5中同時將frameset、frame和noframes這三個元素廢除。

對於applet、bgsound、blink、marquee等元素，由於只有部分瀏覽器支持，特別是bgsound元素以及marquee元素，只被IE支持，所以在html5中被廢除。其中applet元素可由embed元素或object元素替代，bgsound元素可由audio元素替代，marquee可以由javascript編程的方式替代。

上文提到的canvas元素可以為頁面提供一塊畫布來展示圖形。結合Canvas API，就可以在這塊畫布上動態生成和展示各種圖形、圖表、圖像以及動畫了。 Canvas本質上是位圖畫布，不可縮放，繪製出來的對像不屬於頁面DOM結構或者任何命名空間。不需要將每個圖元當做對象存儲，執行性能非常好。

利用Canvas API進行繪圖，首先要獲取canvas元素的上下文，然後用該上下文中封裝的各種繪圖功能進行繪圖。

 <canvas id=canvas>替代內容</canvas><script> var canvas = document.getElementById('canvas'); var context =canvas.getContext(2d); // 獲取上下文//設置純色context.fillStyle = red ; context.strokeStyle = blue; // 實踐表明在不設置fillStyle下的默認fillStyle為black context.fillRect(0, 0, 100, 100); // 實踐表明在不設置strokeStyle下的默認strokeStyle為black context. strokeRect(120, 0, 100, 100);</script>

SVG是html5的另一項圖形功能，它是一種標準的矢量圖形，是一種文件格式，有自己的API。 html5引入了內聯SVG，使得SVG元素可以直接出現在html標記中。

 <svg height=100 width=100><circle cx=50 cy=50 r=50 /></svg>

audio和video元素的出現讓html5的媒體應用多了新選擇，開發人員不必使用插件就能播放音頻和視頻。對於這兩個元素，html5規範提供了通用、完整、可腳本化控制的API。

html5規範出來之前，在頁面中播放視頻的典型方式是使用Flash、QuickTime或者Windows Media插件往html中嵌入音頻視頻，相對這種方式，使用html5的媒體標籤有兩大好處。

1. 作為瀏覽器原生支持的功能，新的audio和video元素無需安裝。
2. 媒體元素想Web頁面提供了通用、集成和可腳本化控制的API。

 <video src=video.webm controls> <object data=videoplayer.swf type=application/x-shockwave-flash> <param name=movie value=video.swf /> </object> Your browser does not support HTML5 video. </video>

瀏覽器檢測是否支持audio元素或者video元素最簡單的方式是用腳本動態創建它，然後檢測特定函數是否存在。

 var hasVideo = !!(document.createElement('video').canPlayType);

html5的Geolocation API（地理定位API），可以請求用戶共享他們的位置。使用方法非常簡單，如果用戶同意，瀏覽器就會返回位置信息，該位置信息是通過支持html5地理定位功能的底層設備（如筆記本電腦或手機）提供給瀏覽器的。位置信息由緯度、經度坐標和一些其他元數據組成。

Geolocation API不指定設備使用哪種底層技術來定位應用程序的用戶。相反，它只是用於檢索位置信息的API，而且通過該API檢索到的數據只具有某種程度的準確性，並不能保證設備返回的位置是精確的。設備可以使用下列數據源：

1. IP地址

   三維坐標

   GPS

   從RFID、WiFi和藍牙到WiFi的MAC地址

2. GSM或CDMA手機的ID
3. 用戶自定義數據

// 一次更新navigator.geolocation.getCurrentPosition(updateLocation, handleLocationEror);function updateLocation(position) { var latitude = position.coords.latitude; // 緯度var longitude = position.coords.longitude; // 經度var accuracy = position. coords.accuracy; // 準確度var timestamp = position.coords.timestamp; // 時間戳}// 錯誤處理函數function handleLocationEror(error) { ....}// 重複更新navigator.geolocation.watchPosition(updateLocation, handleLocationEror);// 不再接受位置更新navigator.geolocation.clearWatch(watchId);

出於安全方面的考慮，運行在同一瀏覽器中的框架、標籤頁、窗口間的通信一直都受到了嚴格的限制。然而，現實中存在一些合理的讓不同站點的內容能在瀏覽器內進行交互的需求。這種情形下，如果瀏覽器內部能提供直接的通信機制，就能更好地組織這些應用。

html5中引入了一種新功能，跨文檔消息通信，可以確保iframe、標籤頁、窗口間安全地進行跨源通信。 postMessage API為發送消息的標準方式，發送消息非常簡單：

 window.postMessage('Hello, world', 'http://www.example.com/');

接收消息時，僅需在頁面中增加一個事件處理函數。當某個消息到達時，通過檢查消息的來源來決定是否對這條消息進行處理。

 window.addEventListener(message, messageHandler, true);function messageHandler(e) { switch(e.origin) { case friend.example.com: // 處理消息processMessage(e.data); break; default: // 消息來源無法識別// 消息被忽略}}

消息事件是一個擁有data(數據)和origin(源)屬性的DOM事件。 data屬性是發送方傳遞的實際消息，而origin屬性是發送來源。

XMLHttpRequest API使得Ajax技術成為可能，作為XMLHttpRequest的改進版，XMLHttpRequest Level2在功能上有了很大的改進。主要兩個方面：

1. 跨源XMLHttpRequest
2. 進度事件

過去，XMLHttpRequest僅限於同源通信，XMLHttpRequest Level2通過CORS實現了跨源XMLHttpRequest。跨源HTTP請求包含一個Origin頭部，它為服務器提供HTTP請求的源信息。

WebSockets是html5中最強大的通信功能，它定義了一個全雙工通信信道，僅通過Web上的一個Socket即可進行通信。

為了建立WebSockets通信，客戶端和服務器在初始握手時，將HTTP協議升級到WebSocket協議。一旦連接建立成功，就可以在全雙工模式下在客戶端和服務器之間來回傳遞WebSocket消息。

除了對WebSockets協議定義外，該規範還同時定義了用於JavaScript應用程序的WebSocket接口。 WebSockets接口的使用很簡單。要連接遠程主機，只需要新建一個WebSocket實例，提供希望連接的對端URL。

1. tel元素，表示電話號碼。
2. email元素，表示電子郵件地址文本框。
3. url元素，表示網頁的url。
4. search元素，用於搜索引擎，比如在站點頂部顯示的搜索框。
5. range元素，特定值範圍內的數值選擇器，典型的顯示方式是滑動條。
6. number元素，只包含數值的字段。

1. color元素，顏色選擇器，基於調色盤或者取色板進行選擇。
2. datetime元素，顯示完整的日期和時間，包括時區。
3. datetime-local，顯示日期和時間。
4. time元素，不含時區的時間選擇器和指示器。
5. date元素，日期選擇器。
6. week元素，某年中的周選擇器。
7. month元素，某年中的月選擇器。

當用戶還沒輸入值的時候，輸入型控件可以通過placeholder特性向用戶顯示描述性說明或者提示信息。

 <input name=name placeholder=First and last name>

瀏覽器通過autocomplete特性能夠知曉是否應該保存輸入值以備將來使用。

通過autofocus特性可以指定某個表單元素獲得輸入焦點，每個頁面上只允許出現一個autofocus特性，如果設置了多個，則相當於未指定此行為。

可對帶有文本內容的輸入控件和textarea空間控制spellcheck屬性。設置完後，會詢問瀏覽器是否應該給出拼寫檢查結果反饋。 spellcheck屬性需要賦值。

通過組合使用list特性和datalist元素，開發人員能夠為某個輸入型控件構造一張選值列表。

 <datalist id=contactList> <option [email protected]></option> <option [email protected]></option></datalist><input type=email id=contatcs list=contactList>

通過設置min和max特性，可以將range輸入框的數值輸入範圍限定在最低值和最高值之間。可以只設置一個，也可以兩個都設置，也可以都不設置。

對於輸入型控件，設置其step特性能夠指定輸入值遞增或者遞減的粒度。

一旦為某輸入型控件設置了required特性，那麼此項必填，否則無法提交表單。

如果網頁元素的draggable元素為true，這個元素就是可以拖動的。

 <div draggable=true>Draggable Div</div>

拖動過程會觸發很多事件，主要有下面這些：

1. dragstart：網頁元素開始拖動時觸發。
2. drag：被拖動的元素在拖動過程中持續觸發。
3. dragenter：被拖動的元素進入目標元素時觸發，應在目標元素監聽該事件。
4. dragleave：被拖動的元素離開目標元素時觸發，應在目標元素監聽該事件。
5. dragover：被拖動元素停留在目標元素之中時持續觸發，應在目標元素監聽該事件。
6. drap：被拖動元素或從文件系統選中的文件，拖放落下時觸發。
7. dragend：網頁元素拖動結束時觸發。

 draggableElement.addEventListener('dragstart', function(e) { console.log('拖動開始！');});

拖動過程中，回調函數接受的事件參數，有一個dataTransfer屬性，指向一個對象，包含與拖動相關的各種信息。

 draggableElement.addEventListener('dragstart', function(event) { event.dataTransfer.setData('text', 'Hello World!');});

1. dropEffect：拖放的操作類型，決定了瀏覽器如何顯示鼠標形狀，可能的值為copy、move、link和none。
2. effectAllowed：指定所允許的操作，可能的值為copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized（默認值，等同於all，即允許一切操作）。
3. files：包含一個FileList對象，表示拖放所涉及的文件，主要用於處理從文件系統拖入瀏覽器的文件。
4. types：儲存在DataTransfer對象的數據的類型。

1. setData(format, data)：在dataTransfer對像上儲存數據。第一個參數format用來指定儲存的數據類型，比如text、url、text/html等。
2. getData(format)：從dataTransfer對象取出數據。
3. clearData(format)：清除dataTransfer對象所儲存的數據。如果指定了format參數，則只清除該格式的數據，否則清除所有數據。
4. setDragImage(imgElement, x, y)：指定拖動過程中顯示的圖像。默認情況下，許多瀏覽器顯示一個被拖動元素的半透明版本。參數imgElement必須是一個圖像元素，而不是指向圖像的路徑，參數x和y表示圖像相對於鼠標的位置。

Javascript是單線程的。因此，持續時間較長的計算，回阻塞UI線程，進而導致無法在文本框中填入文本，單擊按鈕等，並且在大多數瀏覽器中，除非控制權返回，否則無法打開新的標籤頁。該問題的解決方案是Web Workers，可以讓Web應用程序具備後台處理能力，對多線程的支持性非常好。

但是在Web Workers中執行的腳本不能訪問該頁面的window對象，也就是Web Workers不能直接訪問Web頁面和DOM API。雖然Web Workers不會導致瀏覽器UI停止響應，但是仍然會消耗CPU週期，導致系統反應速度變慢。

Web Storage是html5引入的一個非常重要的功能，可以在客戶端本地存儲數據，類似html4的cookie，但可實現功能要比cookie強大的多。

sessionStorage將數據保存在session中，瀏覽器關閉數據就消失。

localStorage則一直將數據保存在客戶端本地，除非手動刪除，否則一直保存。

不管是sessionStorage，還是localStorage，可使用的API相同，常用的有如下幾個（以localStorage為例）：

1. 保存數據：localStorage.setItem(key,value);
2. 讀取數據：localStorage.getItem(key);
3. 刪除單個數據：localStorage.removeItem(key);
4. 刪除所有數據：localStorage.clear();
5. 得到某個索引的key：localStorage.key(index);

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對VeVb武林網的支持。