HTML5程序設(shè)計（第2版）

第1章　 HTML5概述　 　 1
1.1　 HTML5發(fā)展史　 　 1
1.2　 關(guān)于2022年的那個神話　 　 2
1.3　 誰在開發(fā)HTML5　 　 3
1.4　 新的認識　 　 3
1.4.1　 兼容性和存在即合理　 　 3
1.4.2　 效率和用戶優(yōu)先　 　 4
1.4.3　 化繁為簡　 　 5
1.4.4　 通用訪問　 　 5
1.5　 無插件范式　 　 5
1.6　 HTML5的新功能　 　 8
1.6.1　 新的DOCTYPE和字符集　 　 8
1.6.2　 新元素和舊元素　 　 9
1.6.3　 語義化標記　 　 10
1.6.4　 使用Selectors API簡化選取操作　 　 15
1.6.5　 JavaScript日志和調(diào)試　 　 18
1.6.6　 window.JSON　 　 19
1.6.7　 DOM Level 3　 　 19
1.6.8　 Monkeys、Squirrelfish和其他JavaScript引擎　 　 19
1.7　 小結(jié)　 　 21
第2章　 Canvas API　 　 22
2.1　 HTML5 Canvas概述　 　 22
2.1.1　 歷史　 　 22
2.1.2　 canvas是什么　 　 23
2.1.3　 canvas坐標　 　 23
2.1.4　 什么情況下不用canvas　 　 23
2.1.5　 替代內(nèi)容　 　 24
2.1.6　 CSS和canvas　 　 25
2.1.7　 瀏覽器對HTML5 Canvas的支持情況　 　 25
2.2　 使用HTML5 Canvas API　 　 25
2.2.1　 檢測瀏覽器支持情況　 　 25
2.2.2　 在頁面中加入canvas　 　 26
2.2.3　 變換　 　 28
2.2.4　 路徑　 　 30
2.2.5　 描邊樣式　 　 32
2.2.6　 填充樣式　 　 34
2.2.7　 填充矩形區(qū)域　 　 34
2.2.8　 繪制曲線　 　 35
2.2.9　 在canvas中插入圖片　 　 37
2.2.10　 漸變　 　 38
2.2.11　 背景圖　 　 40
2.2.12　 縮放canvas對象　 　 42
2.2.13　 Canvas變換　 　 43
2.2.14　 Canvas文本　 　 45
2.2.15　 應用陰影　 　 46
2.2.16　 像素數(shù)據(jù)　 　 48
2.2.17　 Canvas的安全機制　 　 50
2.3　 使用HTML5 Canvas創(chuàng)建應用　 　 51
2.3.1　 進階功能之全頁玻璃窗　 　 54
2.3.2　 進階功能之為Canvas動畫計時　 　 54
2.4　 小結(jié)　 　 57
第3章　 SVG　 　 58
3.1　 SVG概述　 　 58
3.1.1　 歷史　 　 58
3.1.2　 理解SVG　 　 59
3.1.3　 可縮放圖形　 　 61
3.1.4　 使用SVG創(chuàng)建2D圖形　 　 61
3.1.5　 在頁面中添加SVG　 　 61
3.1.6　 簡單的形狀　 　 62
3.1.7　 變換SVG元素　 　 63
3.1.8　 復用內(nèi)容　 　 64
3.1.9　 圖案和漸變　 　 64
3.1.10　 SVG路徑　 　 65
3.1.11　 使用SVG文本　 　 66
3.1.12　 組合場景　 　 67
3.2　 使用SVG創(chuàng)建交互式應用　 　 68
3.2.1　 添加樹　 　 69
3.2.2　 添加updateTrees函數(shù)　 　 69
3.2.3　 添加removeTree函數(shù)　 　 70
3.2.4　 添加CSS樣式　 　 70
3.2.5　 最終代碼　 　 70
3.3　 小結(jié)　 　 74
第4章　 音頻和視頻　 　 75
4.1　 HTML5 Audio和Video概述　 　 75
4.1.1　 視頻容器　 　 75
4.1.2　 音頻和視頻編解碼器　 　 76
4.1.3　 HTML5 Audio和Video的限制　 　 77
4.1.4　 audio元素和video元素的瀏覽器支持情況　 　 77
4.2　 使用HTML5 Audio和Video API　 　 78
4.2.1　 瀏覽器支持性檢測　 　 79
4.2.2　 可訪問性　 　 79
4.2.3　 理解媒體元素　 　 80
4.2.4　 使用audio元素　 　 85
4.2.5　 使用video元素　 　 86
4.2.6　 進階功能　 　 93
4.3　 小結(jié)　 　 95
第5章　 Geolocation API　 　 96
5.1　 位置信息　 　 96
5.1.1　 緯度和經(jīng)度坐標　 　 96
5.1.2　 位置信息從何而來　 　 97
5.1.3　 IP地址地理定位數(shù)據(jù)　 　 98
5.1.4　 GPS地理定位數(shù)據(jù)　 　 98
5.1.5　 Wi-Fi地理定位數(shù)據(jù)　 　 98
5.1.6　 手機地理定位數(shù)據(jù)　 　 99
5.1.7　 用戶自定義的地理定位數(shù)據(jù)　 　 99
5.2　 HTML5 Geolocation的瀏覽器支持情況　 　 99
5.3　 隱私　 　 100
5.3.1　 觸發(fā)隱私保護機制　 　 101
5.3.2　 處理位置信息　 　 101
5.4　 使用HTML5 Geolocation API　 　 102
5.4.1　 瀏覽器支持性檢查　 　 102
5.4.2　 位置請求　 　 102
5.5　 使用HTML5 Geolocation構(gòu)建應用　 　 107
5.5.1　 編寫HTML顯示代碼　 　 109
5.5.2　 處理Geolocation數(shù)據(jù)　 　 110
5.5.3　 最終代碼　 　 112
5.6　 進階功能　 　 115
5.6.1　 現(xiàn)在的狀態(tài)是什么　 　 115
5.6.2　 在Goolge Map上顯示“我在這里”　 　 117
5.7　 小結(jié)　 　 118
第6章　 Communication API　 　 119
6.1　 跨文檔消息通信　 　 119
6.1.1　 理解源安全　 　 122
6.1.2　 跨文檔消息通信的瀏覽器支持情況　 　 122
6.1.3　 使用postMessage API　 　 123
6.1.4　 使用postMessage API創(chuàng)建應用　 　 124
6.2　 XMLHttpRequest Level 2　 　 128
6.2.1　 跨源XMLHttpRequest　 　 129
6.2.2　 進度事件　 　 130
6.2.3　 HTML5 XMLHttpRequestLevel 2的瀏覽器支持情況　 　 131
6.2.4　 使用XMLHttpRequest API　 　 131
6.2.5　 創(chuàng)建XMLHttpRequest應用　 　 133
6.3　 進階功能　 　 136
6.3.1　 結(jié)構(gòu)化的數(shù)據(jù)　 　 136
6.3.2　 Framebusting　 　 136
6.4　 小結(jié)　 　 137
第7章　 WebSockets API　 　 138
7.1　 WebSockets概述　 　 138
7.1.1　 實時和HTTP　 　 138
7.1.2　 解讀WebSockets　 　 140
7.2　 編寫簡單的Echo WebSocket服務器　 　 145
7.3　 使用HTML5 WebSockets API　 　 153
7.3.1　 瀏覽器支持情況檢測　 　 153
7.3.2　 API的基本用法　 　 154
7.4　 創(chuàng)建HTML5 WebSockets應用程序　 　 158
7.4.1　 編寫HTML文件　 　 159
7.4.2　 添加WebSocket代碼　 　 160
7.4.3　 添加Geolocation代碼　 　 160
7.4.4　 合并所有內(nèi)容　 　 161
7.4.5　 最終代碼　 　 163
7.5　 小結(jié)　 　 165
第8章　 Forms API　 　 166
8.1　 HTML5 Forms概述　 　 166
8.1.1　 HTML Forms與XForms　 　 166
8.1.2　 功能性表單　 　 167
8.1.3　 HTML5 Forms的瀏覽器支持情況　 　 167
8.1.4　 輸入型控件目錄　 　 168
8.2　 使用HTML5 Forms API　 　 172
8.2.1　 新的表單特性和函數(shù)　 　 172
8.2.2　 表單驗證　 　 175
8.2.3　 驗證反饋　 　 178
8.3　 構(gòu)建HTML5 Forms應用　 　 180
8.4　 小結(jié)　 　 185
第9章　 拖放　 　 186
9.1　 Web拖放發(fā)展史　 　 186
9.2　 HTML5拖放概述　 　 187
9.2.1　 藍圖　 　 187
9.2.2　 需要記住的事件　 　 189
9.2.3　 設(shè)置元素可拖動　 　 192
9.2.4　 傳輸和控制　 　 192
9.3　 構(gòu)建拖放應用　 　 193
9.4　 拖放文件　 　 201
9.5　 進階功能　 　 205
9.6　 小結(jié)　 　 206
第10章　 Web Workers API　 　 207
10.1　 Web Workers的瀏覽器支持情況　 　 208
10.2　 使用Web Workers API　 　 208
10.2.1　 瀏覽器支持性檢查　 　 208
10.2.2　 創(chuàng)建Web Workers　 　 209
10.2.3　 多個JavaScript文件的加載與執(zhí)行　 　 209
10.2.4　 與HTML5 Web Workers通信　 　 209
10.3　 編寫主頁　 　 210
10.3.1　 處理錯誤　 　 211
10.3.2　 停止Web Workers　 　 212
10.3.3　 Web Workers的嵌套使用　 　 212
10.3.4　 使用定時器　 　 213
10.3.5　 示例代碼　 　 213
10.4　 構(gòu)建Web Workers應用　 　 214
10.4.1　 編寫blur.js輔助腳本　 　 216
10.4.2　 編寫blur.html應用頁面　 　 217
10.4.3　 編寫blurWorker.js　 　 218
10.4.4　 與Web Worker通信　 　 218
10.4.5　 運行程序　 　 219
10.4.6　 示例代碼　 　 220
10.5　 小結(jié)　 　 225
第11章　 Web Storage API　 　 226
11.1　 HTML5 Web Storage概述　 　 226
11.2　 Web Storage的瀏覽器支持情況　 　 227
11.3　 使用Web Storage API　 　 227
11.3.1　 檢查瀏覽器的支持性　 　 227
11.3.2　 設(shè)置和獲取數(shù)據(jù)　 　 229
11.3.3　 封堵數(shù)據(jù)泄漏　 　 230
11.3.4　 localStorage與sessionStorage　 　 230
11.3.5　 Web Storage API的其他特性和函數(shù)　 　 232
11.3.6　 更新Web Storage后的通信　 　 234
11.3.7　 探索Web Storage　 　 235
11.4　 構(gòu)建Web Storage應用　 　 236
11.5　 瀏覽器數(shù)據(jù)庫存儲展望　 　 247
11.5.1　 Web SQL Database　 　 247
11.5.2　 索引數(shù)據(jù)庫API　 　 250
11.6　 進階功能　 　 251
11.6.1　 JSON對象的存儲　 　 251
11.6.2　 共享窗口　 　 252
11.7　 小結(jié)　 　 253
第12章　 構(gòu)建離線Web應用　 　 254
12.1　 HTML5離線Web應用概述　 　 254
12.2　 使用HTML5離線Web應用API　 　 256
12.2.1　 檢查瀏覽器的支持情況　 　 256
12.2.2　 搭建簡單的離線應用程序　 　 256
12.2.3　 支持離線行為　 　 257
12.2.4　 manifest文件　 　 257
12.2.5　 applicationCache API　 　 259
12.2.6　 運行中的應用緩存　 　 260
12.3　 使用HTML5離線Web應用構(gòu)建應用　 　 261
12.3.1　 創(chuàng)建記錄資源的manifest文件　 　 263
12.3.2　 創(chuàng)建構(gòu)成界面的HTML和CSS　 　 264
12.3.3　 創(chuàng)建離線JavaScript　 　 264
12.3.4　 檢查applicationCache的支持情況　 　 266
12.3.5　 為Update按鈕添加處理函數(shù)　 　 266
12.3.6　 添加Geolocation跟蹤代碼　 　 267
12.3.7　 添加Storage功能代碼　 　 267
12.3.8　 添加離線事件處理程序　 　 268
12.4　 小結(jié)　 　 268
第13章　 HTML5未來展望　 　 269
13.1　 HTML5的瀏覽器支持情況　 　 269
13.2　 HTML未來的發(fā)展　 　 269
13.2.1　 WebGL　 　 270
13.2.2　 設(shè)備　 　 272
13.2.3　 音頻數(shù)據(jù)API　 　 272
13.2.4　 觸摸屏設(shè)備事件　 　 272
13.2.5　 P2P網(wǎng)絡　 　 275
13.2.6　 最終方向　 　 275
13.3　 小結(jié)　 　 275