關注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吧！
好了，今天就到這里。
歡迎大家多多評論，讓下一篇文章更好 ：）