目　錄

第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
· · · · · · (收起)