HTML5是萬維網的核心語言、標准通用標記語言下的一個應用超文本標記語言（HTML）的第五次重大修改，為了順應整個互聯網時代變遷，使得人們能夠以更好的方式去進行網頁結構搭建，HTML5應運而生。為了更好地處理今天的互聯網應用，HTML5添加了很多新元素及功能，比如: 圖形的繪制，多媒體內容，更好的頁面結構，更好的形式 處理，和幾個api拖放元素，定位，包括網頁 應用程序緩存，存儲，網絡工作者等。
HTML5新增了如下幾個方面你的特性：
一、語義特性
對HTML結構語義化的好處：
1，這樣有利於SEO：和搜索引擎建立良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標簽來確定上下文和各個關鍵字的權重；
2，方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以有意義的方式來渲染網頁；
3，便於團隊開發和維護，語義化更具可讀性，遵循W3C標准的團隊都遵循這個標准，可以減少差異化。
常見的語義化標簽，見名知義
<article>：定義頁面獨立的內容區域；
<aside>：定義頁面的側邊欄內容；
<command>：定義命令按鈕，比如單選按鈕、復選框或按鈕
<details>：用於描述文檔或文檔某個部分的細節
<dialog>:定義對話框，比如提示框
<summary>：包含details元素的標題
<figure>：規定獨立的流內容（圖像、圖表、照片、代碼等）
<footer>：定義了文檔的尾部區域
<mark>：定義帶有記號的文本
<header>:定義了文檔的頭部區域
<meter>：定義度量衡。僅用於已知最大和最小值的度量
<nav> ：定義導航鏈接 的部分
<progress>:定義任何類型的任務和進度
<section>：定義文檔中的節
<time>:定義日期或時間
<address> 標簽定義文檔或文章的作者/擁有者的聯系信息。
二、增強型表單
HTML5 擁有多個新的表單 Input 輸入類型。這些新特性提供了更好的輸入控制和驗證。
| 輸入類型 |
描述 |
| color |
主要用於選取顏色 |
| date |
從一個日期選擇器選擇一個日期 |
| datetime |
選擇一個日期（UTC 時間） |
| datetime-local |
選擇一個日期和時間 (無時區) |
| |
包含 e-mail 地址的輸入域 |
| month |
選擇一個月份 |
| number |
數值的輸入域 |
| range |
一定范圍內數字值的輸入域 |
| search |
用於搜索域 |
| tel |
定義輸入電話號碼字段 |
| time |
選擇一個時間 |
| url |
URL 地址的輸入域 |
| week |
選擇周和年 |
HTML5新增以下表單元素
| 表單元素 | 描述 |
| <datalist> |
元素規定輸入域的選項列表 使用 <input> 元素的 list 屬性與 <datalist> 元素的 id 綁定 |
| <keygen> |
提供一種驗證用戶的可靠方法 標簽規定用於表單的密鑰對生成器字段。 |
| <output> |
用於不同類型的輸出 比如計算或腳本輸出 |
HTML5 新增的表單屬性
- placehoder 屬性，簡短的提示在用戶輸入值前會顯示在輸入域上。即我們常見的輸入框默認提示，在用戶輸入后消失。
- required 屬性，是一個 boolean 屬性。要求填寫的輸入域不能為空
- pattern 屬性，描述了一個正則表達式用於驗證<input> 元素的值。
- min 和 max 屬性，設置元素最小值與最大值。
- step 屬性，為輸入域規定合法的數字間隔。
- height 和 width 屬性，用於 image 類型的 <input> 標簽的圖像高度和寬度。
- autofocus 屬性，是一個 boolean 屬性。規定在頁面加載時，域自動地獲得焦點。
- multiple 屬性 ，是一個 boolean 屬性。規定<input> 元素中可選擇多個值。
三、視頻和音頻
<audio> 標簽定義聲音，比如音樂或其他音頻流。
<video> 標簽定義視頻，比如電影片段或其他視頻流。
<audio>屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出現該屬性，則音頻在就緒后馬上播放。 |
| controls | controls | 如果出現該屬性，則向用戶顯示控件，比如播放按鈕。 |
| loop | loop | 如果出現該屬性，則每當音頻結束時重新開始播放。 |
| muted | muted | 規定視頻輸出應該被靜音。 |
| preload | preload | 如果出現該屬性，則音頻在頁面加載時進行加載，並預備播放。 如果使用 "autoplay"，則忽略該屬性。 |
| src | url | 要播放的音頻的 URL。 |
<video>屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出現該屬性，則視頻在就緒后馬上播放。 |
| controls | controls | 如果出現該屬性，則向用戶顯示控件，比如播放按鈕。 |
| height | pixels | 設置視頻播放器的高度。 |
| loop | loop | 如果出現該屬性，則當媒介文件完成播放后再次開始播放。 |
| muted | muted | 規定視頻的音頻輸出應該被靜音。 |
| poster | URL | 規定視頻下載時顯示的圖像，或者在用戶點擊播放按鈕前顯示的圖像。 |
| preload | preload | 如果出現該屬性，則視頻在頁面加載時進行加載，並預備播放。 如果使用 "autoplay"，則忽略該屬性。 |
| src | url | 要播放的視頻的 URL。 |
| width | pixels | 設置視頻播放器的寬度。 |
四、Canvas繪圖
<canvas> 標簽定義圖形，比如圖表和其他圖像。
canvas的知識下次專門整理一篇
五、SVG繪圖
SVG是指可伸縮的矢量圖形
SVG的知識下次專門整理一篇
SVG 與 Canvas兩者間的區別
SVG 是一種使用 XML 描述 2D 圖形的語言。
Canvas 通過 JavaScript 來繪制 2D 圖形。
SVG 基於 XML，這意味着 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。
在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發生變化，那么瀏覽器能夠自動重現圖形。
Canvas 是逐像素進行渲染的。在 canvas 中，一旦圖形被繪制完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。
六、地理定位
通過瀏覽器獲取當前用戶的所在地理坐標，以實現“LBS服務”（Location Based Service），如實時導航、周邊推薦。
情形1：用戶使用手機瀏覽器——可以根據內置GPS芯片讀取數據
情形2：用戶使用PC瀏覽器——可以根據電腦的IP地址進行反向查詢(需要很大的IP分配庫)
window.navigator.geolocation { getCurrentPosition: fn 用於獲取當前的位置數據 watchPosition: fn 監視用戶位置的改變 clearWatch: fn 清除定位監視 } // 獲取用戶定位信息 navigator.geolocation.getCurrentPosition( function(pos){ console.log('用戶定位數據獲取成功') //console.log(arguments); console.log('定位時間：',pos.timestamp) console.log('經度：',pos.coords.longitude) console.log('緯度：',pos.coords.latitude) console.log('海拔：',pos.coords.altitude) console.log('速度：',pos.coords.speed) }, //定位成功的回調 function(err){ console.log('用戶定位數據獲取失敗') //console.log(arguments); } //定位失敗的回調 )
七、拖放API
拖放是一種常見的特性，即抓取對象以后拖到另一個位置。在 HTML5 中，拖放是標准的一部分，任何元素都能夠拖放。
拖放的過程分為源對象和目標對象。源對象是指你即將拖動元素，而目標對象則是指拖動之后要放置的目標位置。
拖動的源對象(source)可能觸發的事件：
dragstart：拖動開始
drag：拖動中
dragend：拖動結束
整個拖動過程的組成： dragstart*1 + drag*n + dragend*1
拖放的目標對象(不會發生移動)可以觸發的事件——4個：
dragenter：拖動着進入
dragover：拖動着懸停
dragleave：拖動着離開
drop：釋放
整個拖動過程的組成1： dragenter*1 + dragover*n + dragleave*1
整個拖動過程的組成2： dragenter*1 + dragover*n + drop*1
注意：拖放API事件句柄中所有的事件對象都有一個dataTransfer屬性（數據運輸對象），用於在源對象和目標對象間傳遞數據。
源對象：event.dataTransfer.setData(key, value)
目標對象：var value = event.dataTransfer.getData(key)
八、Web Worker
背景：Chrome瀏覽器中發起資源請求的有6個線程；但是只有1個線程負責渲染頁面——稱為UI主線程——瀏覽器中所有的代碼只能由一個線程來執行。
問題：若瀏覽器加載了一個很耗時的JS文件(可能影響DOM樹結構)，瀏覽器必須等待該文件執行完成才會繼續執行后續的代碼(HTML/CSS/JS等)——如果一個JS文件要執行10s(可能有很深的循環/遞歸等科學計算/解密)，會發生什么？——執行耗時JS任務過程中，會暫停頁面中一切內容的渲染以及事件的處理。
解決方案：H5新特性——Web Worker
Worker的本質：就是一個執行指定任務的獨立線程；且該線程可以與UI主線程進行消息數據傳遞。使用方法：
HTML文件中：
var w = new Worker('js/x.js')
w.postMessage('發送給Worker線程的消息');
w.onmessage = function(e){
e.data; //來自Worker線程的消息
}
JS文件中：
onmessage = function(e){
var data = e.data; //接收UI線程的消息
//執行耗時任務....
postMessage(result); //給UI線程發送消息
}
注意：Worker任務不允許直接操作DOM樹，也不允許使用任何的BOM對象！需要的數據只能由UI主線程來傳遞，處理的結果也必須交由UI線程來顯示。
九、Web Storage
Web項目存儲數據常用的方案：
(1)服務器端存儲
1)數據庫存儲，如商品、用戶等核心數據
2)Session/內存存儲，如用戶的登錄信息
(2)客戶端存儲
3)Cookie存儲，如用戶偏好、訪問歷史，瀏覽器兼容性好但處理麻煩且容量限制
4)H5 WebStorage存儲，如用戶偏好、訪問歷史等安全要求的數據，老IE不兼容但易使用且容量大
H5WebStorage存儲具體涉及到兩個對象：
(1)window.sessionStorage：類數組對象，通過key=>value對存儲字符串數據——會話級存儲
添加數據：sessionStorage['key'] = 'value'
修改數據：sessionStorage['key'] = 'newValue'
刪除數據：delete sessionStorage['key']
獲得數據：var v = sessionStorage['key']
(2)window.localStorage：類數組對象，通過key=>value對存儲字符串數據——本地/跨會話級/永久存儲
添加數據：localStorage['key'] = 'value'
修改數據：localStorage['key'] = 'newValue'
刪除數據：delete localStorage['key']
獲得數據：var v = localStorage['key']
十、WebSocket
WebSocket是HTML5開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。在WebSocket API中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。瀏覽器通過 JavaScript 向服務器發出建立 WebSocket 連接的請求，連接建立以后，客戶端和服務器端就可以通過 TCP 連接直接交換數據。當你獲取 Web Socket 連接后，你可以通過 send() 方法來向服務器發送數據，並通過 onmessage 事件來接收服務器返回的數據。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <script type="text/javascript"> function WebSocketTest() { if ("WebSocket" in window) { alert("您的瀏覽器支持 WebSocket!"); // 打開一個 web socket var ws = new WebSocket("ws://localhost:9998/echo"); ws.onopen = function() { // Web Socket 已連接上，使用 send() 方法發送數據 ws.send("發送數據"); alert("數據發送中..."); }; ws.onmessage = function (evt) { var received_msg = evt.data; alert("數據已接收..."); }; ws.onclose = function() { // 關閉 websocket alert("連接已關閉..."); }; } else { // 瀏覽器不支持 WebSocket alert("您的瀏覽器不支持 WebSocket!"); } } </script> </head> <body> <div id="sse"> <a href="javascript:WebSocketTest()">運行 WebSocket</a> </div> </body> </html>
參考文章：https://blog.csdn.net/m0_37696296/article/details/81083402