目錄
第一部分 簡介
第1章 HTML5:從文檔到應用的轉變 3
1.1 探索標記語言:HTML5速覽 4
1.1.1 HTML5文檔的基本結構 4
1.1.2 使用新的語義元素 6
1.1.3 使用ARIA角色來增強可訪問性 8
1.1.4 IE6~IE8的支持情況 9
1.1.5 HTML5所引入的新錶單特性 10
1.1.6 進度條、度量器和可摺疊內容 12
1.2 標記:附加的Web規範 14
1.2.1 微數據 15
1.2.2 CSS3 16
1.2.3 JavaScript和DOM 17
1.3 HTML5的DOM API 18
1.3.1 Canvas 19
1.3.2 音頻與視頻 19
1.3.3 拖放功能 20
1.3.4 跨文檔通信、服務器端發送的事件以及WebSockets 21
1.3.5 文檔編輯 23
1.3.6 Web存儲 24
1.3.7 離綫Web應用 25
1.4 其他API和規範 26
1.4.1 地理定位API(Geolocation API) 26
1.4.2 索引數據庫API(IndexedDB API) 27
1.4.3 文件API、文件閱讀器API、文件編輯器API與文件係統API 28
1.4.4 可伸縮矢量圖形 29
1.4.5 Web Graphics Library 30
1.5 小結 31
第二部分 基於瀏覽器的應用
第2章 創建錶單:輸入小部件、數據綁定以及數據驗證 36
2.1 錶單的功能概述與所需知識 37
2.2 構建錶單用戶界麵 39
2.2.1 定義錶單的基本HTML文檔結構 39
2.2.2 使用錶單輸入類型email和tel,以及輸入屬性autofocus、required和placeholder 40
2.2.3 使用錶單輸入屬性required 43
2.2.4 使用number輸入類型與min、max、data-*輸入屬性,以及元素來構建具備計算功能的錶單 44
2.2.5 使用錶單輸入類型month和pattern輸入屬性 47
2.2.6 提交還是保存?由用戶來選擇——formnovalidate和formaction輸入類型 49
2.3 計算金額總計,顯示錶單輸齣結果 51
2.3.1 構建計算函數 52
2.3.2 獲取data-*屬性的值 54
2.4 利用約束驗證API來檢查錶單輸入數據 56
2.4.1 利用setCustomValidity方法和ValidationMessage屬性創建自定義驗證測試和錯誤消息 57
2.4.2 利用invalid事件來偵測失敗的錶單驗證 59
2.4.3 利用CSS3僞類來設置無效元素的樣式 59
2.5 為不支持HTML5相關特性的瀏覽器提供迴退方案 61
2.5.1 利用Modernizr偵測特性並加載外部資源 61
2.5.2 使用polyfill和Modernizr來彌補缺陷 62
2.5.3 不藉助約束驗證API實現驗證 63
2.6 小結 66
第3章 文件編輯和管理:富文本格式、文件存儲、拖放 69
3.1 Super HTML5 Editor:應用概述、必備知識以及初始步驟 70
3.1.1 定義HTML文檔結構 71
3.1.2 用JavaScript來實現視圖導航與狀態管理 74
3.2 富文本編輯與地理定位 76
3.2.1 使用designMode使HTML頁麵可編輯 76
3.2.2 利用execCommand實現富文本編輯控件 78
3.2.3 利用Geolocation API來定位用戶當前位置 80
3.3 在本地管理文件:File System API、Quota Management API、File API與File Writer API 82
3.3.1 創建應用文件係統 83
3.3.2 從文件係統中獲取文件列錶 85
3.3.3 文件的加載、查看、編輯以及刪除 86
3.3.4 創建新文件 88
3.3.5 利用File Writer API來保存文件 92
3.4 添加交互性的拖放功能 94
3.4.1 通過拖入操作將文件導入到應用中 94
3.4.2 通過拖齣操作將文件從應用導齣 95
3.5 小結 96
第4章 傳遞消息:HTML5的腳本通信技術 98
4.1 服務器發送事件(SSE) 99
4.1.1 一個簡單的SSE聊天應用 99
4.1.2 何時使用SSE 108
4.2 使用WebSocket創建一種實時通信Web應用 108
4.2.1 應用概述及關鍵知識點 109
4.2.2 利用Node.js創建WebSocket 111
4.2.3 構建計劃闆應用 113
4.3 客戶端上的通信 121
4.3.1 利用postMessage實現跨域通信 121
4.3.2 利用跨文檔通信組閤應用 122
4.4 小結 124
第 5 章 移動應用:客戶端存儲與離綫執行 127
5.1 My Tasks應用的概述、關鍵知識點及首要步驟 128
5.1.1 定義HTML文檔結構 130
5.1.2 利用CSS控製視圖可見性 132
5.1.3 利用JavaScript實現視圖導航 133
5.2 利用Web Storage API管理數據 134
5.2.1 從localStorage處讀取數據 135
5.2.2 將數據存儲到localStorage中 136
5.2.3 從localStorage中刪除數據 137
5.3 使用IndexedDB來管理數據 139
5.3.1 偵測瀏覽器對數據庫的支持 140
5.3.2 創建並連接到一個IndexedDB數據庫,創建一個對象存儲及索引 141
5.3.3 利用HTML和JavaScript開發一個動態列錶 143
5.3.4 搜索IndexedDB數據庫 145
5.3.5 使用IndexedDB或Web SQL,將任務添加到數據庫中 148
5.3.6 從IndexedDB數據庫中更新與刪除數據 150
5.3.7 使用IndexedDB刪除整個數據庫 151
5.4 藉助應用緩存清單,創建可離綫使用的Web應用 152
5.4.1 配置Web服務器,以便使用應用緩存清單MIME類型 153
5.4.2 創建一個緩存清單文件 154
5.4.3 自動更新應用 155
5.5 小結 157
第三部分 交互式的圖像、媒體及遊戲
第 6 章 2D Canvas:底層2D圖像渲染 162
6.1 Canvas基礎知識 163
6.1.1 設定Canvas繪圖環境 163
6.1.2 生成Canvas繪圖環境 166
6.2 創建一個Canvas遊戲 167
6.2.1 創建遊戲引擎的主要部分 168
6.2.2 創建動態的矩形 172
6.2.3 創建弧形與圓形 175
6.2.4 利用路徑來創建復雜形狀 176
6.3 使Canvas元素動起來 178
6.3.1 使遊戲元素動起來 179
6.3.2 碰撞偵測 180
6.3.3 實現鍵盤、鼠標及觸摸控製 182
6.3.4 控製輸入需要考慮的一些問題 185
6.4 優化Canvas遊戲 186
6.4.1 記錄得分與關卡 186
6.4.2 添加遊戲開始界麵與結束界麵 190
6.4.3 藉助現成的代碼庫 192
6.5 小結 193
第 7 章 SVG:響應式瀏覽器內圖像 195
7.1 位圖與矢量圖形的對比 196
7.2 利用XML構建SVG Aliens遊戲 198
7.2.1 在HTML中設置SVG 199
7.2.2 實現簡單的形狀與文本 202
7.2.3 使用XLink和復雜形狀 204
7.3 利用JavaScript添加交互性 207
7.3.1 遊戲引擎基本結構和使用界麵 209
7.3.2 設計模式、動態對象的創建以及輸入方式 211
7.3.3 創建並組織復雜形狀 216
7.3.4 維持一個復雜的SVG組 222
7.3.5 SVG與Canvas的對比 228
7.4 小結 230
第 8 章 視頻與音頻:在瀏覽器內播放媒體 232
8.1 利用HTML5播放視頻 233
8.1.1 應用預覽及構建引用所需的必備知識 233
8.1.2 構建播放器的基本架構 234
8.1.3 使用video元素為頁麵加入視頻 236
8.2 利用HTMLMediaElement接口來控製視頻 237
8.3 利用source元素指定多種媒體格式 243
8.3.1 通過.currentSrc屬性獲取視頻類型 244
8.3.2 媒體格式的轉換 246
8.4 結閤用戶輸入與視頻,實現視頻標注功能 247
8.4.1 使用canvas元素來播放視頻 247
8.4.2 創建自定義的視頻播放控件 249
8.4.3 控製播放中的視頻 251
8.4.4 實現視頻標注功能 256
8.5 小結 259
第 9 章 WebGL:3D應用開發 261
9.1 創建一個WebGL遊戲引擎 263
9.1.1 設置引擎布局 264
9.1.2 創建、改變及刪除對象的工具 270
9.2 與顯卡通信 276
9.2.1 有關顯卡的一些基本知識 277
9.2.2 創建3D數據著色器 278
9.2.3 為形狀、顔色及維度創建緩衝區 281
9.2.4 在屏幕上顯示形狀數據 282
9.3 創建Geometry Destroyer 287
9.3.1 創建一個遊戲界麵及控製對象 288
9.3.2 在3D空間中創建2D形狀 291
9.3.3 創建3D形狀和粒子 295
9.4 小結 305
附錄A HTML5與相關標準 306
附錄B HTML5 API簡要參考文檔 313
附錄C 安裝PHP和MySQL 328
附錄D 計算機網絡技術基礎 346
附錄E 設置Node.js 356
附錄F 通道通信 365
附錄G 開發工具及庫 370
附錄H 利用FFmpeg編碼 376
附錄I HTML未來展望 381
附錄J 鏈接和參考 414
· · · · · · (
收起)