第一章 HTML5簡介
HTML5 是 HTML 標準的最新演進版本。這個術語代表了兩個不同的概念：第一、它是一個新的 HTML 語言版本包含了新的元素，屬性和行為，第二、它包含了一系列可以被用來讓 Web 站點和應用更加多樣化，功能更強大的技術。專為移動設備而生?。?！
第二章 HTML5新語義
2.1 新節(jié)點和外觀
2.1.1 section
與div的無語義相對，簡單地說section就是帶有語義的div，section表示一段專題性的內容，一般會帶有標題。section應用的典型場景有：文章的章節(jié)、標簽對話框中的標簽頁、或者論文中有編號的部分。section不僅僅是一個普通的容器標簽。當一個標簽只是為了樣式或者方便腳本使用時，應該使用div。一般來說，當元素內容明確地出現(xiàn)在文檔大綱中時，section就是適用的。
2.1.2. article
article是一個特殊的section標簽，它比section具有更明確的語義, 它代表一個獨立的、完整的相關內容塊。一般來說，article會有標題部分(通常包含在header內)，有時也會包含footer 。雖然section也是帶有主題性的一塊內容，但是無論從結構上還是內容上來說，article本身就是獨立的、完整的。
div, section, article，語義是從無到有，逐漸增強的。div無任何語義，僅僅用作樣式化或者腳本化使用，對于一段主題性的內容，則就適用section，而假如這段內容可以脫離上下文，作為完整的獨立存在的一段內容，則就適用article。
2.1.3. header
<header>元素表示一組引導性的幫助，可能包含標題元素，也可以包含其他元素，像logo、分節(jié)頭部、搜索表單等。
2.1.4. footer
<footer>標簽定義文檔或節(jié)的頁腳。<footer>元素應當含有其包含元素的信息。頁腳通常包含文檔的作者、版權信息、使用條款鏈接、聯(lián)系信息等等。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html示例</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body>
<article>
<header>
<h1>The Very First Rule of Life</h1>
<p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
</header>
<p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p>
<p>...</p>
<footer>
<a href="?comments=1">Show comments...</a>
</footer>
</article>
<article>
<header>
<h1>The Very First Rule of Life</h1>
<p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
</header>
<p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p>
<p>...</p>
<section>
<h1>Comments</h1>
<article>
<footer>
<p>Posted by: George Washington</p>
<p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
</footer>
<p>Yeah! Especially when talking about your lobbyist friends!</p>
</article>
<article>
<footer>
<p>Posted by: George Hammond</p>
<p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p>
</footer>
<p>Hey, you have the same first name as me.</p>
</article>
</section>
</article>
</body>
</html>
2.1.5. nav
HTML導航欄<nav>描繪一個含有多個超鏈接的區(qū)域，這個區(qū)域包含轉到其他頁面，或者頁面內部其他部分的鏈接列表，一般用于描述頁面菜單。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html示例</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body>
<div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</body>
</html>
2.1.6. aside
<aside>元素中連接到頁面中其他部分的內容，被認為是獨立于該內容的一部分并且可以被單獨的拆分出來而不會使整體受影響。其通常表現(xiàn)為側邊欄或者被插入在該內容里。他們通常包含在工具條，例如來自詞匯表的定義。也可能有其他類型的信息，例如相關的廣告、筆者的傳記、web 應用程序、個人資料信息，或在博客上的相關鏈接。
2.1.7. address
<address>元素用來表示地址信息。
2.2 音頻和視頻
2.2.1 audio
HTML5的<audio>元素用于在文檔中表示音頻內容。<audio>元素可以包含多個音頻資源， 這些音頻資源可以使用src屬性或者<source>元素來進行描述。 瀏覽器將會選擇最合適的一個來使用。對于不支持<audio>元素的瀏覽器，<audio>元素也可以作為瀏覽器不識別的內容加入到文檔中。
常用屬性列表：
| 屬性 | 說明 |
|---|---|
| autoplay | 布爾屬性；指定后，音頻會馬上自動開始播放，不會停下來等著數(shù)據(jù)載入結束。 |
| controls | 如果設置了該屬性，瀏覽器將提供一個包含聲音，播放進度，播放暫停的控制面板，讓用戶可以控制音頻的播放。 |
| loop | 布爾屬性；如果指定，將循環(huán)播放音頻。 |
| preload | 如果出現(xiàn)該屬性，則音頻在頁面加載時進行加載，并預備播放。如果使用 "autoplay"，則忽略該屬性。 |
| src | 嵌入的音頻的URL。 |
2.2.2. video
HTML5規(guī)定了一種通過video元素來包含視頻的標準方法。<video>元素提供了播放、暫停和音量控件來控制視頻。同時<video>元素元素也提供width和height屬性控制視頻的尺寸。如果設置的高度和寬度，所需的視頻空間會在頁面加載時保留。如果沒有設置這些屬性，瀏覽器不知道大小的視頻，瀏覽器就不能在加載時保留特定的空間，頁面就會根據(jù)原始視頻的大小而改變。<video>元素支持多個<source>元素。<source>元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式。
<video>與</video>標簽之間插入的內容是提供給不支持video元素的瀏覽器顯示的。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持Video標簽。
</video>
支持的視頻格式：
| 格式 | MIME-type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
常用事件列表：
| 事件 | 說明 |
|---|---|
| pause | 暫停播放 |
| play | 開始播放 |
2.3 新表單
| 表單 | 示例 |
|---|---|
| 顏色 | <input type="color" /> |
| 日期 | <input type="date" /> |
| 日期+時間 | <input type="datetime-local" /> |
| 郵件 | <input type="email" /> |
| 月份 | <input type="month" /> |
| 數(shù)字 | <input type="number" min="1" max="5"> |
| 搜索框 | <input type="search"> |
| 電話號碼 | <input type="tel"> |
| 時間 | <input type="time"> |
| url地址 | <input type="url"> |
| 周 | <input type="week"> |
第三章 HTML5 Web存儲
使用HTML5可以在本地存儲用戶的瀏覽數(shù)據(jù)。早些時候，本地存儲使用的是cookies。但是Web存儲需要更加的安全與快速。這些數(shù)據(jù)不會被保存在服務器上，但是這些數(shù)據(jù)只用于用戶請求網站數(shù)據(jù)上。它也可以存儲大量的數(shù)據(jù)，而不影響網站的性能。數(shù)據(jù)以鍵值對存在的方式進行存儲。web網頁的數(shù)據(jù)只允許該網頁訪問使用。
3.1. localStorage
localStorage提供了沒有時間限制的存儲（除非主動刪除）。
3.1.1. 存儲數(shù)據(jù)
使用localStorage.setItem("key","value")方法存儲數(shù)據(jù)。
if(window.localStorage){
var userInfo = {
userId: 10001,
userName: "Johnny",
role: "admin"
};
localStorage.setItem("userInfo",JSON.stringify(userInfo));
}
3.1.2. 獲取數(shù)據(jù)
使用localStorage.getItem("key","value")方法存儲數(shù)據(jù)。
var content = localStorage.setItem("userInfo");
3.1.3. 移除數(shù)據(jù)
使用localStorage.removeItem("key")方法移除數(shù)據(jù)。
localStorage.removeItem("userInfo");
3.1.4. 清空數(shù)據(jù)
使用localStorage.clear()方法清空數(shù)據(jù)。
localStorage.clear();
localStorage與cookie取得區(qū)別如下：
- cookie大小限制在4k左右，不適合存業(yè)務數(shù)據(jù)
- cookie每次隨HTTP事務一起發(fā)送，浪費帶寬
- localstorage大小限制在500萬字符左右，各個瀏覽器不一致
- localstorage本質是在讀寫文件，數(shù)據(jù)多的話會比較卡
- localstorage不能被爬蟲爬取，不要用它完全取代URL傳參
3.1.5. 屬性遍歷
var storage = window.localStorage;
for (var i=0; i < storage.length; i++){
var key = storage.key(i);
var value = storage.getItem(key);
}
3.2. sessionStorage
sessionStorage 有時間限制的存儲（用戶關閉瀏覽器窗口后，數(shù)據(jù)會被刪除）。
3.2.1. 存儲數(shù)據(jù)
使用sessionStorage.setItem("key","value")方法存儲數(shù)據(jù)。
if(window.sessionStorage){
var userInfo = {
userId: 10001,
userName: "Johnny",
role: "admin"
};
sessionStorage.setItem("userInfo",JSON.stringify(userInfo));
}
3.2.2. 獲取數(shù)據(jù)
使用sessionStorage.getItem("key","value")方法存儲數(shù)據(jù)。
var content = sessionStorage.setItem("userInfo");
3.2.3. 移除數(shù)據(jù)
使用sessionStorage.removeItem("key")方法移除數(shù)據(jù)。
sessionStorage.removeItem("userInfo");
3.2.4. 清空數(shù)據(jù)
使用sessionStorage.clear()方法清空數(shù)據(jù)。
sessionStorage.clear();
3.2.5. 屬性遍歷
var storage = window.sessionStorage;
for (var i=0; i < storage.length; i++){
var key = storage.key(i);
var value = storage.getItem(key);
}
第四章 HTML5未來發(fā)展的六大趨勢
HTML 5從根本上改變了開發(fā)商開發(fā)Web應用的方式，從桌面瀏覽器到移動應用，這種語言和標準都正在影響并將繼續(xù)影響著各種操作平臺。
在移動領域，大家爭論不休的一個問題就是開發(fā)Web應用還是原生應用？而隨著HTML 5標準的發(fā)展，兩者之間的差異已經逐漸變得模糊，今天各大媒體都爭相報道與HTML 5有關的東西，那么，HTML 5未來的發(fā)展趨勢到底是什么？
4.1. 移動優(yōu)先
從如今層出不窮的移動應用就知道，在這個智能手機和將平板電腦大爆炸的時代，移動優(yōu)先已成趨勢，不管是開發(fā)什么，都以移動為主。
如上文所說，此前一直困擾移動領域的問題就是開發(fā)Web應用還是原生應用。而如今，我們看見一些大型企業(yè)如《金融時報》在沖著HTM L5進軍移動市場過程中，從App Store撤掉iPad原生應用而開發(fā)Web應用，同樣表現(xiàn)出色。
許多游戲開發(fā)商也將在移動Web應用中扮演中重要角色，移動Web應用優(yōu)先的趨勢將會持續(xù)到移動設備統(tǒng)治信息處理領域。其實用戶根本不在乎你用什么工具開發(fā)了什么應用，不管是Web應用還是原生應用，只要好用就可以了。
4.2. 游戲開發(fā)
其實移動游戲開發(fā)商是從HTML5獲益最多的一方，他們可利用這個平臺逃脫付費游戲須向蘋果支付的30%提成。在某種程度上，游戲就是移動平臺銷量最好的應用，也是吸引人們購買移動設備的一個重要因素。
許多游戲開發(fā)商都被Facebook或者Zynga推動著發(fā)展，而未來的Facebook應用生態(tài)系統(tǒng)是基于HTML5的，盡管在HTML 5平臺開發(fā)出游戲非常困難，但游戲開發(fā)商卻都愿意那么做。通過PhoneGap及appmobi的XDK將Web應用游戲打包整合到原生應用中也是一種方式，F(xiàn)acebook差不多就這么干的——基于Web應用及瀏覽器，但卻將之打包整合進原生應用。
4.3. 響應式設計
在HTML 5真的改變移動開發(fā)平臺之前，必須要邁出重要一步，那就是“響應式設計”，也就是屏幕可以根據(jù)內容而自動調整大小。
響應式設計最好的一個例子就是今年上線的BostonGlobe.com（觀看視頻），其屏幕能夠根據(jù)任何內容而調整尺寸大小，在訪問過其開發(fā)商Filament Group后才了解到，響應式設計也并非易事，一些基本概念設計必須從頭開始，比如處理媒體庫的RespondJS，而且處理來自第三方的圖片和廣告也是惱人的問題。
要想做好響應式設計，就必須洞悉內容與屏幕之間的反饋關系，一家來自硅谷的響應式設計公司ZURB稱，其實在過去的16年中，開發(fā)商就意識到響應式設計就要完全離開“流”，轉而注重內容是如何在網頁和移動設備中被處理的，這一過程還在繼續(xù)，HTML 5會讓它最終成為可能。
4.4. 設備訪問
消除Web應用與原生應用界限的最大障礙就是瀏覽器訪問移動設備基本特性的能力，比如照相機，通訊錄，日歷，加速器等，利用HTML5實現(xiàn)此能力方面，上文中提到的app Mobile算是行業(yè)翹楚，在感恩節(jié)后開源了所有API。Mozilla也一直在努力通過移動瀏覽器Fennec來將強設備訪問能力。
對許多移動開發(fā)商來說，提高設備訪問能力是HTML5最令人激動的革新，這意味著Web應用能夠登陸移動設備而無需做任何PhoneGap式打包，游戲開發(fā)商當然最開心，因為某些特性對他們來說是封鎖的，比如能整合到游戲中的加速器。
這就開啟了另一個可能的世界，比如能與云更好地整合（這有利于應用內購買，消息推送等）并提高游戲可玩性，有了HTML5這個平臺，開發(fā)商可以不再依賴于Java語言，CSS3，HTML及其它程序語言。
4.5. 離線緩存
這個概念相當新潮，離線情況下，app也能照常運作，算是HTML5充滿魔力的一面，今年最好的離線緩存例子就是亞馬遜Kindle的云閱讀器，可以通過Firefox6以上版本，Chrome11以上版本，Safari5以上版本及iOS4以上版本瀏覽器將內容同步到所有Kindle系列設備，并能記憶用戶在kindle圖書館的一切。
亞馬遜就這么實現(xiàn)了離線使用Web應用，許多專家人聲稱原生應用的末日即將到來，因為Web應用的使用變得簡單，無摩擦，適用于任何一個平臺或者無需平臺。
當然Mozilla的觸角也伸到了這里，實際上，Mozilla想涉足任何一個HTML 5能滲透的領域，從Mozilla的移動藍圖，可以了解更多。
4.6. 開發(fā)工具的成熟
HBuilder是DCloud推出的一款支持HTML5的Web開發(fā)IDE?？欤荋Builder的最大優(yōu)勢，通過完整的語法提示和代碼輸入法、代碼塊等，大幅提升HTML、js、css的開發(fā)效率。同時，它還包括最全面的語法庫和瀏覽器兼容性數(shù)據(jù)。
