結(jié)構(gòu)化，樣式脫離的 HTML 文檔，極大提高了文檔的表達(dá)力，不管是機(jī)器還是人類(lèi)都能更快的理解文檔的結(jié)構(gòu)，這種文檔就被稱(chēng)為語(yǔ)義化文檔。

語(yǔ)義化主要體現(xiàn)在以下幾個(gè)方面：

寫(xiě)過(guò) HTML5 的都知道大概有哪些標(biāo)簽新加了進(jìn)來(lái)，這里大致羅列一下

可能有些朋友會(huì)納悶，這些東西其實(shí)吧，也不是那么的重要，用 div + css 也都能實(shí)現(xiàn)，而且各個(gè)瀏覽器上表現(xiàn)的還都一致，還不用考慮兼容問(wèn)題。那么為什么這里還提呢？

試想一個(gè)問(wèn)題？

如果你是瀏覽器，或者說(shuō)是解析 HTML5 文本內(nèi)容的程序，你會(huì)怎么看待 HTML4 與 HTML5 ？

首先第一個(gè)需要解決的問(wèn)題：顯示頁(yè)面，兩者都能解析，生成樹(shù)狀結(jié)構(gòu)，并成功的顯示頁(yè)面，這也是大部分用戶(hù)所需要的。在這方面兩者平局，HTML5 沒(méi)有任何的優(yōu)勢(shì)。

那么現(xiàn)在第二個(gè)問(wèn)題，識(shí)別該文檔，這或許不是大部分用戶(hù)的需求，但小部分用戶(hù)并不意味著人數(shù)少。

相信大部分朋友都有使用搜索引擎的習(xí)慣，那么搜索引擎是如何幫你找到這個(gè)網(wǎng)頁(yè)的呢？

搜索引擎通過(guò)適當(dāng)?shù)牟呗越馕鐾ㄟ^(guò)爬蟲(chóng)抓取到的網(wǎng)頁(yè)內(nèi)容，將該文章進(jìn)行分類(lèi)，通過(guò)用戶(hù)給的搜索詞進(jìn)行匹配，最終將結(jié)果呈現(xiàn)給用戶(hù)，爬蟲(chóng)的解析策略，面對(duì) HTML4 時(shí)，需要識(shí)別出特定的 div 而這個(gè)特定的 div 該如何去找呢？經(jīng)驗(yàn)？特定字符串？面對(duì) HTML4 ，只能得到一個(gè)個(gè)的 div 而哪個(gè) div ，emmm... 不好找。面對(duì) HTML5 呢？程序從結(jié)構(gòu)就能大致理解文檔的結(jié)構(gòu)，進(jìn)而識(shí)別出該篇文章的大體內(nèi)容。

問(wèn)題二可以簡(jiǎn)單認(rèn)為：我們需要生成文章大綱，一篇文章可以有幾部分的內(nèi)容組成，而規(guī)范這些內(nèi)容的就是大綱，相信有寫(xiě)過(guò)文章的都知道大綱的作用，可以清醒的表達(dá)出內(nèi)容，那么 HTML4 呢，一堆 div 分不清哪個(gè)是主體，哪個(gè)是次要內(nèi)容，但 HTML5 呢，結(jié)構(gòu)清晰，解析程序也能很快的生成文檔的大綱。

大綱只能用在搜索引擎嗎？并不是，閱讀設(shè)備就很需要大綱生成目錄，無(wú)障礙設(shè)備可以識(shí)別到文檔的主體內(nèi)容等等。

看到這里，相信大家對(duì)于語(yǔ)義化標(biāo)簽的重要性也有了了解，使用成本幾乎為 0，但文檔的清晰程度卻上了一個(gè)層級(jí)，干嘛不用呢？

表單類(lèi)型（type）代表了改表單內(nèi)容的類(lèi)型，新增了以下幾個(gè)

tel

search

url

email

date

time

number

range

color

以上為 HTML5 語(yǔ)義化的具體呈現(xiàn)，希望大家擁抱并使用 HTML5 的新標(biāo)簽。

HTML5 的上一代標(biāo)準(zhǔn) HTML4 于 1999 年發(fā)布，當(dāng)時(shí)互聯(lián)網(wǎng)還處于圖文混排的時(shí)代，通訊也不是很發(fā)達(dá)，數(shù)據(jù)的交互受限于網(wǎng)速，但是近 20 年來(lái)數(shù)據(jù)通訊的高速發(fā)展圖文混排已經(jīng)不能滿足用戶(hù)的需求了，由于瀏覽器并不支持視頻促成了 Flash/ActionScript 的發(fā)展，但是由于 Flash 的繁瑣（需要裝插件）以及安全問(wèn)題，Apple 拒絕使用 Flash，之后各大瀏覽器廠商也開(kāi)始重視 Flash 的安全問(wèn)題，提出了多媒體標(biāo)簽，直到 HTML5 規(guī)范化了多媒體應(yīng)用。

相關(guān)多媒體標(biāo)簽

Audio

Video

建議查看英文的相關(guān)文檔，中文的翻譯文檔好像還沒(méi)有及時(shí)跟進(jìn)。

除了多媒體標(biāo)簽的更新，這里同時(shí)還列舉下一些與顯示相關(guān)的內(nèi)容：

Canvas

畫(huà)布，可以使用 JavaScript 在改元素規(guī)定的區(qū)域內(nèi)進(jìn)行繪畫(huà)，文檔說(shuō)明。

WebGL

光柵化的圖片繪畫(huà)引擎，主要用于 3D 制作，文檔說(shuō)明，以及WebGL 理論基礎(chǔ)

Camera API

通過(guò)Camera API，你可以使用手機(jī)的攝像頭拍照，然后把拍到的照片發(fā)送給當(dāng)前網(wǎng)頁(yè)。

SVG

現(xiàn)在可以直接在 HTML5 文檔中寫(xiě) SVG（可縮放矢量圖形），一種用于描述基于二維的矢量圖形的，基于 XML 的標(biāo)記語(yǔ)言。文檔說(shuō)明。

MathML

MathML（Mathematical Markup Language），是一種基于 XML 的標(biāo)記語(yǔ)言，用以描述數(shù)學(xué)公式，但目前瀏覽器的支持力度有點(diǎn)低。具體可以查看文檔說(shuō)明

HTML5 之前，JavaScript 只能通過(guò) XMLHttpRequest 與后端程序進(jìn)行交互，隨著 HTML5 標(biāo)準(zhǔn)的提出，前端可以使用各種各樣的姿勢(shì)與后端進(jìn)行溝通，數(shù)據(jù)的交互變的簡(jiǎn)單，靈活。

XMLHttpRequest，雖然在實(shí)際開(kāi)發(fā)中幾乎很難使用到它，但是對(duì)于它的封裝庫(kù)我們卻經(jīng)常使用，比如 axios $.ajax 。雖然說(shuō)封裝的庫(kù)降低使用成本，但源頭是復(fù)雜的，而且 XMLHttpRequest 是基于回調(diào)的異步模式，雖然 axios 進(jìn)行了 Promise 化，但畢竟不是原生支持。因此一個(gè)基于 Promise 的請(qǐng)求 API 于 HTML5 標(biāo)準(zhǔn)內(nèi)提出：fetch。

一個(gè)簡(jiǎn)單的 fetch 例子

fetch("http://example.com/movies.json")
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

fetch 支持兩個(gè)參數(shù)，

資源地址

請(qǐng)求參數(shù)，用于設(shè)置請(qǐng)求方式，請(qǐng)求頭，請(qǐng)求體等內(nèi)容，一個(gè) JavaScript 對(duì)象。

學(xué)習(xí)資源：

MDN 使用 Fetch

WHATWG Fetch

在 HTML5 出現(xiàn)之前，做一個(gè)實(shí)時(shí)聊天的 web 項(xiàng)目是極其困難的，由于之前的版本僅支持瀏覽器主動(dòng)向服務(wù)器進(jìn)行發(fā)送內(nèi)容，必須先有請(qǐng)求才能有服務(wù)器響應(yīng)的數(shù)據(jù)，簡(jiǎn)單的來(lái)說(shuō)服務(wù)器并不能主動(dòng)將數(shù)據(jù)提交給客戶(hù)端。

面對(duì)這些需求，大家的做法通常是輪詢(xún)，通過(guò)前端設(shè)置一個(gè)定時(shí)器，每隔固定的時(shí)間去請(qǐng)求服務(wù)器資源，即使服務(wù)器并沒(méi)有發(fā)生數(shù)據(jù)更新。這浪費(fèi)了極大的服務(wù)器資源，那么有沒(méi)有一種方式支持服務(wù)器推送呢？

有！WebSocket 是 HTML5 新增的一種協(xié)議，目的是在瀏覽器和服務(wù)器之間建立一個(gè)雙向數(shù)據(jù)通道，瀏覽器可以推送數(shù)據(jù)到服務(wù)端，服務(wù)端也可以推送數(shù)據(jù)到客戶(hù)端。WebSocket 對(duì)于前端來(lái)說(shuō)僅是一個(gè)簡(jiǎn)單的 API，最重要的是服務(wù)端的支持。

WebSocket 的客戶(hù)端代碼示例

// 創(chuàng)建鏈接
const socket = new WebSocket("ws://localhost:8080");

// 鏈接開(kāi)啟事件
socket.addEventListener("open", function (event) {
    // 向服務(wù)端推送數(shù)據(jù)
    socket.send("Hello Server!");
});

// 服務(wù)端推送事件，event.data 即為服務(wù)端推送的數(shù)據(jù)
socket.addEventListener("message", function (event) {
    console.log("Message from server ", event.data);
});

至于服務(wù)端如何實(shí)現(xiàn)，不同的語(yǔ)言有不同的實(shí)現(xiàn)，比較出名的是 Node 下的 Socket.IO，如果擔(dān)心服務(wù)端語(yǔ)言實(shí)現(xiàn)困難，不妨用 Node 搭建中間層，使用 Node 進(jìn)行與客戶(hù)端的溝通，并將數(shù)據(jù)交由服務(wù)端程序處理。當(dāng)然也可以查看 MDN 的文章：編寫(xiě) WebSocket 服務(wù)器

一些資源

WHATWG Web sockets

websocket.org HTML5 WebSocket

MDN WebSockets

fetch 實(shí)現(xiàn)了請(qǐng)求的 Promise 化，WebSocket 實(shí)現(xiàn)了雙工通信，那么 EventSource 又是什么？

簡(jiǎn)單的來(lái)說(shuō)，EventSource 實(shí)現(xiàn)了服務(wù)端對(duì)客戶(hù)端的單向通信，可以理解為客戶(hù)端是訂閱者，服務(wù)端是內(nèi)容發(fā)布者，也就是發(fā)布訂閱模式的實(shí)現(xiàn)。

一個(gè)簡(jiǎn)單的例子

// 開(kāi)始訂閱
var evtSource = new EventSource("sse.php");
var eventList = document.querySelector("ul");

// 服務(wù)端發(fā)布數(shù)據(jù)回調(diào)
evtSource.onmessage = function(event) {
    // event.data 即為服務(wù)端發(fā)布的數(shù)據(jù)
    console.log("Message from server ", event.data);
}

同樣的前端代碼很簡(jiǎn)單，服務(wù)端需要實(shí)現(xiàn)該通信方式需要有一定的成本。具體可以查看一下文檔

WHATWG EventSource

MDN EventSource

see.php 編寫(xiě)

WebRTC（網(wǎng)頁(yè)即時(shí)通信），是一個(gè)支持網(wǎng)頁(yè)瀏覽器進(jìn)行實(shí)時(shí)語(yǔ)音對(duì)話或視頻對(duì)話的 API。由于該 API 目前并未納入標(biāo)準(zhǔn)中，這里就不過(guò)多的深入了，可以通過(guò)以下文檔進(jìn)行了解：

MDN WebRTC API

W3C WebRTC 1.0

在 HTML5 出現(xiàn)之前，前端開(kāi)發(fā)者僅能通過(guò) cookie 來(lái)存儲(chǔ)用戶(hù)在不同頁(yè)面之間跳轉(zhuǎn)的數(shù)據(jù)，但使用 cookie 來(lái)存儲(chǔ)數(shù)據(jù)其意義上是不對(duì)的，不能說(shuō) cookie 可以在同域名下通用，就讓它來(lái)攜帶各種各樣的數(shù)據(jù)，cookie 應(yīng)該是用來(lái)標(biāo)志用戶(hù)身份的。HTML5 出現(xiàn)之后，規(guī)范了數(shù)據(jù)的存儲(chǔ)，cookie 也回到了原始的用途。

相信大家對(duì)于該 API 已經(jīng)熟悉的不能在熟悉了，storage 分為兩部分，sessionStorage 與 localStorage，擁有同樣的方法：

setItem

getItem

removeItem

clear

localStorage 會(huì)將數(shù)據(jù)永久的存儲(chǔ)下來(lái)（當(dāng)然用戶(hù)可以主動(dòng)清楚），sessionStorage 中設(shè)置的數(shù)據(jù)當(dāng)用戶(hù)關(guān)閉頁(yè)面后會(huì)清除。

WHATWG Web storage

MDN Storage

小型的數(shù)據(jù)有 storage 已經(jīng)夠用，那么瀏覽器端如何進(jìn)行大量數(shù)據(jù)的存儲(chǔ)呢？IndexedDB 就是 HTML5 給出的答案。IndexedDB 是瀏覽器內(nèi)置的一個(gè)數(shù)據(jù)庫(kù)，用于存儲(chǔ)結(jié)構(gòu)化數(shù)據(jù)。但這個(gè)數(shù)據(jù)庫(kù)是異步存取數(shù)據(jù)的，說(shuō)實(shí)話有點(diǎn)難使用，如果使用他，那基本上所有的代碼都在 then 方法里了。考慮使用吧。

可以通過(guò)使用 IndexedDB進(jìn)行學(xué)習(xí)和使用。

querySelector 使用 CSS 選擇器進(jìn)行選擇元素，僅選取匹配元素中的第一個(gè)。

querySelectorAll 使用 CSS 選擇器進(jìn)行選擇元素，返回所有匹配的元素。

可以通過(guò)在標(biāo)簽上使用 data-* 設(shè)置與元素綁定的數(shù)據(jù)，JavaScript 可以通過(guò) dataset 獲取或設(shè)置。

const p = document.querySelector("#title");
p.dataset.text // hello

prepend 在規(guī)定標(biāo)簽的最前面添加元素

append 在規(guī)定標(biāo)簽最后面添加元素

firstElementChild 獲取規(guī)定標(biāo)簽中的第一個(gè)子元素

lastElementChild 獲取規(guī)定標(biāo)簽中的最后一個(gè)子元素

previousElementSibling 獲取前一個(gè)兄弟元素

nextElementSibling 獲取后一個(gè)兄弟元素

Node.classList.add 添加類(lèi)名

Node.classList.remove 移除類(lèi)名

Node.classList.toggle 切換類(lèi)名

Node.classList.contains 檢測(cè)是否有類(lèi)名

在 HTML4 中想實(shí)現(xiàn)元素拖拽，我們需要這樣一個(gè)過(guò)程，獲取元素，設(shè)置元素定位，與需要被拖入的元素進(jìn)行碰撞檢測(cè)，檢測(cè)完成后進(jìn)行拖入操作。在 HTML5 中規(guī)范了這一過(guò)程。

相關(guān)事件

dragstart 設(shè)置在拖動(dòng)元素上，標(biāo)志拖動(dòng)開(kāi)始

dragenter 設(shè)置在拖入元素上，標(biāo)志有元素開(kāi)始拖入到該元素內(nèi)

dragover 設(shè)置在拖入元素上，標(biāo)志元素完全拖入該元素

dragleave 設(shè)置在拖入元素上，標(biāo)志元素即將離開(kāi)該元素

drop 設(shè)置在拖入元素上，標(biāo)志拖動(dòng)元素放下

拖動(dòng)元素與拖入元素可以通過(guò) e.dataTransfer.getData(xxx) e.dataTransfer.setData(xxx, xxx) 進(jìn)行數(shù)據(jù)交互。

MutationObserver 字面意思為變動(dòng)觀察器，用來(lái)觀察文檔節(jié)點(diǎn)的變動(dòng)。相關(guān)文章

了解 HTML5 中的 MutationObserver

MutationObserver

DOM 中，接觸最多的也就這些內(nèi)容了，更為詳細(xì)的內(nèi)容可以通過(guò)DOM STANDARD查看。

在什么是 JAVASCRIPT中，我們提到過(guò) BOM 并沒(méi)有相關(guān)的標(biāo)準(zhǔn)去規(guī)范它，HTML5 中一些沒(méi)有歸到 DOM 中 API 更新就歸到這。

我們都知道 JavaScript 是以單線程的形式運(yùn)行在客戶(hù)端，這就避免不了當(dāng)進(jìn)行大規(guī)模的數(shù)據(jù)運(yùn)算時(shí)所帶來(lái)的堵塞問(wèn)題，為解決這一問(wèn)題 HTML5 提出了 Web Workers 的概念，并最終納入規(guī)范。使用 Web Workers 可以將于頁(yè)面渲染無(wú)關(guān)的數(shù)據(jù)運(yùn)算代碼放入另一個(gè)線程，線程間通過(guò) postMessage 發(fā)送數(shù)據(jù)，通過(guò) onmessage 回調(diào)獲取數(shù)據(jù)。

一個(gè)簡(jiǎn)單的例子

// workers.js
let i = 0;

function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout(timedCount, 500);
}
timedCount();

const w = new Worker("workers.js");
w.onmessage=function(event){
    console.log("Message from worker ", event.data);
};

相關(guān)資源：

WHATWG Worker

MDN Worker

目前大火的 PWA 應(yīng)用，其核心 Service Worker 其實(shí)也是 Web Workers 的一個(gè)實(shí)現(xiàn)。 Service Worker 使用編程的方式來(lái)進(jìn)行資源的緩存，與后臺(tái)進(jìn)行數(shù)據(jù)同步等內(nèi)容。雖然該內(nèi)容已在不少的瀏覽器上實(shí)現(xiàn)，但標(biāo)準(zhǔn)仍在草案階段，等出標(biāo)準(zhǔn)規(guī)范在詳細(xì)介紹。

相關(guān)資源

W3C Service Workers

在 HTML5 之前，前端開(kāi)發(fā)者只能通過(guò) history 對(duì)象進(jìn)行前進(jìn)后退的動(dòng)作，但卻不能在不刷新當(dāng)前頁(yè)面的情況下進(jìn)行 url 修改，在 HTML5 之前，單頁(yè)應(yīng)用僅能通過(guò) hash 模式進(jìn)行路由管理，但通過(guò) HTML5 新提出的 history API ，單頁(yè)應(yīng)用就能像正常應(yīng)用那樣管理頁(yè)面的 url 了。通過(guò)以下 3 個(gè)方法即可：

pushState 不刷新頁(yè)面導(dǎo)航到指定 URL 并產(chǎn)生歷史記錄。

replaceState 不刷新頁(yè)面并將頁(yè)面當(dāng)前 URL 替換為指定 URL，不產(chǎn)生歷史記錄。

popstate 事件 在當(dāng)前頁(yè)面點(diǎn)擊返回時(shí)，window 對(duì)象會(huì)觸發(fā)該事件，可以使用 addEventListener 進(jìn)行監(jiān)聽(tīng)。

相關(guān)資源

MDN Drag and Drop API

WHATWG Drag and drop

Drag Drop---API---拖拽事件

通知瀏覽器，在下一次重繪之前調(diào)用指定 callback。由于重繪與屏幕刷新率掛鉤，因此該 API 的調(diào)用也與屏幕刷新率掛鉤，可以使用該 API 進(jìn)行一些復(fù)雜運(yùn)算的分解，將任務(wù)放在每次刷新的間隔中，這樣就不會(huì)產(chǎn)生屏幕要刷新了但瀏覽器卻能及時(shí)繪制出頁(yè)面的尷尬情況出現(xiàn)，使得頁(yè)面顯示平滑，不掉幀。因此該 API 的出現(xiàn)促進(jìn)了 Canvas 的發(fā)展，而 Canvas 的發(fā)展又促進(jìn)了頁(yè)游的發(fā)展。

requestAnimationFrame(callback)

如果想實(shí)現(xiàn)類(lèi)似定時(shí)器的效果，只需要在 callback 中再次調(diào)用 requestAnimationFrame 即可。

相關(guān)資源

MDN requestAnimationFrame

Element.requestFullscreen() 將當(dāng)前元素全屏展示

Document.exitFullscreen() 取消全屏顯示

相關(guān)資源

MDN 全屏 API

navigator.geolocation.watchPosition() 監(jiān)聽(tīng)地理位置信息，當(dāng)發(fā)生改變時(shí)，觸發(fā)回調(diào)

navigator.geolocation.getCurrentPosition() 獲取地理位置信息

以上兩方法都需要傳入，成功回調(diào)和失敗回調(diào)，分別為參一和參二。

相關(guān)資源

MDN 使用地理位置定位

在什么是 CSS？中，我們提到過(guò)，CSS 標(biāo)準(zhǔn)被 W3C 采納，并最終成為 HTML 標(biāo)準(zhǔn)的一部分，因此 CSS 內(nèi)容的更新也算是 HTML5 更新的一部分。

這部分多帶帶說(shuō)吧。

慣例，問(wèn)幾個(gè)問(wèn)題

HTML5 涵蓋了那幾方便面的更新？

通信方式有什么新姿勢(shì)？

語(yǔ)義化的體現(xiàn)，以及語(yǔ)義化的作用？

js 如何更好的處理數(shù)據(jù)而不影響頁(yè)面渲染？

單頁(yè)應(yīng)用的 history 是基于那些 api 實(shí)現(xiàn)的？

談?wù)劯惺?/p>

隨著 HTML5 的更新，前端在也不是切圖仔，瀏覽器也開(kāi)始做為了一個(gè) GUI 工具存在，而不僅是為了展示頁(yè)面。相信隨著技術(shù)的發(fā)展，當(dāng)通訊延遲降低到一定程度后，喬幫主的設(shè)想 all in browser 將會(huì)成為現(xiàn)實(shí)。

HTML5

HTML5 Differences from HTML4

HTML 5.1 2nd Edition

HTML 5.2

WHATWG

該系列所有問(wèn)題由 minimo 提出，愛(ài)你喲~~~