HTML5 是 HTML 的最新穩(wěn)定版本吞瞪。
新增的布局元素
| 標(biāo)簽 | 語義 | display |
|---|---|---|
<nav> |
導(dǎo)航 | block |
<header> |
頁眉 | block |
<footer> |
頁腳 | block |
<section> |
和 <div> 類似与倡。 |
block |
<aside> |
頁面內(nèi)容之外的內(nèi)容蝎抽。 | block |
<dialog> |
窗口超棺。設(shè)置 open 屬性改變可見狀態(tài) |
block |
<article> |
文章 | block |
<details> |
細(xì)節(jié)着降。 | block |
<summary> |
<details> 的標(biāo)題技矮。 |
block |
<figure> |
分組化漆。 | block |
<figcaption> |
<figure> 的標(biāo)題估脆。 |
block |
<wbr> |
在換行時(shí)從何處分割。 | inline |
<time> |
日期座云。 | inline |
<mark> |
記號疙赠。 | inline |
<meter> |
預(yù)定義范圍內(nèi)的度量。 | inline-block |
<progress> |
進(jìn)度條朦拖。 | inline-block |
新增的圖像元素
-
<svg /><html> <head> <title>SVG</title> </head> <body> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="YellowGreen" stroke-width="3" fill="green" /> </svg> </body> </html><svg />用于繪制矢量圖形 (Scalable Vector Graphics) 圃阳。 -
<canvas /><html> <head> <title>canvas</title> </head> <body> <canvas id="myCanvas" width="200" height="100"> Your browser does not support the HTML5 canvas tag. </canvas> <script> var c = document.getElementById('myCanvas') var ctx = c.getContext('2d') ctx.font = '30px Arial' ctx.strokeText('Hello World', 10, 50) </script> </body> </html><canvas />用于繪制位圖。但它只是圖形容器璧帝，繪制圖形需要使用 JavaScript 腳本捍岳。
新增的媒體元素
-
<audio /><html> <head> <title>audio</title> </head> <body> <audio src="someaudio.wav" autoplay> Your browser does not support the audio element. </audio> <div>或者</div> <audio controls> <source src="horse.ogg" type="audio/ogg" /> <source src="horse.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> </body> </html><audio />用于播放音頻，支持 MP3睬隶、OGG锣夹、WAV 等格式。 -
<video /><html> <head> <title>video</title> </head> <body> <video src="movie.webm" autoplay> Your browser does not support the video element. </video> <div>或者</div> <video controls> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video element. </video> </body> </html><video />用于播放視頻苏潜，支持 MP4晕城、OGG、WEBM 等格式窖贤。 -
<embed /><html> <head> <title>embed</title> </head> <body> <embed src="movie.swf" width="320" height="240" /> </body> </html><embed />用于嵌入外部的媒體砖顷。
新增的表單相關(guān)元素贰锁、類型
-
表單類型
標(biāo)簽 語義 <datalist>下拉列表 <keygen>密鑰 <output>輸出的一些類型 -
input 類型
類型 語義 color顏色 date日期 datetime日期時(shí)間 datetime-local日期時(shí)間（本地） email郵件 month月份 number數(shù)字 range范圍 search搜索 tel電話 time時(shí)間 urlURL week周 -
input 屬性
屬性 語義 autocomplete自動完成 autofocus自動聚焦 list列表 multiple多選 pattern正則表達(dá)式 placeholder占位符 required必填 step步長 max/min最大值/最小值 width/heighttype="image" 的寬度/高度
新增的 API
-
localStorage 和 sessionStorage
// 存儲 localStorage.setItem('key', 'value') sessionStorage.setItem('key', 'value') // 讀取 localStorage.getItem('key') sessionStorage.getItem('key') // 刪除 localStorage.removeItem('key') sessionStorage.removeItem('key') // 清空 localStorage.clear() sessionStorage.clear()localStorage用于存儲的沒有截止日期的數(shù)據(jù)。在手動刪除之前滤蝠，都是可用的豌熄。sessionStorage用于存儲的當(dāng)前會話的數(shù)據(jù)。當(dāng)瀏覽器被關(guān)閉時(shí)數(shù)據(jù)就會被刪除物咳。localStorage和sessionStorage的存儲限制比cookie要大得多（至少 5MB）锣险，并且信息不會被傳輸?shù)椒?wù)器。 -
WebSocket
// 創(chuàng)建 const ws = new WebSocket('ws://localhost:8080') // 打開 ws.onopen = function () { console.log('open') } // 收到消息 ws.onmessage = function (ev) { console.log('message', ev.data) } // 關(guān)閉 ws.onclose = function () { console.log('close') } // 發(fā)生錯誤 ws.onerror = function (ev) { console.log('error', ev) }在 HTML5 之前览闰，Web 上想要推送內(nèi)容芯肤，大多采用輪詢的方式。在特定的的時(shí)間間隔（如每 1 秒）压鉴，通過 AJAX 向服務(wù)器發(fā)出 HTTP 請求崖咨，然后由服務(wù)器返回最新的數(shù)據(jù)。
這種方案雖然可行油吭，但存在明顯的缺點(diǎn)击蹲。瀏覽器需要不斷的向服務(wù)器發(fā)出請求，服務(wù)器也要不斷的處理請求婉宰。而且 HTTP 請求可能包含較長的頭部歌豺，其中真正有效的數(shù)據(jù)可能只是很小的一部分，顯然這樣會浪費(fèi)很多的帶寬等資源心包。
于是在這種情況下类咧，HTML5 定義了 WebSocket 協(xié)議。它能夠更實(shí)時(shí)地進(jìn)行通訊蟹腾，并且能更好的節(jié)省服務(wù)器資源和帶寬轮听。
-
拖放
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>DataTransfer.setData()/.getData()/.clearData()</title> <style> div { margin: 0em; padding: 2em; } #source { border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <body> <section> <div> <p id="source" draggable="true" ondragstart="handleDragStart(event)"> Select this element, drag it to the Drop Zone and then release the selection to move the element. </p> </div> <div id="target" ondrop="handleDrop(event)" ondragover="handleDragOver(event)" > Drop Zone </div> </section> <script> // 開始拖拽 function handleDragStart(ev) { console.log('dragStart') // 改變拖拽元素的樣式 ev.currentTarget.style.color = 'blue' ev.currentTarget.style.border = '1px dashed blue' // 將元素的 id 作為數(shù)據(jù)傳輸 ev.dataTransfer.setData('text/plain', ev.target.id) } // 拖拽進(jìn)入目標(biāo) function handleDragOver(ev) { console.log('dragOver') // prevent Default event ev.preventDefault() } // 在目標(biāo)區(qū)域松開鼠標(biāo) function handleDrop(ev) { console.log('Drop') ev.preventDefault() // 獲取拖拽元素的 id var data = ev.dataTransfer.getData('text') // 將拖拽元素加到目標(biāo)元素中 ev.target.appendChild(document.getElementById(data)) // 清除拖拽運(yùn)輸攜帶的數(shù)據(jù) ev.dataTransfer.clearData() } </script> </body> </html>拖放 API 可以使用戶在網(wǎng)頁上自由的使用鼠標(biāo)拖拽元素，開發(fā)者只需給元素設(shè)置
draggable屬性岭佳。在用戶拖拽期間血巍、之后將會觸發(fā)對應(yīng)的事件。事件名稱 說明 ondrag 當(dāng)拖拽元素或選中的文本時(shí)觸發(fā) ondragend 當(dāng)拖拽操作結(jié)束時(shí)觸發(fā) (比如松開鼠標(biāo)按鍵或敲“Esc”鍵) ondragenter 當(dāng)拖拽元素或選中的文本到一個可釋放目標(biāo)時(shí)觸發(fā) ondragexit 當(dāng)元素變得不再是拖拽操作的選中目標(biāo)時(shí)觸發(fā) ondragleave 當(dāng)拖拽元素或選中的文本離開一個可釋放目標(biāo)時(shí)觸發(fā)珊随。 ondragover 當(dāng)元素或選中的文本被拖到一個可釋放目標(biāo)上時(shí)觸發(fā)（每 100 毫秒觸發(fā)一次） ondragstart 當(dāng)用戶開始拖拽一個元素或選中的文本時(shí)觸發(fā)） ondrop 當(dāng)元素或選中的文本在可釋放目標(biāo)上被釋放時(shí)觸發(fā) -
獲取當(dāng)前位置
// 獲取當(dāng)前位置 navigator.geolocation.getCurrentPosition( // 成功回調(diào) pos => { const crd = pos.coords console.log('Your current position is:') console.log('Latitude : ' + crd.latitude) console.log('Longitude: ' + crd.longitude) console.log('More or less ' + crd.accuracy + ' meters.') }, // 失敗回調(diào) error => { console.warn('ERROR(' + err.code + '): ' + err.message) }, // 選項(xiàng) { enableHighAccuracy: true, // 是否要求高精度 timeout: 1000 * 60 * 5, // 超時(shí)時(shí)間 maximumAge: 0, // 最大緩存時(shí)間 } )
