htm5新特性新增與棄用元素

標籤：ble   類型   讀取   ogre   反應速度   sid   create   構造   單元素   

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

新增的APICanvas API

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

利用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="[email protected]"></option>    <option value="[email protected]"></option></datalist><input type="email" id="contatcs" list="contactList">

min和max

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

step

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

required

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

拖放APIdraggable屬性

如果網頁元素的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);

htm5新特性新增與棄用元素