最近大家有沒有發現，很多微信公眾號的動態內容變多了？我們常常可以看到，公眾號內容中有很多動態圖片甚至動畫，還可以通過手指滑動切換頁面，或者有一些小的點選互動。
這種看起來有點高階的小作品，其實是都是“互動形式的多媒體廣告頁面”，它是 H5 的移動端網頁。
什麼是 H5
H5 其實是縮寫，我們一般所說的 H5，其實是指 HTML5，即第五代超文字標記語言。而超文字標記語言 HTML，是一種標記語言。它包括一系列標籤，通過這些標籤可以將網路上的文件格式統一，使分散的 Internet 資源連線為一個邏輯整體。需要注意的是 HTML 不是一種程式語言，因此 HTML 的上手極為方便。那為什麼 HTML 直到第 5 代才這麼熱門的出現？
因為以前網頁主要在電腦中訪問，而如今訪問網頁的裝置逐漸從電腦端轉移到了移動裝置。可是原本的網頁如果用手機檢視是很難看清楚內容的，這才推動了 HTML5 的出現。
而 HTML5 也不負眾望，帶著一些全新特性幾乎完美的達成了適配多種裝置的需求。
HTML5 的特性
語義化標籤
語義是指對一個詞或者句子含義的正確解釋，HTML 語義化讓我們僅通過 HTML 元素就能看出頁面的大致結構。HTML5 新增的語義化元素，讓我們能夠通過標籤名判斷標籤內容。這些元素分別是：
- <header> 標籤通常放在頁面或頁面某個區域的頂部，用來設定頁首；
- <nav> 標籤可以用來定義導航連結的集合，點選連結可以跳轉到其他頁面；
- <article> 標籤中的內容比較獨立，可以是一篇新聞報導，一篇部落格，它可以獨立於頁面的其他內容進行閱讀；
- <section> 標籤表示頁面中的一個區域，通常對頁面進行分塊或對內容進行分段，<section> 標籤和 <article> 標籤可以互相巢狀；
- <aside> 標籤用來表示除頁面主要內容之外的內容，比如側邊欄；
- <footer> 標籤位於頁面或頁面某個區域的底部，用來設定頁尾，通常包含版權資訊，聯絡方式等。
增強型表單
之前的 HTML 版本的功能，比如日期、顏色、文字框等，是需要單獨的控制元件進行支援的，而到了 HTML5，這些常用功能直接進入了表單標籤中，比如你可以直接通過 <color> 控制顏色。
除此外， HTML 還增加了新的表單屬性：
- placeholder 提供對輸入域的提示值
- required 規定表單提交前輸入域是否必填
- pattern 規定用於驗證 input 域的正規表示式
- min 規定輸入域允許的最小值
- max 規定輸入域允許的最大值
- multiple 輸入域可以選擇多個值，適用於 email 和 file 型別
DOM 擴充套件
HTML5 為 DOM 作了一些專門擴充套件，包括 classList 屬性、焦點管理、HTMLDocument 變化、字符集屬性、插入標記、getElementByClassName() 方法等。這其中 getElementByClassName() 方法是最受歡迎的，它可以讓新增事件處理程式不再侷限於使用 ID 或標籤名 (getElementsByTagName)。
媒體元素
HTML5 新增了兩個與媒體相關的標籤 <audio> 和 <video>，它們讓開發人員不再需要依賴外掛就能在網頁中嵌入跨瀏覽器的音訊和視訊內容。<audio> 和 <video> 還包含了 autuplay、controls、src 等新屬性，讓開發人員在只需要少量 HTML 和 JavaScript 的就能編寫出自定義音視訊播放器。
Web Storage
Web Storage 有兩個主要目標：
- 提供一種在 cookie 之外儲存會話資料的途徑
- 提供一種儲存大量可以跨會話存在的資料的機制
常用的兩個物件分別是：
- localStorage：物件儲存某個特定會話的資料，該資料只保持到瀏覽器關閉。
- sessionStorage：目的是跨越會話儲存物件，但有特定的訪問限制，限制因瀏覽器而異。
WebSockets
HTML5 支援了 WebSockets。WebSockets 可以讓雙工、雙向通訊能在一個單獨連線上持久存在，WebSocket 協議更好的節省了伺服器資源和頻寬，並且能夠更實時地進行通訊。但是這個需要支援這種協議的專門伺服器，當然我們也可以選擇使用雲服務來解決。詳細可以檢視《聊聊 WebSocket，還有 HTTP》
HTML5 的優劣
任何特性如果單獨看可能並不能直白的體會到它的優勢，那我們就來直白地看一下這些特性讓 HTML5 相較之前的版本增加了多少優勢：
- 提高了使用者體驗並且提高了可用性：這些特性讓站點能夠加入更多多媒體元素，音視訊的使用更為廣泛。同時它替代了 FLASH 和 Silverlight
- 對網站而言：對 SEO 的抓取和索引都更為友好了，讓使用者能夠更容易的查詢到網站。
- 提高了移植性：這讓大量應用程式和遊戲不再侷限於 PC 端，而是能使用手機訪問。
- 節省開發成本：充分提現了“響應式設計”的概念，只要使用一套程式碼就可以適配任何裝置、任何系統、任何解析度。
不過作為一個全新的版本，HTML5 有著新東西都有的痛點。最標誌的就是不能被所有的瀏覽器支援，比如 IE，當前 IE9 以下的瀏覽器都不相容 HTML5。
但是在移動端裝置越來越普及，功能也越來越強大的當下。HTML5 佔領全部市場只是時間問題，你看微信公眾號內容都開始出現 HTML5 了不是麼？