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