最近大家有沒有發現，很多微信公眾號的動態內容變多了？我們常常可以看到，公眾號內容中有很多動態圖片甚至動畫，還可以通過手指滑動切換頁面，或者有一些小的點擊互動。
這種看起來有點高級的小作品，其實是都是“互動形式的多媒體廣告頁面”，它是 H5 的移動端網頁。
什么是 H5
H5 其實是縮寫，我們一般所說的 H5，其實是指 HTML5，即第五代超文本標記語言。而超文本標記語言 HTML，是一種標記語言。它包括一系列標簽，通過這些標簽可以將網絡上的文檔格式統一，使分散的 Internet 資源連接為一個邏輯整體。需要注意的是 HTML 不是一種編程語言，因此 HTML 的上手極為方便。那為什么 HTML 直到第 5 代才這么熱門的出現？
因為以前網頁主要在電腦中訪問，而如今訪問網頁的設備逐漸從電腦端轉移到了移動設備。可是原本的網頁如果用手機查看是很難看清楚內容的，這才推動了 HTML5 的出現。
而 HTML5 也不負眾望，帶着一些全新特性幾乎完美的達成了適配多種設備的需求。
HTML5 的特性
語義化標簽
語義是指對一個詞或者句子含義的正確解釋，HTML 語義化讓我們僅通過 HTML 元素就能看出頁面的大致結構。HTML5 新增的語義化元素，讓我們能夠通過標簽名判斷標簽內容。這些元素分別是：
-
標簽通常放在頁面或頁面某個區域的頂部，用來設置頁眉； -
標簽中的內容比較獨立，可以是一篇新聞報道，一篇博客，它可以獨立於頁面的其他內容進行閱讀； -
標簽表示頁面中的一個區域，通常對頁面進行分塊或對內容進行分段， 標簽和 標簽可以互相嵌套；
增強型表單
之前的 HTML 版本的功能，比如日期、顏色、文本框等，是需要單獨的控件進行支持的，而到了 HTML5，這些常用功能直接進入了表單標簽中，比如你可以直接通過
除此外， HTML 還增加了新的表單屬性：
-
placeholder 提供對輸入域的提示值
-
required 規定表單提交前輸入域是否必填
-
pattern 規定用於驗證 input 域的正則表達式
-
min 規定輸入域允許的最小值
-
max 規定輸入域允許的最大值
-
multiple 輸入域可以選擇多個值，適用於 email 和 file 類型
DOM 擴展
HTML5 為 DOM 作了一些專門擴展，包括 classList 屬性、焦點管理、HTMLDocument 變化、字符集屬性、插入標記、getElementByClassName() 方法等。這其中 getElementByClassName() 方法是最受歡迎的，它可以讓添加事件處理程序不再局限於使用 ID 或標簽名 (getElementsByTagName)。
媒體元素
HTML5 新增了兩個與媒體相關的標簽
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 了不是么？