總結html5的新特性（面試必備）-H5教程-PHP中文網

首頁

web前端

H5教程

總結html5的新特性（面試必備）

巴扎黑

Sep 07, 2017 am 09:40 AM

h5 html5 必備

HTML5想必大家都很熟悉了,因為太多的媒體在討論這項技術。所以當我們在面試前端工作的時候，遇到html5相關的問題一點也不意外，想要順利通過前端面試？以下這篇文章就來跟大家分享介紹了關於前端面試必備之html5新特性的相關資料，需要的朋友可以參考下。

前言

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

新增的元素

html5新增了一些語意化較好的標籤元素。

結構元素

#article元素，表示頁面中的一塊與上下文不相關的獨立內容，例如博客中的一篇文章。
aside元素，表示article內容以外的內容，輔助資訊。
header元素，表示頁面中一個內容區塊或整個頁面的頁首。
hgroup元素，用於對頁面中一個區塊或整個頁面的標題進行組合。
footer元素，表示頁面中一個內容區塊或整個頁面的頁腳。
figure元素，表示媒介內容的分組，以及它們的標題。
section元素，表示頁面中一個內容區塊，例如章節。
nav元素，表示頁面中的導覽連結。

其他元素

#video元素，用來定義影片。
audio元素，用來定義音訊。
canvas元素，用來展示圖形，該元素本身沒有行為，只提供一塊畫布。
embed元素，用來插入各種多媒體，格式可以是Midi、Wav、AIFF、AU、MP3等。
mark元素，用來顯示高亮的文字。
progress元素，用來展示任何類型的任務的進度。
meter元素，表示度量衡，定義預定義範圍內的度量。
time元素，用來展示日期或時間。
command元素，表示指令按鈕。
details元素，用來展示使用者要求得到且可以得到的細節資訊。
summary元素，用來為details元素定義可見的標題。
datalist元素，用來展示可選的資料列表，與input元素配合使用，可以製作出輸入值的下拉列表。
datagrid元素，也用來展示可選的資料列表，以樹狀列表的形式來顯示。
keygen元素，表示產生密匙。
output元素，表示不同類型的輸出。
source元素，為媒介元素定義媒介資源。
menu元素，表示選單清單。
ruby元素，表示ruby註釋， rt元素表示字元的解釋或發音。 rp元素在ruby註解中使用，以定義不支援ruby元素的瀏覽器所顯示的內容。
wbr元素，表示軟體換行。與br元素的差異是：br元素表示此處必須換行，而wbr元素的意思是瀏覽器視窗或父級元素的寬度夠寬時。不進行換行，而當寬度不夠時，主動在此進行換行。
bdi元素，定義文字的文字方向，使其脫離其周圍文字的方向設定。
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(&#39;canvas&#39;);
    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的媒體標籤有兩大好處。

作為瀏覽器原生支援的功能，新的audio和video元素無需安裝。
媒體元素想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(&#39;video&#39;).canPlayType);

登入後複製

Geolocation API

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

位置資訊從何而來

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

IP位址
三維座標
GPS
從RFID、WiFi和藍牙到WiFi的MAC位址
GSM或CDMA手機的ID
用戶自訂資料

使用方法

// 一次更新
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(&#39;Hello, world&#39;, &#39;http://www.example.com/&#39;);

登入後複製

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

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在功能上有了很大的改進。主要兩個面向：

跨來源XMLHttpRequest
進度事件

##跨來源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

新表单元素

tel元素，表示电话号码。
email元素，表示电子邮件地址文本框。
url元素，表示网页的url。
search元素，用于搜索引擎，比如在站点顶部显示的搜索框。
range元素，特定值范围内的数值选择器，典型的显示方式是滑动条。
number元素，只包含数值的字段。

未来的表单元素

color元素，颜色选择器，基于调色盘或者取色板进行选择。
datetime元素，显示完整的日期和时间，包括时区。
datetime-local，显示日期和时间。
time元素，不含时区的时间选择器和指示器。
date元素，日期选择器。
week元素，某年中的周选择器。
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，这个元素就是可以拖动的。

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

登入後複製

拖放事件

拖动过程会触发很多事件，主要有下面这些：

dragstart：网页元素开始拖动时触发。
drag：被拖动的元素在拖动过程中持续触发。
dragenter：被拖动的元素进入目标元素时触发，应在目标元素监听该事件。
dragleave：被拖动的元素离开目标元素时触发，应在目标元素监听该事件。
dragover：被拖动元素停留在目标元素之中时持续触发，应在目标元素监听该事件。
drap：被拖动元素或从文件系统选中的文件，拖放落下时触发。
dragend：网页元素拖动结束时触发。

draggableElement.addEventListener(&#39;dragstart&#39;, function(e) {
    console.log(&#39;拖动开始！&#39;);
});

登入後複製

dataTransfer对象

拖动过程中，回调函数接受的事件参数，有一个dataTransfer属性，指向一个对象，包含与拖动相关的各种信息。

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

登入後複製

dataTransfer对象的属性有：

dropEffect：拖放的操作类型，决定了浏览器如何显示鼠标形状，可能的值为copy、move、link和none。
effectAllowed：指定所允许的操作，可能的值为copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized（默认值，等同于all，即允许一切操作）。
files：包含一个FileList对象，表示拖放所涉及的文件，主要用于处理从文件系统拖入浏览器的文件。
types：储存在DataTransfer对象的数据的类型。

dataTransfer对象的方法有：

setData(format, data)：在dataTransfer对象上储存数据。第一个参数format用来指定储存的数据类型，比如text、url、text/html等。
getData(format)：从dataTransfer对象取出数据。
clearData(format)：清除dataTransfer对象所储存的数据。如果指定了format参数，则只清除该格式的数据，否则清除所有数据。
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为例）：