前端面試之htm5新特性

今天來談談前端面試中基本上每次一面的時候都會被問到的一個問題，那就是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編程的方式替代。

新增的API

Canvas API

上文提到的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

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);

Geolocation API

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

位置信息從何而來

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

1. IP地址

2. 三維座標

   1. GPS

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

   3. 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);

Communication API

跨文檔消息傳遞

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

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

1. 跨源XMLHttpRequest

2. 進度事件

跨源XMLHttpRequest

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

WebSockets API

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

WebSockets握手

爲了創建WebSockets通訊，客戶端和服務器在初始握手時，將HTTP協議升級到WebSocket協議。一旦鏈接創建成功，就能夠在全雙工模式下在客戶端和服務器之間來回傳遞WebSocket消息。

WebSockets接口

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

Forms API

新表單元素

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

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

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

autocomplete

瀏覽器經過autocomplete特性可以知曉是否應該保存輸入值以備未來使用。

autofocus

經過autofocus特性能夠指定某個表單元素得到輸入焦點，每一個頁面上只容許出現一個autofocus特性，若是設置了多個，則至關於未指定此行爲。

spellcheck

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

list特性和datalist元素

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

<datalist id="contactList">
    <option value="a@qq.com"></option>
    <option value="b@qq.com"></option>
</datalist>
<input type="email" id="contatcs" list="contactList">

min和max

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

step

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

required

一旦爲某輸入型控件設置了required特性，那麼此項必填，不然沒法提交表單。

拖放API

draggable屬性

若是網頁元素的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對象

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

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

dataTransfer對象的屬性有：

1. dropEffect：拖放的操做類型，決定了瀏覽器如何顯示鼠標形狀，可能的值爲copy、move、link和none。

2. effectAllowed：指定所容許的操做，可能的值爲copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized（默認值，等同於all，即容許一切操做）。

3. files：包含一個FileList對象，表示拖放所涉及的文件，主要用於處理從文件系統拖入瀏覽器的文件。

4. types：儲存在DataTransfer對象的數據的類型。

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表示圖像相對於鼠標的位置。

Web Workers API

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

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

Web Storage API

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

sessionStorage

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

localStorage

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);