前言 ix
第一部分 現代標記
第1章 HTML5 簡介 2
1.1 HTML5 的故事 2
1.1.1 XHTML 1.0：更嚴格的標準 2
1.1.2 XHTML 2：意想不到的失敗 3
1.1.3 HTML5：起死迴生 3
1.1.4 HTML：活著的語言 5
1.2 HTML5 的三個主要原理 6
1.2.1 不破壞Web 6
1.2.2 修補牛蹄子路 7
1.2.3 實用至上 7
1.3 HTML5標記初體驗 8
1.3.1 HTML5文檔類型 9
1.3.2 字符編碼 11
1.3.3 頁麵語言 11
1.3.4 添加樣式錶 11
1.3.5 添加JavaScript 12
1.3.6 最終結果 13
1.4 HTML5 語法 13
1.4.1 放鬆的規則 13
1.4.2 HTML5 驗證 14
1.4.3 XHTML 的迴歸 16
1.5 HTML5 元素傢族 17
1.5.1 新增的元素 18
1.5.2 刪除的元素 18
1.5.3 改變的元素 19
1.5.4 調整的元素 20
1.5.5 標準化的元素 21
1.6 今天開始用HTML5 21
1.6.1 瞭解瀏覽器支持情況 23
1.6.2 瀏覽器裝機情況統計 24
1.6.3 通過Modernizr 檢測功能 25
1.6.4 使用“膩子腳本”填補功能缺陷 28
第2章 用語義元素構造網頁 30
2.1 語義元素 30
2.2 改造傳統的HTML 頁麵 32
2.2.1 構造頁麵的老辦法 32
2.2.2 使用HTML5 構造頁麵 35
2.2.3 用<figure>添加插圖 38
2.2.4 用<aside>添加附注 40
2.3 瀏覽器對語義元素的支持情況 42
2.3.1 為語義元素添加樣式 43
2.3.2 使用HTML5“墊片” 43
2.3.3 Modernizr：一站式解決方案 44
2.4 使用語義元素設計站點 44
2.4.1 理解<header> 45
2.4.2 用<nav>標注導航鏈接 47
2.4.3 理解區塊 51
2.4.4 理解<footer> 51
2.4.5 使用<main>標識主要內容 54
2.5 HTML5 綱要 55
2.5.1 如何查看綱要 55
2.5.2 基本綱要 56
2.5.3 分塊元素 58
2.5.4 解決一個綱要問題 60
第3章 編寫更有意義的標記 64
3.1 迴顧語義元素 64
3.1.1 使用<time>標注日期和時間 65
3.1.2 使用<output>標注JavaScript返迴值 67
3.1.3 使用<mark>標注突顯文本 68
3.2 其他語義標準 70
3.2.1 ARIA 70
3.2.2 RDFa 71
3.2.3 微格式 71
3.2.4 微數據 72
3.3 實例：改進“About Me”頁麵 75
3.4 搜索引擎如何使用元數據 79
3.4.1 Google Rich Snippets 79
3.4.2 增強搜索結果 80
3.4.3 食譜搜索引擎 84
第4章 構建更好的Web 錶單 87
4.1 理解錶單 87
4.2 傳統錶單翻新 89
4.2.1 通過占位符文本添加提示 92
4.2.2 焦點：挑選正確的起點 94
4.3 驗證：阻止錯誤 94
4.3.1 HTML5 驗證的原理 95
4.3.2 關閉驗證 96
4.3.3 驗證樣式掛鈎 97
4.3.4 使用正則錶達式 98
4.3.5 自定義驗證 99
4.4 瀏覽器對Web 錶單和驗證的支持 101
4.4.1 用Modernizr 檢測支持情況 101
4.4.2 用HTML5Forms 兼容 102
4.5 新的輸入控件 104
4.5.1 電子郵件地址 106
4.5.2 網址 106
4.5.3 搜索框 107
4.5.4 電話號碼 107
4.5.5 數值 107
4.5.6 滑動條 108
4.5.7 日期和時間 108
4.5.8 顔色 110
4.6 新元素 110
4.6.1 使用<datalist>顯示輸入建議 110
4.6.2 進度條和計量條 113
4.6.3 使用<command>和<menu>創建工具條和菜單 115
4.7 網頁中的HTML 編輯器 115
4.7.1 使用contenteditable 編輯元素 115
4.7.2 使用designMode 編輯頁麵 117
第二部分 視頻、圖形和特效
第5章 音頻與視頻 122
5.1 網絡視頻的演變 122
5.2 HTML5 音頻與視頻 123
5.2.1 使用<audio>播放點噪音 124
5.2.2 預加載媒體文件 125
5.2.3 自動播放 125
5.2.4 循環播放 126
5.2.5 瞭解<video> 126
5.3 HTML5 媒體格式 128
5.3.1 談談格式 128
5.3.2 瀏覽器對媒體格式的支持情況 130
5.4 後備措施：如何討好每一款瀏覽器 131
5.4.1 支持多種格式 132
5.4.2 添加Flash 後備措施 134
5.5 使用JavaScript 控製播放器 137
5.5.1 添加音效 137
5.5.2 創建自定義視頻播放器 140
5.5.3 JavaScript 媒體播放器 142
5.6 視頻字幕 144
5.6.1 標記時間的文本軌道和WebVTT 145
5.6.2 使用<track>添加字幕 146
5.6.3 瀏覽器對視頻字幕的支持情況 148
第6章 美妙的CSS3 字體和特效 149
6.1 使用CSS3 149
6.1.1 選擇一：用能用的 150
6.1.2 選擇二：將CSS 功能作為增強 150
6.1.3 選擇三：Modernizr 151
6.1.4 有開發商前綴的特定於瀏覽器的樣式 154
6.2 多變的盒子 156
6.2.1 透明 157
6.2.2 圓角 158
6.2.3 背景 159
6.2.4 陰影 160
6.2.5 漸變 162
6.3 創建過渡效果 165
6.3.1 基本的顔色過渡 166
6.3.2 更多的過渡思路 168
6.3.3 用JavaScript 觸發過渡 168
6.3.4 變換 170
6.3.5 使用變換的過渡 173
6.4 Web 字體 174
6.4.1 Web 字體格式 176
6.4.2 給網站找個字體 177
6.4.3 從Font Squirrel 獲取免費字體 177
6.4.4 準備一個網絡字體 179
6.4.5 用榖歌更簡單地使用Web字體 181
6.4.6 多欄文本 184
第7章 CSS3 與響應式Web 設計 187
7.1 響應式設計基礎 187
7.1.1 流式布局 187
7.1.2 流式圖片 191
7.1.3 流式排版 192
7.1.4 理解視口 195
7.2 使用媒體查詢適配布局 196
7.2.1 媒體查詢 197
7.2.2 創建簡單的媒體查詢 198
7.2.3 構建移動設備友好的布局 199
7.2.4 媒體查詢的高級條件 202
7.2.5 替換整個樣式錶 204
7.2.6 識彆特定的移動設備 205
第8章 基本Canvas 繪圖 207
8.1 Canvas 起步 207
8.1.1 畫直綫 210
8.1.2 路徑與形狀 212
8.1.3 繪製麯綫 214
8.1.4 變換 217
8.1.5 透明度 220
8.1.6 閤成操作 221
8.2 構建基本的畫圖程序 223
8.2.1 準備工作 224
8.2.2 在畫布上繪圖 225
8.2.3 將畫布保存為圖像 226
8.3 瀏覽器對Canvas 的支持情況 229
8.3.1 用ExplorerCanvas 兼容Canvas 230
8.3.2 用FlashCanvas 兼容Canvas 230
8.3.3 Canvas 後備及功能檢測 231
第9章 高級Canvas 技術：交互性和動畫 233
9.1 高級Canvas 繪圖 233
9.1.1 繪製圖像 233
9.1.2 裁剪、切割和伸縮圖片 235
9.1.3 繪製文本 237
9.2 陰影與填充 238
9.2.1 添加陰影 238
9.2.2 填充圖案 240
9.2.3 填充漸變 241
9.2.4 綜閤示例：繪製圖解 245
9.3 賦予圖形交互能力 249
9.3.1 記錄繪製的內容 249
9.3.2 基於坐標的碰撞檢測 252
9.4 給Canvas 添加動畫 254
9.4.1 基本的動畫 255
9.4.2 多物體動畫 256
9.5 實例：迷宮遊戲 260
9.5.1 布置迷宮 261
9.5.2 讓笑臉動起來 263
9.5.3 基於像素顔色的碰撞檢測 265
第三部分 構建Web 應用
第10章 數據存儲 270
10.1 Web 存儲簡介 270
10.1.1 存儲數據 272
10.1.2 實戰：保存遊戲中的最後位置 274
10.1.3 瀏覽器對Web 存儲的支持情況 275
10.2 深入Web 存儲 276
10.2.1 刪除數據項 276
10.2.2 查找所有數據項 276
10.2.3 保存數值和日期 277
10.2.4 保存對象 278
10.2.5 響應存儲變化 279
10.3 讀取文件 281
10.3.1 取得文件 282
10.3.2 用<input>讀取文本文件 282
10.3.3 替換標準的上傳控件 284
10.3.4 一次讀取多個文件 285
10.3.5 通過拖曳讀取圖片文件 285
10.3.6 瀏覽器對File API 的支持情況 288
10.4 IndexDB：瀏覽器的數據庫引擎 288
10.4.1 數據對象 290
10.4.2 創建並連接數據庫 291
10.4.3 在數據庫中保存數據 293
10.4.4 在數據錶中查詢所有數據 295
10.4.5 查詢單條數據 297
10.4.6 刪除一條數據 298
10.4.7 瀏覽器對IndexedDB 的支持情況 299
第11章 離綫應用 300
11.1 通過描述文件緩存資源 301
11.1.1 創建描述文件 302
11.1.2 使用描述文件 303
11.1.3 把描述文件放到Web 服務器 304
11.1.4 更新描述文件 306
11.1.5 瀏覽器對離綫應用的支持情況 308
11.2 實用緩存技術 309
11.2.1 訪問未緩存的文件 309
11.2.2 添加後備內容 310
11.2.3 檢測連接 312
11.2.4 用JavaScript 監聽更新 313
第12章 與Web 服務器通信 317
12.1 嚮Web 服務器發送消息 317
12.1.1 XMLHttpRequest 對象 318
12.1.2 嚮Web 服務器提問 319
12.1.3 取得新內容 323
12.2 服務器發送事件 326
12.2.1 消息格式 327
12.2.2 通過服務器腳本發送消息 328
12.2.3 在網頁中處理消息 330
12.2.4 輪詢服務器端事件 331
12.3 Web Socket 333
12.3.1 Web Socket 服務器 333
12.3.2 簡單的Web Socket 客戶端 334
12.3.3 使用現成的Web Socket服務器 335
第13章 地理定位、Web Worker 和曆史管理 339
13.1 地理定位 339
13.1.1 地理定位的基本原理 340
13.1.2 查找訪客的坐標 342
13.1.3 處理錯誤 344
13.1.4 設置地理定位選項 345
13.1.5 顯示地圖 346
13.1.6 跟蹤訪客移動 349
13.1.7 瀏覽器對地理定位的兼容情況 349
13.2 Web Worker 350
13.2.1 費時的任務 351
13.2.2 把任務放在後颱 353
13.2.3 處理Worker 錯誤 356
13.2.4 取消後颱任務 356
13.2.5 傳遞復雜消息 357
13.2.6 瀏覽器對Web Worker 的兼容情況 359
13.3 曆史管理 360
13.3.1 URL 問題 361
13.3.2 以往的解決方案：hashbang URL 362
13.3.3 HTML5 的方案：會話曆史 363
13.3.4 瀏覽器對會話曆史的支持情況 366
第四部分 附 錄
附錄A CSS 基礎 368
附錄B JavaScript：頁麵的大腦 381
· · · · · · (
收起)
