本書(shū)作為HTML5網(wǎng)頁(yè)開(kāi)發(fā)語(yǔ)言的教程，系統(tǒng)地介紹了HTML5的相關(guān)知識(shí)點(diǎn)。全書(shū)共12章，從HTML5的基礎(chǔ)知識(shí)及其元素的用法開(kāi)始，后面依次講解了HTML5的表單與文件API、Canvas繪制圖形、音頻與視頻、本地存儲(chǔ)、離線Web應(yīng)用、地理位置API、通信API、XMLHttpRequest API、Web Workers API等內(nèi)容。本書(shū)內(nèi)容全面、結(jié)構(gòu)清晰，有助于讀者理解相關(guān)知識(shí)點(diǎn)。全書(shū)的每個(gè)知識(shí)點(diǎn)都結(jié)合相應(yīng)的代碼實(shí)例，并展示對(duì)應(yīng)的實(shí)例效果圖，有助于提高讀者的編程能力。讀者在實(shí)際開(kāi)發(fā)過(guò)程中可以應(yīng)用自如，達(dá)到學(xué)以致用的目的。本書(shū)適合網(wǎng)頁(yè)編程愛(ài)好者及從事Web網(wǎng)頁(yè)開(kāi)發(fā)的相關(guān)讀者閱讀。
前 言
用心打造完全針對(duì)基礎(chǔ)讀者的自學(xué)手冊(cè)，讓讀者用最短的時(shí)間、以輕松的方式盡快入門(mén)，享受更多的樂(lè)趣。
HTML從1993年至今，經(jīng)歷了5代的發(fā)展。作為網(wǎng)絡(luò)語(yǔ)言標(biāo)準(zhǔn)規(guī)范，其在計(jì)算機(jī)的發(fā)展上起著舉足輕重的作用。起初并沒(méi)有HTML1，而是1993年IETF的一個(gè)草案，并不是成型的標(biāo)準(zhǔn)。兩年之后，即1995年，HTML 2.0誕生了。隨著萬(wàn)維網(wǎng)的誕生和發(fā)展，HTML的發(fā)展速度可謂迅猛。1996年，HTML 3.2成為W3C的推薦標(biāo)準(zhǔn)。隨后在1997年和1999年，HTML 4.0成為W3C的推薦標(biāo)準(zhǔn)。HTML4階段持續(xù)了10年左右，在諸多人員的努力下，終于誕生了我們現(xiàn)在使用的HTML5。HTML5在前幾代的基礎(chǔ)上進(jìn)行了重大的修改，使其在當(dāng)今互聯(lián)網(wǎng)上的應(yīng)用非常廣泛。HTML5繼承了原來(lái)HTML的功能，在不破壞之前標(biāo)準(zhǔn)的前提下增加了很多屬性。2014年該標(biāo)準(zhǔn)規(guī)范終于制定完成。
近年來(lái)，Web前端技術(shù)的發(fā)展如日中天，而領(lǐng)銜這一領(lǐng)域發(fā)展的HTML5功不可沒(méi)。HTML5從根本上改變了開(kāi)發(fā)商開(kāi)發(fā)Web應(yīng)用程序的方式，從桌面瀏覽器到移動(dòng)應(yīng)用，這種語(yǔ)言和標(biāo)準(zhǔn)正在影響著各種操作平臺(tái)。隨著移動(dòng)應(yīng)用領(lǐng)域的不斷普及，市場(chǎng)越來(lái)越大，對(duì)基于移動(dòng)應(yīng)用平臺(tái)開(kāi)發(fā)的需求也日益增多。大家爭(zhēng)論不休的一個(gè)問(wèn)題就是開(kāi)發(fā)Web應(yīng)用還是原生應(yīng)用?而隨著HTML5標(biāo)準(zhǔn)的發(fā)展，兩者之間的差異已經(jīng)逐漸變得模糊，今天各大媒體都爭(zhēng)相報(bào)道與HTML5有關(guān)的內(nèi)容。那么，HTML5未來(lái)的發(fā)展趨勢(shì)到底是什么?下面來(lái)說(shuō)一下筆者眼中HTML5的未來(lái)市場(chǎng)。
1．移動(dòng)優(yōu)先
在大數(shù)據(jù)時(shí)代，移動(dòng)設(shè)備劇增，對(duì)移動(dòng)應(yīng)用的需求日益增多。尤其是手機(jī)已經(jīng)成為人們生活中非常重要的一部分，很大一部分人的生活已經(jīng)離不開(kāi)手機(jī)。移動(dòng)優(yōu)先已經(jīng)成為發(fā)展趨勢(shì)，與此同時(shí)，人們對(duì)移動(dòng)應(yīng)用的需求也越來(lái)越多、要求也越來(lái)越高。這些應(yīng)用極大地方便了人們的生活。所以未來(lái)HTML5會(huì)優(yōu)先發(fā)展移動(dòng)應(yīng)用。而當(dāng)今，一、二線城市企業(yè)在招聘前端工程師的時(shí)候已經(jīng)明確提出了對(duì)HTML5的技能要求。HTML5功能強(qiáng)大，開(kāi)發(fā)的產(chǎn)品友好，在企業(yè)級(jí)開(kāi)發(fā)中表現(xiàn)出色，越來(lái)越受到企業(yè)的歡迎。這無(wú)疑有助于開(kāi)拓HTML5的市場(chǎng)。
2．游戲開(kāi)發(fā)
現(xiàn)如今，游戲開(kāi)發(fā)可謂IT行業(yè)中的翹楚，尤其是手游市場(chǎng)。傳統(tǒng)的手游開(kāi)發(fā)需要在兩種主流的系統(tǒng)上運(yùn)行，即iOS和Android（當(dāng)然還有其他手機(jī)系統(tǒng)），但是在iOS上開(kāi)發(fā)收費(fèi)游戲時(shí)就有局限性了，必須向蘋(píng)果公司付費(fèi)，每一單都需要有一定的提成。而用HTML5開(kāi)發(fā)Web應(yīng)用就可以巧妙地避開(kāi)這一提成�？梢哉f(shuō)HTML5的這一強(qiáng)大優(yōu)勢(shì)無(wú)疑成為開(kāi)發(fā)商獲益的途徑之一。
3．響應(yīng)式設(shè)計(jì)和兼容性
在HTML5改變移動(dòng)平臺(tái)開(kāi)發(fā)前，必須邁出重要一步，那就是解決響應(yīng)式設(shè)計(jì)和兼容性問(wèn)題。如今，移動(dòng)設(shè)備的屏幕尺寸讓開(kāi)發(fā)者眼花繚亂，如何讓開(kāi)發(fā)出的應(yīng)用軟件能夠自適應(yīng)不同尺寸的屏幕已成為急需解決的問(wèn)題。要想做好響應(yīng)式設(shè)計(jì)并非一件易事。這時(shí)就需要HTML5洞悉內(nèi)容與屏幕之間的反饋關(guān)系，響應(yīng)式設(shè)計(jì)要完全脫離流，轉(zhuǎn)而注重內(nèi)容是如何在網(wǎng)頁(yè)和移動(dòng)設(shè)備中被處理的。這一過(guò)程還在繼續(xù)，隨著HTML5的不斷發(fā)展，終會(huì)讓功能越來(lái)越完善，界面更加友好。
4．設(shè)備訪問(wèn)
消除Web應(yīng)用與原生應(yīng)用界限的最大障礙就是瀏覽器訪問(wèn)移動(dòng)設(shè)備基本特性的能力，如照相機(jī)、通訊錄、加速器等，HTML5的推動(dòng)者正在努力完善HTML5以實(shí)現(xià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è)可能的世界，比如，能與云更好地整合并提高游戲可玩性。有了HTML5這個(gè)平臺(tái)，開(kāi)發(fā)商可以不再依賴(lài)Java、CSS3、HTML及其他程序語(yǔ)言。
5．離線緩存
所謂離線緩存，就是在離線的情況下，Web應(yīng)用還可以正常運(yùn)行。傳統(tǒng)意義上的Web應(yīng)用需要依賴(lài)網(wǎng)絡(luò)，而HTML5的離線緩存可以沖破這道束縛。利用離線緩存技術(shù)，可以在離線情況下正常使用Web應(yīng)用。目前已有相關(guān)產(chǎn)品實(shí)現(xiàn)了這種功能。
對(duì)于HTML愛(ài)好者來(lái)說(shuō)，這本書(shū)非常適合，其中包含了當(dāng)前極其全面的學(xué)習(xí)資源。本書(shū)通過(guò)對(duì)官網(wǎng)上的在線文檔、博客及相關(guān)書(shū)籍進(jìn)行收集和整理，同時(shí)結(jié)合筆者在軟件開(kāi)發(fā)中的編程經(jīng)驗(yàn)，將有關(guān)HTML5的零碎知識(shí)點(diǎn)組織成系統(tǒng)化的概念和技術(shù)分類(lèi)來(lái)進(jìn)行講解。
本書(shū)共12章，從最基礎(chǔ)的知識(shí)開(kāi)始講解，讓從未接觸過(guò)計(jì)算機(jī)的讀者也能在讀完此書(shū)后對(duì)HTML5有較為深刻的理解，并為其強(qiáng)大的功能深深折服。全書(shū)采用從易到難、循序漸進(jìn)的方式進(jìn)行講解，內(nèi)容幾乎涉及當(dāng)今HTML應(yīng)用的各個(gè)方面。第1～6章介紹HTML5基礎(chǔ)，此部分內(nèi)容可以讓初學(xué)者在短時(shí)間內(nèi)對(duì)HTML5有一個(gè)整體的感知；第7章主要講解本地存儲(chǔ)，涉及數(shù)據(jù)庫(kù)，為后續(xù)Web開(kāi)發(fā)奠定基礎(chǔ)；第8章主要講解HTML5在Web開(kāi)發(fā)方面的應(yīng)用；第9～12章介紹了HTML5的各種API，這對(duì)有一定開(kāi)發(fā)基礎(chǔ)的HTML愛(ài)好者來(lái)說(shuō)是必備的技能，在以后的開(kāi)發(fā)工作中會(huì)多次用到，讀者不需要刻意記憶這些API，用到時(shí)查閱即可。
本書(shū)的讀者對(duì)象
? 對(duì)HTML5感興趣的初學(xué)者。
? 有一定Web前端技術(shù)基礎(chǔ)的讀者。
? 從事HTML5前端開(kāi)發(fā)的人員。
? 想使用HTML5做一些小產(chǎn)品的開(kāi)發(fā)人員。
? 想自學(xué)HTML5的編程愛(ài)好者。
? 大中專(zhuān)院校的學(xué)生。
劉河飛，曾在多家企業(yè)工作，從事JavaWeb開(kāi)發(fā)工作，擁有多年Web開(kāi)發(fā)經(jīng)驗(yàn)，熱愛(ài)并長(zhǎng)期專(zhuān)注于Web前端學(xué)習(xí)，現(xiàn)從事Web前端工作，以及HTML5應(yīng)用的實(shí)踐。擅長(zhǎng)HTML、CSS、Java等開(kāi)發(fā)技術(shù),并能應(yīng)用這些技術(shù)結(jié)合數(shù)據(jù)庫(kù)開(kāi)發(fā)過(guò)大型應(yīng)用網(wǎng)站。了解W3C標(biāo)準(zhǔn)，掌握DIV CSS頁(yè)面架構(gòu)和布局方式，能夠熟練應(yīng)用HTML/CSS/JavaScript技術(shù)，開(kāi)發(fā)符合W3C標(biāo)準(zhǔn)的大型網(wǎng)站前端頁(yè)面。
目 錄
第1章 認(rèn)識(shí)HTML51
1.1 HTML5的發(fā)展歷史1
1.2 HTML5可以做什么2
1.3 世界知名瀏覽器廠商對(duì)HTML5的支持3
1.4 如何學(xué)習(xí)HTML53
1.4.1 學(xué)習(xí)HTML5的資源推薦3
1.4.2 編寫(xiě)HTML5的軟件推薦4
1.4.3 你的第一個(gè)HTML5實(shí)例4
1.4.4 對(duì)你的第一個(gè)HTML5實(shí)例解析5
第2章 HTML5的與眾不同7
2.1 語(yǔ)法的改變7
2.1.1 HTML5語(yǔ)法的改變7
2.1.2 HTML5版本的兼容性9
2.1.3 標(biāo)記實(shí)例11
2.2 新增的元素和廢除的元素12
2.2.1 新增的結(jié)構(gòu)元素12
2.2.2 新增的其他元素13
2.2.3 新增的input元素類(lèi)型22
2.2.4 廢除的元素24
2.3 新增的屬性和廢除的屬性25
2.3.1 新增的屬性25
2.3.2 廢除的屬性41
2.4 全局屬性42
2.5 HTML5新增的事件50
第3章 HTML5的結(jié)構(gòu)52
3.1 HTML5新增的主體結(jié)構(gòu)元素52
3.1.1 article元素52
3.1.2 aside元素55
3.1.3 nav元素58
3.1.4 pubdate元素60
3.1.5 section元素61
3.1.6 time元素63
3.2 HTML5新增的非主體結(jié)構(gòu)元素64
3.2.1 address元素64
3.2.2 header元素65
3.2.3 hgroup元素67
3.2.4 footer元素67
3.2.5 main元素69
3.3 使用HTML5新增的結(jié)構(gòu)元素編排一份網(wǎng)頁(yè)綱要70
3.3.1 編排內(nèi)容區(qū)塊70
3.3.2 網(wǎng)頁(yè)編排實(shí)例75
第4章 HTML5中的表單與文件API83
4.1 HTML5表單新增屬性與input元素類(lèi)型的變化83
4.1.1 表單新增屬性84
4.1.2 input元素類(lèi)型的變化101
4.2 HTML5中的表單驗(yàn)證110
4.2.1 自動(dòng)驗(yàn)證111
4.2.2 輸入域驗(yàn)證111
4.2.3 取消驗(yàn)證118
4.2.4 自定義錯(cuò)誤提示信息118
4.3 HTML5表單新增的頁(yè)面元素120
4.3.1 新增的figure和figcaption元素120
4.3.2 新增的details元素121
4.3.3 新增的mark元素123
4.3.4 新增的progress元素124
4.3.5 新增的meter元素125
4.3.6 新增的dialog元素126
4.3.7 改良的ol與dl列表127
4.3.8 改良的a元素130
4.3.9 加以限制的cite元素132
4.3.10 重新定義的small元素133
4.3.11 安全性增強(qiáng)的iframe元素133
4.3.12 增強(qiáng)的script元素139
4.4 HTML5中的文件API144
4.4.1 通過(guò)file對(duì)象選擇文件145
4.4.2 文件的Blob對(duì)象146
4.4.3 文件的FileReader接口153
4.4.4 文件的ArrayBuffer與ArrayBufferView對(duì)象160
4.4.5 文件系統(tǒng)API的各種操作167
4.5 HTML5中的拖放API200
4.5.1 實(shí)現(xiàn)拖放的步驟200
4.5.2 dataTransfer對(duì)象應(yīng)用詳解201
第5章 HTML5中的canvas繪制圖形207
5.1 canvas概述207
5.1.1 canvas是什么207
5.1.2 canvas坐標(biāo)208
5.1.3 在頁(yè)面中放置canvas元素208
5.2 canvas應(yīng)用209
5.2.1 canvas畫(huà)直線209
5.2.2 canvas畫(huà)矩形217
5.2.3 canvas畫(huà)圓218
5.2.4 canvas畫(huà)圓角矩形223
5.2.5 擦除canvas畫(huà)布224
5.2.6 canvas畫(huà)曲線225
5.2.7 使用clip()函數(shù)在指定區(qū)域繪圖228
5.2.8 繪制自定義圖形229
5.2.9 canvas使用Path2D對(duì)象繪制路徑230
5.2.10 canvas繪制文字232
5.2.11 canvas繪制漸變圖形236
5.2.12 canvas繪制變形圖形239
5.2.13 canvas 給圖形繪制陰影249
5.3 canvas處理圖像251
5.3.1 canvas繪制圖像252
5.3.2 圖像平鋪256
5.3.3 圖像裁剪258
5.3.4 像素處理260
5.3.5 灰度控制264
5.4 canvas高級(jí)功能265
5.4.1 圖形組合265
5.4.2 圖像混合267
5.4.3 自定義畫(huà)板270
5.5 補(bǔ)充知識(shí)272
5.5.1 保存與恢復(fù)狀態(tài)272
5.5.2 canvas畫(huà)布的文件保存功能273
5.5.3 canvas的簡(jiǎn)單應(yīng)用實(shí)例274
第6章 HTML5中的音頻與視頻280
6.1 HTML5 audio與video概述280
6.1.1 視頻容器281
6.1.2 音頻和視頻的編碼器與解碼器281
6.1.3 HTML5對(duì)audio和video的限制282
6.1.4 當(dāng)今瀏覽器對(duì)audio和video元素的支持情況282
6.2 使用HTML5 audio和video API283
6.2.1 瀏覽器支持性檢測(cè)283
6.2.2 HTML5頁(yè)面中播放視頻和音頻的方法284
6.2.3 多媒體的屬性286
6.2.4 多媒體的方法306
6.2.5 多媒體的事件308
6.2.6 進(jìn)階功能給音頻或視頻添加字幕311
6.2.7 構(gòu)建HTML5音頻與視頻的開(kāi)發(fā)實(shí)例317
第7章 HTML5本地存儲(chǔ)329
7.1 HTML5 Web Storage329
7.1.1 Web Storage概述329
7.1.2 檢測(cè)瀏覽器的支持情況330
7.1.3 Web Storage中的API簡(jiǎn)介331
7.1.4 采用Web Storage來(lái)存儲(chǔ)JSON對(duì)象的數(shù)據(jù)332
7.1.5 采用Web Storage實(shí)現(xiàn)留言本335
7.2 本地?cái)?shù)據(jù)庫(kù)336
7.2.1 本地?cái)?shù)據(jù)庫(kù)的基本概念336
7.2.2 使用本地?cái)?shù)據(jù)庫(kù)API337
7.2.3 使用本地?cái)?shù)據(jù)庫(kù)SQLLite實(shí)現(xiàn)Web留言本339
7.3 indexedDB數(shù)據(jù)庫(kù)的使用341
7.3.1 連接數(shù)據(jù)庫(kù)341
7.3.2 創(chuàng)建對(duì)象倉(cāng)庫(kù)與索引344
7.3.3 indexedDB實(shí)現(xiàn)保存與獲取數(shù)據(jù)349
7.3.4 indexedDB數(shù)據(jù)庫(kù)中的事務(wù)352
7.3.5 查詢數(shù)據(jù)354
7.3.6 統(tǒng)計(jì)對(duì)象倉(cāng)庫(kù)中的數(shù)據(jù)條數(shù)360
第8章 HTML5構(gòu)建離線Web應(yīng)用程序362
8.1 離線Web應(yīng)用程序362
8.1.1 離線Web應(yīng)用程序概述362
8.1.2 Web應(yīng)用程序的本地緩存與瀏覽器的網(wǎng)頁(yè)緩存的區(qū)別363
8.2 搭建簡(jiǎn)單的離線Web應(yīng)用程序364
8.2.1 緩存文件（.manifest）364
8.2.2 服務(wù)器的配置365
8.3 瀏覽器與服務(wù)器的交互過(guò)程368
8.4 applicationCache對(duì)象369
8.4.1 update()方法369
8.4.2 abort()方法371
8.4.3 swapCache()方法371
8.4.4 applicationCache對(duì)象的事件372
第9章 HTML5地理位置（Geolocation）API376
9.1 Geolocation API的基本知識(shí)376
9.1.1 經(jīng)度和緯度坐標(biāo)377
9.1.2 IP地址地理定位378
9.1.3 GPS地理定位379
9.1.4 Wi-Fi地理定位379
9.1.5 手機(jī)地理定位380
9.1.6 用戶自定義的地理定位數(shù)據(jù)380
9.1.7 取得當(dāng)前地理位置380
9.1.8 監(jiān)視當(dāng)前地理位置信息384
9.1.9 停止獲取當(dāng)前用戶的地理位置信息385
9.1.10 position對(duì)象385
9.2 隱私387
9.2.1 觸發(fā)隱私保護(hù)機(jī)制387
9.2.2 處理用戶地理位置信息387
9.3 HTML5 Geolocation API的應(yīng)用388
9.3.1 使用HTML5 Geolocation 構(gòu)建實(shí)時(shí)應(yīng)用388
9.3.2 Google Maps API392
9.3.3 在Google地圖上顯示我在這里394
9.3.4 HTML5 Geolocation API在百度地圖中的應(yīng)用395
第10章 HTML5通信（Communication）API398
10.1 跨文檔消息傳輸398
10.1.1 使用postMessage API398
10.1.2 跨文檔消息傳輸實(shí)例399
10.2 WebSocket通信402
10.2.1 WebSocket通信的基本知識(shí)402
10.2.2 使用WebSocket API402
10.2.3 發(fā)送對(duì)象406
第11章 XMLHttpRequest API的應(yīng)用408
11.1 利用XMLHttpRequest從服務(wù)器端獲取二進(jìn)制數(shù)據(jù)408
11.1.1 ArrayBuffer響應(yīng)數(shù)據(jù)409
11.1.2 Blob響應(yīng)數(shù)據(jù)412
11.2 使用XMLHttpRequest發(fā)送數(shù)據(jù)413
11.2.1 發(fā)送字符串?dāng)?shù)據(jù)413
11.2.2 發(fā)送表單數(shù)據(jù)415
11.2.3 發(fā)送Blob對(duì)象416
11.2.4 發(fā)送ArrayBuffer對(duì)象418
11.2.5 上傳文件420
11.3 實(shí)現(xiàn)跨域請(qǐng)求數(shù)據(jù)422
第12章 HTML5 Web Workers API424
12.1 HTML5 Web Workers詳述424
12.1.1 Web Workers的基礎(chǔ)知識(shí)424
12.1.2 與線程進(jìn)行數(shù)據(jù)交互427
12.1.3 使用HTML5 Web Workers API429
12.2 HTML5 Web Workers中的線程432
12.2.1 線程中的函數(shù)、變量和類(lèi)432
12.2.2 單層嵌套434
12.2.3 在多個(gè)子線程中進(jìn)行數(shù)據(jù)交互436
新書(shū)資訊