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