前言
什么是HTML5:HTML5 是下一代的HTML,將成為 HTML、XHTML 以及 HTML DOM 的新標(biāo)準(zhǔn)。今天來談?wù)勄岸嗣嬖囍谢旧厦看我幻娴臅r(shí)候都會被問到的一個(gè)問題，那就是html5的新特性。這個(gè)是學(xué)習(xí)前端必須掌握的基礎(chǔ)知識。
新增的元素
html5新增了一些語義化更好的標(biāo)簽元素。
結(jié)構(gòu)元素
其他元素
廢除的元素
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中同時(shí)將frameset、frame和noframes這三個(gè)元素廢除。
只有部分瀏覽器支持的元素
對于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ì)上是位圖畫布，不可縮放，繪制出來的對象不屬于頁面DOM結(jié)構(gòu)或者任何命名空間。不需要將每個(gè)圖元當(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í)踐表明在不設(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);
</script>
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ā)人員不必使用插件就能播放音頻和視頻。對于這兩個(gè)元素，html5規(guī)范提供了通用、完整、可腳本化控制的API。
html5規(guī)范出來之前，在頁面中播放視頻的典型方式是使用Flash、QuickTime或者Windows Media插件往html中嵌入音頻視頻，相對這種方式，使用html5的媒體標(biāo)簽有兩大好處。
<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元素最簡單的方式是用腳本動(dòng)態(tài)創(chuàng)建它，然后檢測特定函數(shù)是否存在。
var hasVideo = !!(document.createElement('video').canPlayType);
Geolocation API
html5的Geolocation API（地理定位API），可以請求用戶共享他們的位置。使用方法非常簡單，如果用戶同意，瀏覽器就會返回位置信息，該位置信息是通過支持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ù)源：
使用方法
// 一次更新
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í)間戳
}
// 錯(cuò)誤處理函數(shù)
function handleLocationEror(error) {
....
}
// 重復(fù)更新
navigator.geolocation.watchPosition(updateLocation, handleLocationEror);
// 不再接受位置更新
navigator.geolocation.clearWatch(watchId);
Communication API
跨文檔消息傳遞
出于安全方面的考慮，運(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í)，通過檢查消息的來源來決定是否對這條消息進(jìn)行處理。
window.addEventListener("message", messageHandler, true);
function messageHandler(e) {
switch(e.origin) {
case "friend.example.com":
// 處理消息
processMessage(e.data);
break;
default:
// 消息來源無法識別
// 消息被忽略
}
}
消息事件是一個(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
過去，XMLHttpRequest僅限于同源通信，XMLHttpRequest Level2通過CORS實(shí)現(xiàn)了跨源XMLHttpRequest?？缭碒TTP請求包含一個(gè)Origin頭部，它為服務(wù)器提供HTTP請求的源信息。
WebSockets API
WebSockets是html5中最強(qiáng)大的通信功能，它定義了一個(gè)全雙工通信信道，僅通過Web上的一個(gè)Socket即可進(jìn)行通信。
WebSockets握手
為了建立WebSockets通信，客戶端和服務(wù)器在初始握手時(shí)，將HTTP協(xié)議升級到WebSocket協(xié)議。一旦連接建立成功，就可以在全雙工模式下在客戶端和服務(wù)器之間來回傳遞WebSocket消息。
WebSockets接口
除了對WebSockets協(xié)議定義外，該規(guī)范還同時(shí)定義了用于JavaScript應(yīng)用程序的WebSocket接口。WebSockets接口的使用很簡單。要連接遠(yuǎn)程主機(jī)，只需要新建一個(gè)WebSocket實(shí)例，提供希望連接的對端URL。
Forms API
新表單元素
未來的表單元素
新的表單特性和函數(shù)
placeholder
當(dāng)用戶還沒輸入值的時(shí)候，輸入型控件可以通過placeholder特性向用戶顯示描述性說明或者提示信息。
<input name="name" placeholder="First and last name">
autocomplete
瀏覽器通過autocomplete特性能夠知曉是否應(yīng)該保存輸入值以備將來使用。
autofocus
通過autofocus特性可以指定某個(gè)表單元素獲得輸入焦點(diǎn)，每個(gè)頁面上只允許出現(xiàn)一個(gè)autofocus特性，如果設(shè)置了多個(gè)，則相當(dāng)于未指定此行為。
spellcheck
可對帶有文本內(nèi)容的輸入控件和textarea空間控制spellcheck屬性。設(shè)置完后，會詢問瀏覽器是否應(yīng)該給出拼寫檢查結(jié)果反饋。spellcheck屬性需要賦值。
list特性和datalist元素
通過組合使用list特性和datalist元素，開發(fā)人員能夠?yàn)槟硞€(gè)輸入型控件構(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è)置一個(gè)，也可以兩個(gè)都設(shè)置，也可以都不設(shè)置。
step
對于輸入型控件，設(shè)置其step特性能夠指定輸入值遞增或者遞減的粒度。
required
一旦為某輸入型控件設(shè)置了required特性，那么此項(xiàng)必填，否則無法提交表單。
拖放API
draggable屬性
如果網(wǎng)頁元素的draggable元素為true，這個(gè)元素就是可以拖動(dòng)的。
<div draggable="true">Draggable Div</div>
拖放事件
拖動(dòng)過程會觸發(fā)很多事件，主要有下面這些：
draggableElement.addEventListener('dragstart', function(e) {
console.log('拖動(dòng)開始！');
});
dataTransfer對象
拖動(dòng)過程中，回調(diào)函數(shù)接受的事件參數(shù)，有一個(gè)dataTransfer屬性，指向一個(gè)對象，包含與拖動(dòng)相關(guān)的各種信息。
draggableElement.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text', 'Hello World!');
});
dataTransfer對象的屬性有：
dataTransfer對象的方法有：
Web Workers API
Javascript是單線程的。因此，持續(xù)時(shí)間較長的計(jì)算，回阻塞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引入的一個(gè)非常重要的功能，可以在客戶端本地存儲數(shù)據(jù)，類似html4的cookie，但可實(shí)現(xiàn)功能要比cookie強(qiáng)大的多。
sessionStorage
sessionStorage將數(shù)據(jù)保存在session中，瀏覽器關(guān)閉數(shù)據(jù)就消失。
localStorage
localStorage則一直將數(shù)據(jù)保存在客戶端本地，除非手動(dòng)刪除，否則一直保存。
不管是sessionStorage，還是localStorage，可使用的API相同，常用的有如下幾個(gè)（以localStorage為例）：
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
標(biāo)簽：文山 甘南 紅河 惠州 咸陽 營口 蘇州 萍鄉(xiāng)
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《前端面試必備之html5的新特性》，本文關(guān)鍵詞 前端,面試,必備,之,html5,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
