這篇文章主要介紹html5的新特性有哪些，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司是一家專業(yè)提供洮北企業(yè)網(wǎng)站建設(shè),專注與做網(wǎng)站、成都做網(wǎng)站、H5頁面制作、小程序制作等業(yè)務(wù)。10年已為洮北眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。

新增的元素

html5新增了一些語義化更好的標(biāo)簽元素。

結(jié)構(gòu)元素

1. article元素，表示頁面中的一塊與上下文不相關(guān)的獨立內(nèi)容，比如博客中的一篇文章。

2. aside元素，表示article內(nèi)容之外的內(nèi)容，輔助信息。

3. header元素，表示頁面中一個內(nèi)容區(qū)塊或整個頁面的頁眉。

4. hgroup元素，用于對頁面中一個區(qū)塊或整個頁面的標(biāo)題進(jìn)行組合。

5. footer元素，表示頁面中一個內(nèi)容區(qū)塊或整個頁面的頁腳。

6. figure元素，表示媒介內(nèi)容的分組，以及它們的標(biāo)題。

7. section元素，表示頁面中一個內(nèi)容區(qū)塊，比如章節(jié)。

8. nav元素，表示頁面中的導(dǎo)航鏈接。

其他元素

1. video元素，用來定義視頻。

2. audio元素，用來定義音頻。

3. canvas元素，用來展示圖形，該元素本身沒有行為，僅提供一塊畫布。

4. embed元素，用來插入各種多媒體，格式可以是Midi、Wav、AIFF、AU、MP3等。

5. mark元素，用來展示高亮的文字。

6. progress元素，用來展示任何類型的任務(wù)的進(jìn)度。

7. meter元素，表示度量衡，定義預(yù)定義范圍內(nèi)的度量。

8. time元素，用來展示日期或者時間。

9. command元素，表示命令按鈕。

10. details元素，用來展示用戶要求得到并且可以得到的細(xì)節(jié)信息。

11. summary元素，用來為details元素定義可見的標(biāo)題。

12. datalist元素，用來展示可選的數(shù)據(jù)列表，與input元素配合使用，可以制作出輸入值的下拉列表。

13. datagrid元素，也用來展示可選的數(shù)據(jù)列表，以樹形列表的形式來顯示。

14. keygen元素，表示生成密匙。

15. output元素，表示不同類型的輸出。

16. source元素，為媒介元素定義媒介資源。

17. menu元素，表示菜單列表。

18. ruby元素，表示ruby注釋， rt元素表示字符的解釋或發(fā)音。 rp元素在ruby注釋中使用，以定義不支持ruby元素的瀏覽器所顯示的內(nèi)容。

19. wbr元素，表示軟換行。與br元素的區(qū)別是：br元素表示此處必須換行，而wbr元素的意思是瀏覽器窗口或父級元素的寬度夠?qū)挄r。不進(jìn)行換行，而當(dāng)寬度不夠時，主動在此處進(jìn)行換行。

20. bdi元素，定義文本的文本方向，使其脫離其周圍文本的方向設(shè)置。

21. dialog元素，表示對話框或窗口。

廢除的元素

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

純表現(xiàn)元素

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

對可用性產(chǎn)生負(fù)面影響的元素

對于frameset元素、frame元素與noframes元素，由于frame框架對網(wǎng)頁可用性存在負(fù)面影響，在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元素可以為頁面提供一塊畫布來展示圖形。結(jié)合Canvas API，就可以在這塊畫布上動態(tài)生成和展示各種圖形、圖表、圖像以及動畫了。Canvas本質(zhì)上是位圖畫布，不可縮放，繪制出來的對象不屬于頁面DOM結(jié)構(gòu)或者任何命名空間。不需要將每個圖元當(dāng)做對象存儲，執(zhí)行性能非常好。

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

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

SVG

SVG是html5的另一項圖形功能，它是一種標(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ā)人員不必使用插件就能播放音頻和視頻。對于這兩個元素，html5規(guī)范提供了通用、完整、可腳本化控制的API。
html5規(guī)范出來之前，在頁面中播放視頻的典型方式是使用Flash、QuickTime或者Windows Media插件往html中嵌入音頻視頻，相對這種方式，使用html5的媒體標(biāo)簽有兩大好處。

1. 作為瀏覽器原生支持的功能，新的audio和video元素?zé)o需安裝。

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元素最簡單的方式是用腳本動態(tài)創(chuàng)建它，然后檢測特定函數(shù)是否存在。

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

Geolocation API

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

位置信息從何而來

Geolocation API不指定設(shè)備使用哪種底層技術(shù)來定位應(yīng)用程序的用戶。相反，它只是用于檢索位置信息的API，而且通過該API檢索到的數(shù)據(jù)只具有某種程度的準(zhǔn)確性，并不能保證設(shè)備返回的位置是精確的。設(shè)備可以使用下列數(shù)據(jù)源：

1. IP地址
   三維坐標(biāo)
   GPS
   從RFID、WiFi和藍(lán)牙到WiFi的MAC地址

2. GSM或CDMA手機的ID

3. 用戶自定義數(shù)據(jù)

使用方法

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

Communication API

跨文檔消息傳遞

出于安全方面的考慮，運行在同一瀏覽器中的框架、標(biāo)簽頁、窗口間的通信一直都受到了嚴(yán)格的限制。然而，現(xiàn)實中存在一些合理的讓不同站點的內(nèi)容能在瀏覽器內(nèi)進(jìn)行交互的需求。這種情形下，如果瀏覽器內(nèi)部能提供直接的通信機制，就能更好地組織這些應(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ù)。當(dāng)某個消息到達(dá)時，通過檢查消息的來源來決定是否對這條消息進(jìn)行處理。

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

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

XMLHttpRequest Level2

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

1. 跨源XMLHttpRequest

2. 進(jìn)度事件

跨源XMLHttpRequest

過去，XMLHttpRequest僅限于同源通信，XMLHttpRequest Level2通過CORS實現(xiàn)了跨源XMLHttpRequest?？缭碒TTP請求包含一個Origin頭部，它為服務(wù)器提供HTTP請求的源信息。

WebSockets API

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

WebSockets握手

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

WebSockets接口

除了對WebSockets協(xié)議定義外，該規(guī)范還同時定義了用于JavaScript應(yīng)用程序的WebSocket接口。WebSockets接口的使用很簡單。要連接遠(yuǎn)程主機，只需要新建一個WebSocket實例，提供希望連接的對端URL。

Forms API

新表單元素

1. tel元素，表示電話號碼。

2. email元素，表示電子郵件地址文本框。

3. url元素，表示網(wǎng)頁的url。

4. search元素，用于搜索引擎，比如在站點頂部顯示的搜索框。

5. range元素，特定值范圍內(nèi)的數(shù)值選擇器，典型的顯示方式是滑動條。

6. number元素，只包含數(shù)值的字段。

未來的表單元素

1. color元素，顏色選擇器，基于調(diào)色盤或者取色板進(jìn)行選擇。

2. datetime元素，顯示完整的日期和時間，包括時區(qū)。

3. datetime-local，顯示日期和時間。

4. time元素，不含時區(qū)的時間選擇器和指示器。

5. date元素，日期選擇器。

6. week元素，某年中的周選擇器。

7. month元素，某年中的月選擇器。

新的表單特性和函數(shù)

placeholder

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

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

autocomplete

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

autofocus

通過autofocus特性可以指定某個表單元素獲得輸入焦點，每個頁面上只允許出現(xiàn)一個autofocus特性，如果設(shè)置了多個，則相當(dāng)于未指定此行為。

spellcheck

可對帶有文本內(nèi)容的輸入控件和textarea空間控制spellcheck屬性。設(shè)置完后，會詢問瀏覽器是否應(yīng)該給出拼寫檢查結(jié)果反饋。spellcheck屬性需要賦值。

list特性和datalist元素

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

<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

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

step

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

required

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

拖放API

draggable屬性

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

<p draggable="true">Draggable p</p>

拖放事件

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

1. dragstart：網(wǎng)頁元素開始拖動時觸發(fā)。

2. drag：被拖動的元素在拖動過程中持續(xù)觸發(fā)。

3. dragenter：被拖動的元素進(jìn)入目標(biāo)元素時觸發(fā)，應(yīng)在目標(biāo)元素監(jiān)聽該事件。

4. dragleave：被拖動的元素離開目標(biāo)元素時觸發(fā)，應(yīng)在目標(biāo)元素監(jiān)聽該事件。

5. dragover：被拖動元素停留在目標(biāo)元素之中時持續(xù)觸發(fā)，應(yīng)在目標(biāo)元素監(jiān)聽該事件。

6. drap：被拖動元素或從文件系統(tǒng)選中的文件，拖放落下時觸發(fā)。

7. dragend：網(wǎng)頁元素拖動結(jié)束時觸發(fā)。

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

dataTransfer對象

拖動過程中，回調(diào)函數(shù)接受的事件參數(shù)，有一個dataTransfer屬性，指向一個對象，包含與拖動相關(guān)的各種信息。

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

dataTransfer對象的屬性有：

1. dropEffect：拖放的操作類型，決定了瀏覽器如何顯示鼠標(biāo)形狀，可能的值為copy、move、link和none。

2. effectAllowed：指定所允許的操作，可能的值為copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized（默認(rèn)值，等同于all，即允許一切操作）。

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

4. types：儲存在DataTransfer對象的數(shù)據(jù)的類型。

dataTransfer對象的方法有：

1. setData(format, data)：在dataTransfer對象上儲存數(shù)據(jù)。第一個參數(shù)format用來指定儲存的數(shù)據(jù)類型，比如text、url、text/html等。

2. getData(format)：從dataTransfer對象取出數(shù)據(jù)。

3. clearData(format)：清除dataTransfer對象所儲存的數(shù)據(jù)。如果指定了format參數(shù)，則只清除該格式的數(shù)據(jù)，否則清除所有數(shù)據(jù)。

4. setDragImage(imgElement, x, y)：指定拖動過程中顯示的圖像。默認(rèn)情況下，許多瀏覽器顯示一個被拖動元素的半透明版本。參數(shù)imgElement必須是一個圖像元素，而不是指向圖像的路徑，參數(shù)x和y表示圖像相對于鼠標(biāo)的位置。

Web Workers API

Javascript是單線程的。因此，持續(xù)時間較長的計算，回阻塞UI線程，進(jìn)而導(dǎo)致無法在文本框中填入文本，單擊按鈕等，并且在大多數(shù)瀏覽器中，除非控制權(quán)返回，否則無法打開新的標(biāo)簽頁。該問題的解決方案是Web Workers，可以讓W(xué)eb應(yīng)用程序具備后臺處理能力，對多線程的支持性非常好。

但是在Web Workers中執(zhí)行的腳本不能訪問該頁面的window對象，也就是Web Workers不能直接訪問Web頁面和DOM API。雖然Web Workers不會導(dǎo)致瀏覽器UI停止響應(yīng)，但是仍然會消耗CPU周期，導(dǎo)致系統(tǒng)反應(yīng)速度變慢。

Web Storage API

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

sessionStorage

sessionStorage將數(shù)據(jù)保存在session中，瀏覽器關(guān)閉數(shù)據(jù)就消失。

localStorage

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

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

1. 保存數(shù)據(jù)：localStorage.setItem(key,value);

2. 讀取數(shù)據(jù)：localStorage.getItem(key);

3. 刪除單個數(shù)據(jù)：localStorage.removeItem(key);

4. 刪除所有數(shù)據(jù)：localStorage.clear();

5. 得到某個索引的key：localStorage.key(index);

以上是“html5的新特性有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文名稱：html5的新特性有哪些
URL網(wǎng)址：http://aaarwkj.com/article2/jpdsoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、微信小程序、App設(shè)計、微信公眾號、品牌網(wǎng)站制作、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)