關注HTML5有一段時間了，一直沒系統的去學習過。
對於HTML5的理解，之前停留在一些新的標籤，一些api可以完成部分js完成的事情，僅此而已。
前段時間HTML5定稿了，看了一些這方面的報導，進行了系統的學習，HTML5能做的遠比你想象的多。
是時候開始學習了。
本系列內容主要參考"HTML5高階程式設計"和W3SCHOOL.
本文是系列的第一篇： HTML5初窺。
文章提綱
-
概述
-
HTML5發展史 & 設計理念
-
HTML5新功能快速預覽
-
總結
概述
隨著未來桌面移動化程式的逐漸普及， 移動裝置與桌面裝置使用的技術架構不可避免會有趨同的走勢，HTML5 是唯一通吃 PC、Mac、iPhone、iPad、Android、Windows Phone 等主流平臺的跨平臺語言， 是時候採用HTML5+CSS3+JS構建新的Web應用了。
作為下一代Web語言，HTML5不再只是一種標記語言，它為下一代Web提供了全新的框架和平臺，包括提供免外掛的音訊視訊、影象動畫、本地儲存及更多酷炫的功能，是Web能夠輕鬆實現native的體驗。
HTML5發展史&設計理念
HTML5發展史
我把HTML5的發展史概括成三句話，詳細內容有興趣自己查閱，我就不多說了。
1993年HTML首次以因特網草案的形式釋出，從2.0，3.2，4.0直到1999年的4.01版，4.01後開始停滯不前，W3C掌握著HTML規範的控制權。
一組人2004年成立了WHATWA(Web Hypertext Application Technology Working Group), 他們創立了HTML5規範, 同時針對Web應用開發新功能。（Web 2.0就是這個時候被髮明的）
2006年,W3C又重新介入HTML，並於2008年釋出了HTML5的工作草案，上個月正式定稿。
HTML5設計理念
1. 相容性
支援現有文件並保持平滑過渡。
例如Google分析了上百萬的頁面，從中分析出DIV標籤的通用ID名稱，發現其中重複量很大， 很多開發人員都喜歡用DIV id="header"來標記頁首區域。HTML5於是直接定義了一個<header>標籤。
2. 實用性（效率和使用者優先）
HTML5規範是基於使用者優先準則編寫的，其宗旨是"使用者至上"，這意味著遇到無法解決的衝突時，規範會把使用者放到第一位，其次是頁面作者，再次是實現者（瀏覽器）,最後才考慮到理論的純粹性。
3. 化繁為簡
主要做了以下改進：
以瀏覽器原生能力代替複雜的js程式碼;
新的簡化的DOCTYPE;
新的簡化的字符集宣告;
簡單而強大的HTML5 API;
4. 通用訪問性
這個原則分為三個概念。
可訪問性：出於對殘障人士考慮，HTML5和WAI(Web Accessibility Initiative)和ARIA（Accessible Rich Internet Applications）做了緊密結合，WAI-ARIA中以螢幕閱讀器為基礎的元素已經被新增到HTML中。
媒體中立：如果可能的話，HTML5的功能在所有不同的裝置和平臺上應該都能正常執行。
支援所有語種：例如，新的<ruby>元素支援在東亞頁面排版中會用到的Ruby註釋。
Note
<ruby>定義和用法：
<ruby> 標籤定義 ruby 註釋（中文注音或字元）。
在東亞使用，顯示的是東亞字元的發音。
與 <ruby> 以及 <rt> 標籤一同使用：
ruby 元素由一個或多個字元（需要一個解釋/發音）和一個提供該資訊的 rt 元素組成，還包括可選的 rp 元素，定義當瀏覽器不支援 "ruby" 元素時顯示的內容。
HTML5新功能快速預覽
新的DOCTYPE和字符集
根據上面提到的HTML5設計準則化繁為簡，Web頁面的DOCTYPE被極大的簡化了。
HTML4 DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE>
誰能記得住？
請看HTML5 DOCTYPE
<!DOCTYPE html>
跟DOCTYPE一樣，字符集的宣告也被簡化了。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
現在成了
<meta charset=utf-8" />
新元素和舊元素
HTML5標記元素根據內容型別的不同，分成7大類：
內嵌
像文件中新增其他型別的內容，例如audio、video、canvas和iframe等
流
在文件和應用的body中使用的元素，例如form、h1和small等
標題
段落標題，例如h1、h2和hgroup等
互動
與使用者互動的內容，例如button和textarea等
後設資料
通常出現在頁面的head中，設定頁面其他部分的表現和行為，例如script、style和title等
短語
文字和文字標記元素，例如mark、kbd、sub和sup等
片段
用於定義文件中片段的元素，例如article、aside和title等
語義化標記
HTML5新的片段類元素介紹
header
footer
標記腳部區域的內容（用於整個頁面或頁面中的一塊區域）
section
web頁面中的一塊區域
article
獨立的文章內容
aside
相關內容或引文
nav
導航類輔助內容
下面是一個標籤位置的示意圖
使用Selectors API簡化選取操作
除了語義化元素外，HTML5還引入了一種用於查詢頁面DOM元素的快捷方式。
HTML5之前查詢元素的js舉例：
函式：getElementById()
舉例：<div id="foo"> getElementById("foo")
HTML5有了新的Selectors API, 可以用更精確的方式來指定希望獲取的元素，而不必再用標準的DOM的方式迴圈遍歷。使用方式類似於CSS中使用的選擇規則一樣。舉例：
函式1：querySelector()
描述：根據指定的選擇規則，返回在頁面中找到的第一個匹配元素
示例：querySelector("input.error")
結果：返回第一個CSS類名為"error"的文字選擇框
------------
函式2：querySelectorAll()
描述：根據指定規則返回頁面中所有相匹配的元素
示例：querySelectorAll("#results td")
結果：返回id值為results的元素下所有的單元格
Note
1. 可以為Selector API函式同時指定多個規則，例如
//選擇文件中名為highClass或lowClass的第一個元素
var x= document.querySelector(".highClass",".lowClass");
2. Selectors API不僅僅只是方便，在遍歷DOM的時候，
Selectors API通常會比以前的遍歷搜尋更快，瀏覽器對選擇器匹配進行了高度優化。
window.JSON
JSON作為js語法的一個子集，它將資料表示為物件字面量。
由於其語法簡單和在js程式設計中與生俱來的相容性，JSON變成了HTML5應用內部資料交換的事實標準。
典型的JSON API包含兩個函式，parse()和stringify(), 分別用於將字串序列化成DOM物件和將DOM物件轉換成字串。
如果舊的瀏覽器使用JSON，需要js庫。
在js中執行解析和序列化效率往往不高，所以為了提高執行速度，新的瀏覽器原生擴充套件了對JSON的支援，可以直接通過js來呼叫JSON了。
總結
本文首先介紹了HTML5的一些重要特點，HTML的歷史和設計理念。
最後對HTML5的新功能進行了快速預覽。
趕緊抽時間學習HTML5吧！
好了，今天就到這裡。
歡迎大家多多評論，讓下一篇文章更好 ：）