內容簡介
HTML5作為當今**炙手可熱的Web開發技術,憑藉其強大的功能特性和跨平台等優勢,吸引了業內開發人員的重點關注,掌握HTML5技術也成為Web開發人員的一項必備技能。
《HTML5開發手冊》採用菜譜的方式為HTML5新手以及有一定經驗的用戶提供了一些專家級的建議和經過測試的代碼示例,可以幫助其順利創建高質量的HTML5套用。《HTML5開發手冊》總共分為15章,先後講解了HTML5中新增的元素、瀏覽器對HTML5的支持、CSS3中的新布局和樣式、HTML5 Web表單、多媒體技術、地理定位API、客戶端存儲、WebSocket API,以及集成設備數據等內容。
《HTML5開發手冊》內容組織合理,示例豐富,適合對HTML5以及移動套用開發感興趣的新手閱讀。對於有一定經驗的Web開發人員,《HTML5開發手冊》也極具參考價值。
圖書目錄
第 1章 HTML5中新的結構元素 1
1.1 初學者“菜譜”:建立HTML5初始檔案 1
1.1.1 doctype 2
1.1.2 字元編碼 2
1.1.3 JavaScript和CSS連結 2
1.1.4 語法編寫風格 3
1.2 這些新元素從何而來 4
1.3 初學者“菜譜”:使用header元素建立網站標頭 4
1.4 初學者“菜譜”:使用hgroup元素組合標題 7
1.5 初學者“菜譜”:使用nav元素創建導航 7
1.6 中級“菜譜”:使用新article元素 10
1.7 中級“菜譜”:使用section元素對內容分組 11
1.8 初學者“菜譜”:使用aside標記創建側邊欄 13
1.9 初學者“菜譜”:使用footer元素 15
1.10 中級“菜譜”:使用HTML5大綱工具驗證結構 17
1.11 高級“菜譜”:使用所有新標記建立新聞頁面 19
1.12 高級“菜譜”:使用所有新元素來建立搜尋結果頁面 23
1.13 小結 28
第 2章 組合、文本級和重新定義的語義 29
2.1 初學者“菜譜”:使用figure和figcaption元素插入圖片和圖注 29
2.2 初學者“菜譜”:使用time元素插入日期和時間 31
2.3 初學者“菜譜”:使用details元素創建可伸縮控制項 32
2.4 初學者“菜譜”:使用address元素提供通信信息 34
2.5 初學者“菜譜”:使用mark元素高亮文本 35
2.6 初學者“菜譜”:使用s元素顯示不準確或不相關的內容 36
2.7 現存元素的變化 36
2.7.1 cite元素 37
2.7.2 ol元素 37
2.7.3 dl元素 39
2.7.4 small元素 41
2.7.5 b和strong元素 41
2.7.6 i和em元素 42
2.7.7 abbr元素 42
2.7.8 hr元素 43
2.7.9 不復存在的元素 43
2.8 初學者“菜譜”:為多個元素添加相同的超連結 43
2.9 中級“菜譜”:利用Microdata添加語義信息 44
2.10 中級“菜譜”:在HTML5中使用WAI-ARIA 46
2.11 高級“菜譜”:編寫帶有評論的文章頁面 48
2.12 小結 50
第3章 應對瀏覽器的HTML5支持 51
3.1 初學者“菜譜”:IE支持問題 51
3.1.1 利用JavaScript解決HTML5兼容問題 51
3.1.2 使CSS兼容 52
3.2 模板 52
3.3 初學者“菜譜”:HTML5特性檢查 53
3.4 中級“菜譜”:使用jQuery替代Calendar標記 54
3.5 中級“菜譜”:利用Modernizr檢查特性 57
3.6 Polyfilling 60
3.7 HTML5驗證網站 61
3.8 小結 62
第4章 CSS3新布局和樣式技巧 63
4.1 中級“菜譜”:使用CSS3媒介查詢(Media Query)建立回響式設計 63
4.1.1 合理使用 69
4.1.2 目標設備為iPhone和Android手機 69
4.2 初學者“菜譜”:使用@font-face進行自定義字型 69
4.2.1 檔案格式和跨瀏覽器問題 71
4.2.2 字型服務 72
4.3 中級“菜譜”:使用CSS漸變和複合背景創建按鈕 73
4.4 中級“菜譜”:使用變換和過渡以美化網站 76
4.5 高級“菜譜”:利用CSS創建動畫 81
4.6 小結 85
第5章 HTML5 Web表單 87
5.1 驗證 87
5.2 HTML 4輸入類型 87
5.3 初學者“菜譜”:建立聯繫人表單 89
5.3.1 input type=""email"" 89
5.3.2 input type=""tel"" 91
5.3.3 input type=""url"" 91
5.4 初學者“菜譜”:利用input type= ""search""建立搜尋表單 92
5.5 初學者“菜譜”:建立日曆和時間控制項 93
5.5.1 input type=""datetime"" 93
5.5.2 input type=""datetime-local"" 94
5.5.3 input type=""date"" 94
5.5.4 input type=""time"" 94
5.5.5 input type=""month"" 95
5.5.6 input type=""week"" 95
5.5.7 限定日期和時間 96
5.6 初學者“菜譜”:創建數字選擇器 96
5.7 初學者“菜譜”:創建滑塊(無需JavaScript) 97
5.8 初學者“菜譜”:創建顏色選擇器 98
5.9 初學者“菜譜”:使用output元素顯示結果 98
5.10 初學者“菜譜”:使用占位文字(placeholder) 99
5.11 初學者“菜譜”:利用list和datalist完成自動補全功能 100
5.12 初學者“菜譜”:使用progress元素跟蹤任務完成程度 101
5.13 初學者“菜譜”:使用meter元素進行計量 102
5.14 初學者“菜譜”:頁面載入時跳轉到某個form元素 103
5.15 初學者“菜譜”:允許多個條目 104
5.16 初學者“菜譜”:利用required屬性進行基本驗證 105
5.17 中級“菜譜”:編寫自定義驗證規則 105
5.18 初學者“菜譜”:限制用戶輸入 106
5.18.1 step 106
5.18.2 min,max 106
5.18.3 formnovalidate,novalidate 107
5.19 中級“菜譜”:自定義表單樣式 107
5.20 錯誤訊息 109
5.21 高級“菜譜”:綜合套用以創建註冊表單 109
5.22 小結 113
第6章 Canvas繪圖 115
6.1 Canvas介紹 115
6.1.1 初始工作 116
6.1.2 X和Y坐標 117
6.2 初學者“菜譜”:在Canvas上繪製格線 117
6.3 初學者“菜譜”:繪製簡單的圖形和線段 122
6.3.1 繪製長方形或正方形並設定樣式 122
6.3.2 為圖形添加漸變填充 123
6.3.3 繪製線段或路徑 124
6.4 中級“菜譜”:使用路徑繪製多邊形 126
6.5 中級“菜譜”:繪製弧形和圓形 129
6.6 初學者“菜譜”:添加文字 129
6.7 初學者“菜譜”:繪製圖片 130
6.8 中級“菜譜”:裁剪圖片 131
6.9 中級“菜譜”:子圖動畫 132
6.10 高級“菜譜”:為圖片添加動畫 136
6.11 高級“菜譜”:柱形圖表動畫 139
6.12 小結 145
第7章 HTML5嵌入視頻 147
7.1 初學者“菜譜”:使用video元素插入視頻 147
7.1.1 瀏覽器和設備支持 148
7.1.2 HTML5和視頻編碼 148
7.1.3 為何我們需要了解編碼 149
7.2 中級“菜譜”:在所有瀏覽器中使用視頻 150
7.2.1 為過時瀏覽器添加回滾內容 150
7.2.2 新的視頻屬性 153
7.3 中級“菜譜”:為視頻創建字幕 155
7.4 媒體API 159
7.5 高級“菜譜”:創建自定義控制項 160
7.6 小結 168
第8章 HTML5嵌入音頻 169
8.1 初學者“菜譜”:利用audio元素嵌入音頻 169
8.2 中級“菜譜”:在所有瀏覽器中使用音頻 170
8.3 新的音頻屬性 172
8.3.1 src屬性 172
8.3.2 preload屬性 172
8.3.3 loop屬性 172
8.3.4 autoplay屬性 172
8.3.5 controls屬性 173
8.4 媒體API 174
8.5 中級“菜譜”:創建混音器 175
8.6 高級“菜譜”:添加流媒體廣播 179
8.7 小結 187
第9章 修改瀏覽器歷史記錄 189
9.1 歷史記錄(History)基礎 189
9.2 初學者“菜譜”:使用pushState添加歷史記錄 190
9.3 初學者“菜譜”:創建圖片查看器 193
9.4 中級“菜譜”:在圖片查看器中彈出狀態 195
9.5 初學者“菜譜”:使用replaceState修改歷史記錄 197
9.6 中級“菜譜”:修改頁面歷史記錄 199
9.7 高級“菜譜”:使用高級狀態數據在頁面間傳遞信息 201
9.8 中級“菜譜”:測試歷史記錄安全性 205
9.9 實用庫 208
9.10 小結 208
第 10章 Geolocation API位置感知 211
10.1 Geolocation簡介 211
10.1.1 瀏覽器兼容性 212
10.1.2 獲取位置:getCurrentPosition 212
10.2 初學者“菜譜”:簡單使用getCurrent-Position獲取當前位置 213
10.3 中級“菜譜”:使用getCurrentPosition映射位置 216
10.4 中級“菜譜”:使用PositionOptions確定距離 221
10.5 高級“菜譜”:使用watchPosition跟隨移動中的位置 227
10.6 小結 234
第 11章 客戶端存儲 235
11.1 客戶端存儲概要 235
11.1.1 數據安全 236
11.1.2 鍵與值:sessionStorage和localStorage 237
11.2 初學者“菜譜”:獲取和寫入會話存儲 238
11.3 初學者“菜譜”:使用會話存儲記錄樣式 241
11.4 中級“菜譜”:使用本地存儲保存表單 245
11.5 高級“菜譜”:捕獲本地存儲事件 249
11.6 Web SQL Database API 256
11.7 高級“菜譜”:使用Web資料庫創建貨物列表 259
11.8 小結 267
第 12章 通信與執行緒 269
12.1 WebSocket API簡介 269
12.2 初學者“菜譜”:通過Web Sockets交流 270
12.3 通過Web Workers創建執行緒 274
12.4 初學者“菜譜”:創建Web Worker 275
12.5 中級“菜譜”:添加雙向通信 279
12.6 高級“菜譜”:利用共享Web Worker 282
12.7 小結 288
第 13章 HTML5中的瀏覽器體驗 289
13.1 拖放API 289
13.2 初學者“菜譜”:div間拖放 290
13.3 高級“菜譜”:利用事件和dataTransfer 294
13.4 應用程式快取和API 302
13.4.1 瀏覽器快取安全 303
13.4.2 引用清單(Manifest)檔案 303
13.5 初學者“菜譜”:創建清單檔案 303
13.5.1 CACHE 304
13.5.2 FALLBACK 304
13.5.3 NETWORK 305
13.5.4 更新快取 305
13.6 初學者“菜譜”:離線使用頁面 306
13.7 套用快取API 308
13.8 通知(Notification)API 309
13.8.1 通知許可權 310
13.8.2 瀏覽器兼容性 310
13.9 初學者“菜譜”:顯示簡單的通知 311
13.10 高級“菜譜”:創建Tweet通知頁面 314
13.11 小結 322
第 14章 使用本地檔案 323
14.1 File API介紹 323
14.2 初學者“菜譜”:獲取檔案屬性 324
14.3 初學者“菜譜”:拖放、處理多個檔案 326
14.4 FileReader接口 330
14.5 中級“菜譜”:使用readAsDataURL預覽圖片 331
14.6 高級“菜譜”:使用readAsText解析CSV檔案 335
14.7 File API擴展規範 342
14.8 高級“菜譜”:創建本地檔案 344
14.9 小結 349
第 15章 整合設備數據 351
15.1 設備API簡史 351
15.2 通訊錄API 352
15.3 初學者“菜譜”:獲取所有聯繫人和手機號碼 354
15.4 Messaging API 357
15.5 Network Information API 358
15.6 電池狀態事件 358
15.7 HTML Media Capture 359
15.8 中級“菜譜”:使用File Input捕獲圖片 359
15.9 設備方向和移動事件 363
15.10 中級“菜譜”:創建水準儀 364
15.11 小結 368