參考：

HTML5的十大新特性

前端面試必備之html5的新特性

HTML5

主要內(nèi)容：語義化、增強(qiáng)型表單、多媒體標(biāo)簽、Canvas、SVG、地理定位、拖放API、Web Worker、Web Storage、WebSocket、HTML 5 應(yīng)用程序緩存

1.語義化元素

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

標(biāo)簽描述

article	表示與上下文不相關(guān)的獨(dú)立內(nèi)容區(qū)域
aside	定義頁面的側(cè)邊欄區(qū)域
header	定義頁面頭部區(qū)域
hgroup	用于對(duì)頁面中一個(gè)區(qū)域或整個(gè)頁面的標(biāo)題進(jìn)行組合
footer	定義頁面的底部區(qū)域
section	定義文檔中的節(jié)段
nav	定義頁面導(dǎo)航
dialog	定義對(duì)話框，比如提示框

1.2增強(qiáng)型表單及屬性

<!--表單--> <form action=""><!--表單元素--><input type="text"><input type="password"><input type="button"><input type="submit"><input type="file"><input type="checkbox"><input type="radio"><input type="reset"><!--新增--><input type="search"><input type="number"><input type="email"><input type="url"><input type="tel"><!--在移動(dòng)端使用的時(shí)候才會(huì)看到區(qū)別--><!--體現(xiàn)：調(diào)用的虛擬鍵盤不一樣--><input type="date"><input type="week"><input type="time"><input type="color"><input type="range"> </form>form 屬性：action： 用來指定當(dāng)前表單控件中的數(shù)據(jù)要交給哪個(gè)后臺(tái)文件去處理method： 用來指定一種數(shù)據(jù)提交方式： get | post1. 輸入框：<input type="text">屬性：name: 設(shè)置當(dāng)前控件的名稱value：設(shè)置當(dāng)前控件的默認(rèn)值placeholder： 占位符【當(dāng)前控件的一個(gè)提示信息】readonly： 設(shè)置當(dāng)前控件為只讀模式disabled： 設(shè)置當(dāng)前控件不能輸入 maxlength： 設(shè)置當(dāng)前控件最多能輸入多少個(gè)字符autofocus: 自動(dòng)獲取焦點(diǎn)2. 密碼輸入框：<input type="password">屬性： 與文本輸入框的屬性一致。3. 單選控件：<input type="radio">注意：? 默認(rèn)單選控件不能實(shí)現(xiàn)單選效果? 只要給單選空件設(shè)置相同的name值即可。<input type="radio" name="gender" checked>男<input type="radio" name="gender">女4. 多選控件：<input type="checkbox" checked> 5. 下拉列表框：<select multiple><option>河南</option><option selected>山西</option><option>北京</option></select>屬性：selected: 設(shè)置下拉列表框中的默認(rèn)選中項(xiàng)multiple：可以實(shí)現(xiàn)多選效果或者如下寫法：<select><optgroup label="河北省"><option>張家口</option><option>石家莊</option><option>保定</option></optgroup></select>6. 多行文本框（域）：<textarea></textarea> < resize: none> 禁止文本域拖拽7. 上傳控件：<input type="file">8. 按鈕系列：? <input type="submit"> 就是用來提交表單數(shù)據(jù)的? <input type="image" src="按鈕.jpg"> 用來提交表單數(shù)據(jù)? <input type="button" value="按鈕"> 不能提交表單數(shù)據(jù)，和js配合使用? <input type="reset"> 將控件中的值恢復(fù)到默認(rèn)值<fieldset><legend>個(gè)人信息采集</legend> </fieldset>H5新屬性： ? <input type="number" step="5" pattern="">： 該控件只能用來輸入數(shù)字屬性： step="值"； 設(shè)置當(dāng)前控件累加的值或減少的值。pattern="正則表達(dá)式" 通過正則表達(dá)式可以實(shí)現(xiàn)靈活的控制輸入框中能輸入哪些數(shù)據(jù)類型? <input type="url">： 只能輸入合法的網(wǎng)址? <input type="email">: 設(shè)置用戶只能輸入合法的郵箱地址? <input type="date">： 在網(wǎng)頁中顯示日期控件? <input type="week" name=""> 顯示一年中的第幾周? <input type="time"> 顯示24小時(shí)內(nèi)的時(shí)間? <input type="month" name=""> 顯示第幾個(gè)月? <input type="range"> ： 通過用戶拖動(dòng)控件實(shí)現(xiàn)選中值的大小屬性：min: 規(guī)定允許的最小值max: 規(guī)定允許的最大值value: 規(guī)定默認(rèn)值step: 每多拽一次滑塊，里面值要累加多少或者減少多少? <datalist></datalist>使用：-----搜索下拉列表<input type="text" name="" list="myList"><datalist id="myList"><option value="IT程序入門" label="大約有20個(gè)空位"></option><option value="挖掘機(jī)入門" label="大約有2臺(tái)機(jī)器"></option><option value="美容美發(fā)入門" label="大約每有假頭"></option></datalist>

?

? required： 實(shí)現(xiàn)讓表單空鍵的值不能為空【必須填】例如：<input type="text" name="" placeholder="請(qǐng)輸入用戶名" required>? autocomplete： 將用戶提交過的數(shù)據(jù)進(jìn)行緩存注意：1. 該屬性可以給form標(biāo)簽設(shè)置2. 瀏覽器中該屬性的默認(rèn)值： on | off<form action="1.php" autocomplete="on"></form>? novalidate： 取消驗(yàn)證注意：1. 該屬性要給form標(biāo)簽設(shè)置 <form action="1.php" autocomplete="on" novalidate><input type="email" name=""> ---加上novalidate屬性后，該郵箱地址不會(huì)進(jìn)行是否合法驗(yàn)證</form>? placeholder： 占位符 【輸入框的提示信息】? autofocus： 自動(dòng)獲取焦點(diǎn)

?

1.3多媒體標(biāo)簽

git上關(guān)于video的使用

? <video></video>： 在網(wǎng)頁中用來展示視頻例如：<video src="ds.mp4" controls autoplay loop></video>controls： 顯示控制欄autoplay： 多媒體自動(dòng)播放loop ： 設(shè)置循環(huán)播放1. 關(guān)于瀏覽器支持多種視頻格式文件播放的兼容寫法：<video controls><source src="ds.mp4"><source src="ds.ogg"><source src="ds.webm">瀏覽器不支持video標(biāo)簽</video>? <audio></audio>： 在網(wǎng)頁中展示音頻總結(jié)： audio標(biāo)簽的屬性與video標(biāo)簽的屬性一樣。 兼容寫法：<audio><source src="a.mp3" type=""><source src="a.ogg" type=""><source src="a.wav" type="">瀏覽器不支持audio標(biāo)簽</audio>

2.Canvas繪圖

HTML5 Canvas——基礎(chǔ)入門

HTML5 Canvas——折線圖

?

3.SVG

HTML5 可縮放矢量圖形（1）—SVG基礎(chǔ)

HTML5 可縮放矢量圖形（2）—SVG基礎(chǔ)

HTML5 SVG應(yīng)用（1）——loading效果

?

SVG 與 Canvas兩者間的區(qū)別

　　SVG 是一種使用 XML 描述 2D 圖形的語言。

　　Canvas 通過 JavaScript 來繪制 2D 圖形。

　　SVG 基于 XML，這意味著 SVG DOM 中的每個(gè)元素都是可用的。您可以為某個(gè)元素附加 JavaScript 事件處理器。

　　在 SVG 中，每個(gè)被繪制的圖形均被視為對(duì)象。如果 SVG 對(duì)象的屬性發(fā)生變化，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形。

　　Canvas 是逐像素進(jìn)行渲染的。在 canvas 中，一旦圖形被繪制完成，它就不會(huì)繼續(xù)得到瀏覽器的關(guān)注。如果其位置發(fā)生變化，那么整個(gè)場(chǎng)景也需要重新繪制，包括任何或許已被圖形覆蓋的對(duì)象。

4.地理定位

HTML5 Geolocation API地理定位整理（一）

HTML5 Geolocation API地理定位整理（二）

[HTML5 Geolocation API工作原理轉(zhuǎn)載]

?

<script>console.log(navigator.geolocation);if (navigator.geolocation) {//獲取地理位置需要等比較長的一段時(shí)間//尤其是在PC段，根據(jù)IP獲取的 navigator.geolocation.getCurrentPosition(successCB, errorCB);} else {console.log('你的瀏覽器不支持地理定位');}//獲取地理位置成功function successCB(position) {console.info(position);console.log('位置精度:' + position.coords.accuracy);console.log('維度：' + position.coords.latitude);console.log('經(jīng)度：' + position.coords.longitude);}//獲取地理位置失敗function errorCB(error) {console.error(error);var msg = '';switch (error.code) {case error.PERMISSION_DENIED:msg = "用戶拒絕對(duì)獲取地理位置的請(qǐng)求。"break;case error.POSITION_UNAVAILABLE:msg = "位置信息是不可用的。"break;case error.TIMEOUT:msg = "請(qǐng)求用戶地理位置超時(shí)。"break;case error.UNKNOWN_ERROR:msg = "未知錯(cuò)誤。"break;}console.error(msg);}</script>

?

?

demo2

<div id="container"></div> <!-- 引入百度javascript版 API --> <script src="http://api.map.baidu.com/api?v=2.0&ak= 0A5bc3c4fb543c8f9bc54b77bc155724"></script> <script>var geolocation = new BMap.Geolocation;geolocation.getCurrentPosition(function(position){console.log(position);// 這些都是寫死var map = new BMap.Map("container"); // container表示顯示的容器// 把經(jīng)度緯度傳給百度/*40.1691162668,116.6348530780*/var point = new BMap.Point(position.point.lng,position.point.lat);//默認(rèn)的比例 map.centerAndZoom(point, 20);//添加鼠標(biāo)滾動(dòng)縮放 map.enableScrollWheelZoom();// 只寫上面三行就可出現(xiàn)地圖了，并且會(huì)定位// 定義好了一個(gè)圖片標(biāo)記var myIcon = new BMap.Icon("1.png", new BMap.Size(128, 128));// 創(chuàng)建標(biāo)注var marker = new BMap.Marker(point, {icon: myIcon});map.addOverlay(marker);});</script>

??

5.拖放API

拖放（Drag 和 drop）是 HTML5 標(biāo)準(zhǔn)的組成部分。

注意：drop事件的默認(rèn)行為是以鏈接形式打開的，這時(shí)要阻止默認(rèn)行為。

拖放是一種常見的特性，即抓取對(duì)象以后拖到另一個(gè)位置。

• 在 HTML5 中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放。

• 拖放的過程分為源對(duì)象和目標(biāo)對(duì)象，源對(duì)象指的是即將拖動(dòng)的對(duì)象，而目標(biāo)對(duì)象則是指拖動(dòng)之后要放置的目標(biāo)對(duì)象

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

dragstart：網(wǎng)頁元素開始拖動(dòng)時(shí)觸發(fā)。

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

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

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

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

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

dragend：網(wǎng)頁元素拖動(dòng)結(jié)束時(shí)觸發(fā)。

拖放的源對(duì)象（可能移動(dòng)）可以出發(fā)三個(gè)事件

• dragstart

• drag

• dragend

整個(gè)拖動(dòng)過程的組成： dragstart*1 + drag*n + dragend*1

拖放的目標(biāo)對(duì)象（不會(huì)發(fā)生移動(dòng)）可以觸發(fā)的事件——4個(gè)：

dragenter：拖動(dòng)著進(jìn)入

dragover：拖動(dòng)著懸停

dragleave：拖動(dòng)著離開

drop：釋放

整個(gè)拖動(dòng)過程的組成1： dragenter*1 + dragover*n + dragleave*1

整個(gè)拖動(dòng)過程的組成2： dragenter*1 + dragover*n + drop*1

dataTransfer：用于數(shù)據(jù)傳遞的“拖拉機(jī)”對(duì)象；

在拖動(dòng)源對(duì)象事件中使用e.dataTransfer屬性保存數(shù)據(jù)：

e.dataTransfer.setData( k, v )

在拖動(dòng)目標(biāo)對(duì)象事件中使用e.dataTransfer屬性讀取數(shù)據(jù)：

var value = e.dataTransfer.getData( k )

demo1：

<!DOCTYPE HTML> <html> <head><style type="text/css">#div1 {width: 1000px;height: 250px;padding: 10px;border: 1px solid #aaaaaa;}</style><script type="text/javascript">function allowDrop(ev) {console.log(ev);ev.preventDefault();}function drag(ev) {console.log(ev);ev.dataTransfer.setData("Text", ev.target.id);}function drop(ev) {console.log(ev);ev.preventDefault();var data = ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}</script> </head><body><p>請(qǐng)把圖片拖放到矩形中：</p><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br /><img id="drag1" src="./01.jpg" draggable="true" ondragstart="drag(event)" /></body> </html>

說明：

<!-- 1. 首先，為了使元素可拖動(dòng)，把 draggable 屬性設(shè)置為 true ： --> <img draggable="true" /> <!-- 2. 拖動(dòng)什么 - ondragstart 和 setData() 然后，規(guī)定當(dāng)元素被拖動(dòng)時(shí)，會(huì)發(fā)生什么。 在上面的例子中，ondragstart 屬性調(diào)用了一個(gè)函數(shù)，drag(event)，它規(guī)定了被拖動(dòng)的數(shù)據(jù)。 dataTransfer.setData() 方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值： --> function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } <!-- 在這個(gè)例子中，數(shù)據(jù)類型是 "Text"，值是可拖動(dòng)元素的 id ("drag1")。 --><!-- 3.放到何處 - ondragover --> <!-- ondragover 事件規(guī)定在何處放置被拖動(dòng)的數(shù)據(jù)。 默認(rèn)地，無法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置，我們必須阻止對(duì)元素的默認(rèn)處理方式。 這要通過調(diào)用 ondragover 事件的 event.preventDefault() 方法： --> event.preventDefault()<!-- 4.進(jìn)行放置 - ondrop 當(dāng)放置被拖數(shù)據(jù)時(shí)，會(huì)發(fā)生 drop 事件。 在上面的例子中，ondrop 屬性調(diào)用了一個(gè)函數(shù)，drop(event)： --> function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }/* 代碼解釋： 調(diào)用 preventDefault() 來避免瀏覽器對(duì)數(shù)據(jù)的默認(rèn)處理（drop 事件的默認(rèn)行為是以鏈接形式打開） 通過 dataTransfer.getData("Text") 方法獲得被拖的數(shù)據(jù)。該方法將返回在 setData() 方法中設(shè)置為相同類型的任何數(shù)據(jù)。 被拖數(shù)據(jù)是被拖元素的 id ("drag1") 把被拖元素追加到放置元素（目標(biāo)元素）中 */

?

[demo2](http://www.w3school.com.cn/tiy/t.asp?f=html5_draganddrop2)

<!DOCTYPE HTML> <html> <head><style type="text/css">#div1,#div2 {float: left;width: 1000px;height: 250px;margin: 10px;padding: 10px;border: 1px solid #aaaaaa;}</style><script type="text/javascript">function allowDrop(ev) {ev.preventDefault();}function drag(ev) {ev.dataTransfer.setData("Text", ev.target.id);}function drop(ev) {ev.preventDefault();var data = ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}</script> </head><body><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="./01.jpg" draggable="true" ondragstart="drag(event)" id="drag1" /></div><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div></body></html>

?

6.Web Worker

web worker 是運(yùn)行在后臺(tái)的 JavaScript，不會(huì)影響頁面的性能。

• 當(dāng)在 HTML 頁面中執(zhí)行腳本時(shí)，頁面的狀態(tài)是不可響應(yīng)的，直到腳本已完成。

• web worker 是運(yùn)行在后臺(tái)的 JavaScript，獨(dú)立于其他腳本，不會(huì)影響頁面的性能。可以繼續(xù)做任何愿意做的事情：點(diǎn)擊、選取內(nèi)容等等，而此時(shí) web worker 在后臺(tái)運(yùn)行。

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

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

• 所有主流瀏覽器均支持 web worker，除了 Internet Explorer。

demo

Web Workers 和 DOM

由于 web worker 位于外部文件中，它們無法訪問下例 JavaScript 對(duì)象：

• window 對(duì)象

• document 對(duì)象

• parent 對(duì)象

7.Web Storage

認(rèn)識(shí)本地存儲(chǔ)

會(huì)話控制

8.WebSocket-----HTML 5 服務(wù)器發(fā)送事件

WebSocket是HTML5開始提供的一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議。

在WebSocket API中，瀏覽器和服務(wù)器只需要做一個(gè)握手的動(dòng)作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。

兩者之間就直接可以數(shù)據(jù)互相傳送。瀏覽器通過 JavaScript 向服務(wù)器發(fā)出建立 WebSocket 連接的請(qǐng)求，連接建立以后，客戶端和服務(wù)器端就可以通過 TCP 連接直接交換數(shù)據(jù)。

當(dāng)你獲取 Web Socket 連接后，你可以通過 send() 方法來向服務(wù)器發(fā)送數(shù)據(jù)，并通過 onmessage 事件來接收服務(wù)器返回的數(shù)據(jù)。

9.HTML 5 應(yīng)用程序緩存

使用 HTML5，通過創(chuàng)建 cache manifest 文件，可以輕松地創(chuàng)建 web 應(yīng)用的離線版本。

什么是應(yīng)用程序緩存（Application Cache）？

HTML5 引入了應(yīng)用程序緩存，這意味著 web 應(yīng)用可進(jìn)行緩存，并可在沒有因特網(wǎng)連接時(shí)進(jìn)行訪問。

應(yīng)用程序緩存為應(yīng)用帶來三個(gè)優(yōu)勢(shì)：

• 離線瀏覽 - 用戶可在應(yīng)用離線時(shí)使用它們

• 速度 - 已緩存資源加載得更快

• 減少服務(wù)器負(fù)載 - 瀏覽器將只從服務(wù)器下載更新過或更改過的資源。

?

轉(zhuǎn)載于:https://www.cnblogs.com/houfee/p/10382148.html

總結(jié)

以上是生活随笔為你收集整理的HTML5 之 简单汇总的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。