HTML5 從入門到精通（微課精編版）

目  錄
第1 章 HTML5 基礎(chǔ)   1
視頻講解：23 分鐘
1.1 HTML5概述   2
1.1.1 HTML歷史  2
1.1.2 HTML5起源  2
1.1.3 HTML5組織  4
1.1.4 HTML5規(guī)則  4
1.1.5 HTML5特性  4
1.1.6 瀏覽器檢測  6
1.2 HTML5設(shè)計原則 6
1.2.1 避免不必要的復(fù)雜性  6
1.2.2 支持已有內(nèi)容  7
1.2.3 解決實際問題  7
1.2.4 用戶怎么使用就怎么設(shè)計規(guī)范  8
1.2.5 優(yōu)雅地降級  8
1.2.6 支持的優(yōu)先級  9
1.3 HTML5語法特性 10
1.3.1 文檔和標(biāo)記  10
1.3.2 寬松的約定 11
1.4 HTML5 API 12
1.4.1 新增的API  12
1.4.2 修改的API  12
1.4.3 擴展Document  12
1.4.4 擴展HTMLElement  12
1.4.5 擴展DOM HTML  12
1.4.6 棄用的API  12
第2 章 創(chuàng)建HTML5 文檔 13
視頻講解：4 分鐘
2.1 HTML5基本結(jié)構(gòu) 14
2.1.1 新建網(wǎng)頁文檔  14
2.1.2 網(wǎng)頁頭部信息  15
2.1.3 網(wǎng)頁主體內(nèi)容  15
2.1.4 HTML標(biāo)簽  16
2.1.5 保存網(wǎng)頁文檔  18
2.2 語義化HTML   18
2.2.1 語義化的重要性  18
2.2.2 語義化的基本方法  18
2.3 案例實戰(zhàn) 19
2.3.1 編寫個HTML5文檔  19
2.3.2 比較HTML4與HTML5文檔結(jié)構(gòu)  20
2.4 在線練習(xí) 21
第3 章 設(shè)計HTML5 文檔結(jié)構(gòu)   22
視頻講解：36 分鐘
3.1 頭部信息 23
3.1.1 定義網(wǎng)頁標(biāo)題  23
3.1.2 定義網(wǎng)頁元信息  24
3.1.3 定義文檔視口  25
3.1.4 head指南  27
3.1.5 移動版頭信息  27
3.2 構(gòu)建基本結(jié)構(gòu) 27
3.2.1 定義文檔結(jié)構(gòu)  27
3.2.2 定義內(nèi)容標(biāo)題  28
3.2.3 使用div元素  30
3.2.4 使用id和class 31
3.2.5 使用title  32
3.2.6 HTML注釋  32
3.3 構(gòu)建語義結(jié)構(gòu) 33
3.3.1 定義頁眉  33
3.3.2 定義導(dǎo)航  34
3.3.3 定義主要區(qū)域  35
3.3.4 定義文章塊  36
3.3.5 定義區(qū)塊  37
3.3.6 定義附欄  40
3.3.7 定義頁腳  41
3.3.8 使用role  42
3.4 案例實戰(zhàn) 44
3.5 HTML5文檔大綱 46
3.6 在線練習(xí) 46
第4 章 設(shè)計HTML5 文本 47
視頻講解：1 小時1 分鐘
4.1 通用文本 48
4.1.1 標(biāo)題文本  48
4.1.2 段落文本  48
4.2 描述文本 49
4.2.1 強調(diào)文本  49
4.2.2 標(biāo)記細(xì)則  49
4.2.3 特殊格式  50
4.2.4 定義上標(biāo)和下標(biāo)  50
4.2.5 定義術(shù)語  52
4.2.6 標(biāo)記代碼  53
4.2.7 預(yù)定義格式  53
4.2.8 定義縮寫詞  54
4.2.9 標(biāo)注編輯或不用文本  55
4.2.10 指明引用或參考  56
4.2.11 引述文本  56
4.2.12 換行顯示  58
4.2.13 修飾文本  58
4.2.14 非文本注解  59
4.3 特殊文本 59
4.3.1 標(biāo)記高亮顯示  59
4.3.2 標(biāo)記進(jìn)度信息  60
4.3.3 標(biāo)記刻度信息  61
4.3.4 標(biāo)記時間信息  62
4.3.5 標(biāo)記聯(lián)系信息  63
4.3.6 標(biāo)記顯示方向  64
4.3.7 標(biāo)記換行斷點  65
4.3.8 標(biāo)記旁注  65
4.4 HTML5全局屬性 66
4.4.1 可編輯內(nèi)容  66
4.4.2 快捷菜單  67
4.4.3 自定義屬性  67
4.4.4 定義可拖動操作  69
4.4.5 拖動數(shù)據(jù)  69
4.4.6 隱藏元素  69
4.4.7 語法檢查  69
4.4.8 翻譯內(nèi)容  70
4.5 在線練習(xí) 70
第5 章 設(shè)計HTML5 圖像和多媒體   71
視頻講解：51 分鐘
5.1 認(rèn)識HTML5圖像 72
5.2 使用圖像 73
5.2.1 使用img元素  73
5.2.2 定義流內(nèi)容  74
5.2.3 插入圖標(biāo)  75
5.2.4 定義圖像大小  76
5.2.5 案例：圖文混排  77
5.3 使用多媒體插件   78
5.3.1 使用embed元素  78
5.3.2 使用object元素  79
5.4 使用HTML5多媒體 80
5.4.1 使用audio元素 81
5.4.2 使用video元素 82
5.5 案例實戰(zhàn) 86
5.5.1 設(shè)計新聞?wù)捻?nbsp; 86
5.5.2 設(shè)計音樂播放器  90
5.5.3 設(shè)計視頻播放器  92
5.6 HTML5多媒體API 95
5.6.1 設(shè)置屬性  95
5.6.2 設(shè)置方法  95
5.6.3 設(shè)置事件  95
5.6.4 綜合案例  95
5.7 在線練習(xí) 99
第6 章 設(shè)計列表和鏈接   100
視頻講解：52 分鐘
6.1 定義列表 101
6.1.1 無序列表  101
6.1.2 有序列表  102
6.1.3 項目編號  103
6.1.4 設(shè)計CSS樣式  104
6.1.5 嵌套列表  105
6.1.6 描述列表  106
6.1.7 菜單列表  108
6.1.8 快捷菜單 110
6.2 定義鏈接 112
6.2.1 普通鏈接 112
6.2.2 塊鏈接 113
6.2.3 錨點鏈接 114
6.2.4 目標(biāo)鏈接 115
6.2.5 下載鏈接 116
6.2.6 圖像熱點 117
6.2.7 框架鏈接 117
6.3 案例實戰(zhàn) 119
6.3.1 為快捷菜單添加命令   119
6.3.2 設(shè)計快捷“我要分享”命令  120
6.3.3 設(shè)計任務(wù)列表命令  121
6.3.4 設(shè)計排行榜列表結(jié)構(gòu)  122
6.3.5 設(shè)計圖文列表欄目  124
6.4 在線練習(xí) 127
第7 章 設(shè)計表格   128
視頻講解：36 分鐘
7.1 認(rèn)識表格結(jié)構(gòu) 129
7.2 新建表格 130
7.2.1 定義普通表格  131
7.2.2 定義列標(biāo)題  131
7.2.3 定義表格標(biāo)題  132
7.2.4 表格行分組  133
7.2.5 表格列分組  134
7.3 設(shè)置屬性   137
7.3.1 定義單線表格  137
7.3.2 定義分離單元格  138
7.3.3 定義細(xì)線邊框  139
7.3.4 添加表格說明  140
7.4 設(shè)置和屬性 140
7.4.1 定義跨單元格顯示  140
7.4.2 定義表頭單元格  141
7.4.3 為單元格指定表頭  142
7.4.4 定義信息縮寫  143
7.4.5 單元格分類  143
7.5 案例實戰(zhàn)：設(shè)計CSS禪意花園   144
7.5.1 網(wǎng)站預(yù)覽  144
7.5.2 設(shè)計方法  146
7.5.3 設(shè)計思路  147
7.5.4 構(gòu)建基本框架  147
7.5.5 完善網(wǎng)頁結(jié)構(gòu)  148
7.6 在線練習(xí) 151
第8 章 設(shè)計表單   152
視頻講解：1 小時12 分鐘
8.1 認(rèn)識HTML5表單 153
8.2 定義表單 154
8.3 提交表單 156
8.4 組織表單 156
8.5 定義文本框 158
8.6 定義標(biāo)簽 159
8.7 使用常用控件 160
8.7.1 密碼框  161
8.7.2 單選按鈕  161
8.7.3 復(fù)選框  162
8.7.4 文本區(qū)域  162
8.7.5 選擇框  164
8.7.6 上傳文件  165
8.7.7 隱藏字段  166
8.7.8 提交按鈕  166
8.8 HTML5新型輸入框 168
8.8.1 定義E-mail框 168
8.8.2 定義URL框  168
8.8.3 定義數(shù)字框  169
8.8.4 定義范圍框  170
8.8.5 定義日期選擇器  171
8.8.6 定義搜索框  175
8.8.7 定義電話號碼框  176
8.8.8 定義拾色器  177
8.9 HTML5輸入屬性 177
8.9.1 定義自動完成  177
8.9.2 定義自動獲取焦點  178
8.9.3 定義所屬表單  179
8.9.4 定義表單重寫  180
8.9.5 定義高和寬  181
8.9.6 定義列表選項  181
8.9.7 定義小值、值和步長  181
8.9.8 定義多選  182
8.9.9 定義匹配模式  182
8.9.10 定義替換文本  183
8.9.11 定義必填  184
8.10 HTML5新表單元素 184
8.10.1 定義數(shù)據(jù)列表  184
8.10.2 定義密鑰對生成器  185
8.10.3 定義輸出結(jié)果  186
8.11 HTML5表單屬性 187
8.11.1 定義自動完成  187
8.11.2 定義禁止驗證  187
8.12 在線練習(xí) 188
第9 章 綜合實戰(zhàn)：設(shè)計IT 博客   189
視頻講解：6 分鐘
9.1 準(zhǔn)備工作 190
9.2 設(shè)計首頁 190
9.2.1 首頁分析  190
9.2.2 構(gòu)建網(wǎng)頁標(biāo)題  191
9.2.3 構(gòu)建側(cè)邊欄  192
9.2.4 構(gòu)建主體內(nèi)容  194
9.2.5 構(gòu)建版權(quán)信息  196
9.3 設(shè)計詳細(xì)頁 197
9.4 在線練習(xí) 200
第10 章 JavaScript 基礎(chǔ)   201
視頻講解：2 小時19 分鐘
10.1 在網(wǎng)頁中使用JavaScript   202
10.1.1 編寫腳本  202
10.1.2 腳本在網(wǎng)頁中的位置  204
10.2 JavaScript基本規(guī)范   205
10.3 變量和類型 205
10.3.1 變量  205
10.3.2 數(shù)據(jù)類型  206
10.4 表達(dá)式和運算符   207
10.4.1 表達(dá)式  207
10.4.2 運算符  207
10.5 語 句 209
10.5.1 表達(dá)式語句和語句塊  209
10.5.2 條件語句  209
10.5.3 循環(huán)語句  212
10.5.4 跳轉(zhuǎn)語句  213
10.6 函 數(shù) 214
10.6.1 定義函數(shù)  214
10.6.2 調(diào)用函數(shù)  215
10.6.3 函數(shù)參數(shù)  216
10.7 對 象 217
10.7.1 創(chuàng)建對象  218
10.7.2 訪問對象  218
10.8 數(shù) 組 219
10.8.1 定義數(shù)組  219
10.8.2 存取元素  220
10.8.3 應(yīng)用數(shù)組  221
10.9 在線練習(xí) 221
第11 章 HTML5 繪圖與動畫222
視頻講解：2 小時15 分鐘
11.1 使用canvas 223
11.2 繪制圖形   225
11.2.1 矩形  225
11.2.2 路徑  226
11.2.3 直線段  227
11.2.4 圓弧  228
11.2.5 二次貝塞爾曲線  230
11.2.6 三次貝塞爾曲線  231
11.3 定義樣式和顏色 232
11.3.1 顏色  233
11.3.2 不透明度  234
11.3.3 實線  235
11.3.4 虛線  237
11.3.5 線性漸變  238
11.3.6 徑向漸變  239
11.3.7 圖案  240
11.3.8 陰影  240
11.3.9 填充規(guī)則  241
11.4 圖形變形   242
11.4.1 保存和恢復(fù)狀態(tài)  242
11.4.2 清除畫布  243
11.4.3 移動坐標(biāo)  244
11.4.4 旋轉(zhuǎn)坐標(biāo)  245
11.4.5 縮放圖形  246
11.4.6 變換圖形  247
11.5 圖形合成   248
11.5.1 合成  249
11.5.2 裁切  251
11.6 繪制文本   252
11.6.1 填充文字  252
11.6.2 輪廓文字  253
11.6.3 文本樣式  253
11.6.4 測量寬度  255
11.7 使用圖像   256
11.7.1 導(dǎo)入圖像  256
11.7.2 縮放圖像  258
11.7.3 裁切圖像  258
11.7.4 平鋪圖像  259
11.8 像素操作   260
11.8.1 認(rèn)識ImageData對象  260
11.8.2 創(chuàng)建圖像數(shù)據(jù)  261
11.8.3 將圖像數(shù)據(jù)寫入畫布  261
11.8.4 在畫布中復(fù)制圖像數(shù)據(jù)  262
11.8.5 保存圖片  263
11.9 Path2D對象   264
11.10 案例實戰(zhàn)   264
11.10.1 設(shè)計基本動畫  264
11.10.2 顏色選擇器  264
11.10.3 給圖像去色  265
11.10.4 縮放圖像和反鋸齒處理  265
11.10.5 設(shè)計運動動畫  266
11.10.6 設(shè)計地球和月球公轉(zhuǎn)動畫  266
11.11 在線練習(xí)   266
第12 章 使用SVG 267
視頻講解：1 小時18 分鐘
12.1 SVG基礎(chǔ) 268
12.1.1 SVG發(fā)展歷史  268
12.1.2 SVG特點  268
12.1.3 在HTML中應(yīng)用SVG  269
12.1.4 案例：設(shè)計個SVG圖形  269
12.2 使用SVG 271
12.2.1 矩形  271
12.2.2 圓形  272
12.2.3 橢圓  273
12.2.4 多邊形  275
12.2.5 直線段  276
12.2.6 折線  277
12.2.7 路徑  278
12.2.8 文本  280
12.2.9 線框樣式  281
12.2.10 SVG濾鏡  284
12.2.11 模糊效果  285
12.2.12 陰影效果  285
12.2.13 線性漸變  286
12.2.14 放射漸變  287
12.3 案例實戰(zhàn) 288
12.3.1 手繪簡筆畫  288
12.3.2 描邊動畫  288
12.3.3 設(shè)計特效文字  288
12.3.4 自定義濾鏡  289
12.4 在線練習(xí) 289
第13 章 HTML5 本地存儲   290
視頻講解：1 小時8 分鐘
13.1 Web Storage 291
13.1.1 使用Web Storage  291
13.1.2 案例：記錄用戶登錄信息（1）  293
13.1.3 案例：計數(shù)器  294
13.2 Web SQL Database 295
13.2.1 使用Web SQL Database  295
13.2.2 案例：記錄用戶登錄信息（2）  300
13.2.3 案例：設(shè)計留言板  301
13.3 indexedDB 302
13.3.1 建立連接  302
13.3.2 更新版本  304
13.3.3 新建倉庫  306
13.3.4 新建索引  307
13.3.5 使用事務(wù)  309
13.3.6 保存數(shù)據(jù)  310
13.3.7 訪問數(shù)據(jù)  312
13.3.8 訪問鍵值  313
13.3.9 訪問屬性  313
13.3.10 案例：設(shè)計圖書管理頁面  314
13.4 在線練習(xí) 314
第14 章 HTML5 離線緩存   315
視頻講解：19 分鐘
14.1 ApplicationCache API基礎(chǔ)316
14.1.1 認(rèn)識ApplicationCache API  316
14.1.2 配置服務(wù)器  317
14.1.3 認(rèn)識manifest  318
14.1.4 使用ApplicationCache 320
14.1.5 事件監(jiān)聽  324
14.2 案例實戰(zhàn) 325
14.2.1 緩存首頁  325
14.2.2 離線編輯  328
14.3 在線練習(xí) 328
第15 章 HTML5 Web Workers   329
視頻講解：23 分鐘
15.1 Web Workers基礎(chǔ) 330
15.1.1 認(rèn)識Web Workers  330
15.1.2 創(chuàng)建Web Workers  331
15.1.3 Workers通信  333
15.1.4 使用Web Workers  334
15.2 案例實戰(zhàn) 337
15.2.1 求和運算  337
15.2.2 過濾運算  339
15.2.3 并發(fā)運算  341
15.2.4 多運算通信  341
15.2.5 數(shù)列運算  341
第16 章 HTML5 文件操作   342
視頻講解：1 小時24 分鐘
16.1 FileList 343
16.2 Blob   344
16.2.1 訪問Blob  344
16.2.2 創(chuàng)建Blob  345
16.2.3 截取Blob  347
16.2.4 保存Blob  348
16.3 FileReader   349
16.3.1 讀取文件  349
16.3.2 事件監(jiān)測  351
16.4 ArrayBuffer和ArrayBufferView   353
16.4.1 使用ArrayBuffer  353
16.4.2 使用ArrayBufferView  353
16.4.3 使用DataView  354
16.5 FileSystem API 357
16.5.1 認(rèn)識FileSystem API  357
16.5.2 訪問FileSystem  358
16.5.3 申請配額  359
16.5.4 新建文件  363
16.5.5 寫入數(shù)據(jù)  365
16.5.6 添加數(shù)據(jù)  366
16.5.7 讀取數(shù)據(jù)  367
16.5.8 復(fù)制文件  369
16.5.9 刪除文件  370
16.5.10 創(chuàng)建目錄  371
16.5.11 讀取目錄  371
16.5.12 刪除目錄  372
16.5.13 復(fù)制目錄  372
16.5.14 重命名目錄  372
16.5.15 使用filesystem:URL  372
16.6 案例：設(shè)計資源管理器   373
16.7 在線練習(xí) 373
第17 章 HTML5 通信 374
視頻講解：21 分鐘
17.1 跨文檔消息傳遞   375
17.1.1 postMessage基礎(chǔ)  375
17.1.2 案例：設(shè)計簡單的跨域通話  376
17.1.3 案例：設(shè)計跨域動態(tài)對話  377
17.1.4 案例：設(shè)計通道通信  378
17.2 WebSockets通信 381
17.2.1 WebSocket基礎(chǔ)  381
17.2.2 使用WebSockets API 382
17.2.3 在PHP中建立socket  386
17.2.4 WebSockets API開發(fā)框架  387
17.2.5 案例：設(shè)計簡單的“呼-應(yīng)”通信  388
17.2.6 案例：發(fā)送JSON對象  393
17.2.7 案例：使用Workerman框架通信  394
17.2.8 案例：推送信息  395
17.3 在線練習(xí) 395
第18 章 拖放操作   396
視頻講解：19 分鐘
18.1 拖放API基礎(chǔ) 397
18.1.1 拖放功能實現(xiàn)  397
18.1.2 DataTransfer對象  400
18.2 案例實戰(zhàn) 402
18.2.1 設(shè)計垃圾箱  403
18.2.2 設(shè)計接納箱  405
18.2.3 拖選對象  405
18.2.4 可視化刪除  406
18.3 在線練習(xí) 406
第19 章 HTML5 Ajax 407
視頻講解：38 分鐘
19.1 XMLHttpRequest 2基礎(chǔ)408
19.1.1 請求時限  408
19.1.2 FormData數(shù)據(jù)對象  408
19.1.3 上傳文件  409
19.1.4 跨域訪問  409
19.1.5 響應(yīng)不同類型數(shù)據(jù)  409
19.1.6 接收二進(jìn)制數(shù)據(jù)  409
19.1.7 監(jiān)測數(shù)據(jù)傳輸進(jìn)度  410
19.2 案例實戰(zhàn) 411
19.2.1 接收ArrayBuffer對象 411
19.2.2 接收Blob對象  414
19.2.3 發(fā)送字符串  414
19.2.4 發(fā)送表單數(shù)據(jù)  415
19.2.5 發(fā)送二進(jìn)制文件  417
19.2.6 發(fā)送Blob對象  418
19.2.7 跨域請求  418
19.2.8 設(shè)計文件上傳進(jìn)度條  419
19.3 在線練習(xí) 419
第20 章 WebRTC 視頻直播 420
20.1 WebRTC基礎(chǔ) 421
20.2 案例實戰(zhàn) 421
20.2.1 訪問本地設(shè)備  421
20.2.2 視頻截圖  423
20.2.3 視頻對話基礎(chǔ)  424
20.2.4 視頻對話實現(xiàn)  425
20.2.5 SDP交換  432
20.2.6 ICE交換  437
20.3 在線練習(xí) 439
第21 章 HTML5 定位 440
視頻講解：2 分鐘
21.1 Geolocation API基礎(chǔ)   441
21.1.1 Geolocation API應(yīng)用場景  441
21.1.2 位置信息來源  441
21.1.3 位置信息表示方式  441
21.1.4 獲取位置信息  442
21.1.5 瀏覽器兼容性  444
21.1.6 監(jiān)測位置信息  444
21.1.7 停止獲取位置信息  445
21.1.8 保護(hù)隱私  445
21.1.9 處理位置信息  445
21.1.10 使用position 446
21.2 案例：設(shè)計位置地圖   447
21.3 在線練習(xí) 448
第22 章 HTML5 History 449
視頻講解：26 分鐘
22.1 History API基礎(chǔ) 450
22.1.1 了解History API  450
22.1.2 使用History API  451
22.1.3 注意事項  453
22.2 案例實戰(zhàn) 453
22.2.1 設(shè)計導(dǎo)航頁面  453
22.2.2 設(shè)計無刷新網(wǎng)站  455
22.2.3 設(shè)計無刷新燈箱廣告  459
22.2.4 設(shè)計可后退畫板  460
22.3 在線練習(xí) 460
第23 章 HTML5 通知和顯示處理   461
視頻講解：23 分鐘
23.1 通知API 462
23.1.1 Notification API基礎(chǔ)  462
23.1.2 案例：設(shè)計桌面通知  464
23.1.3 案例：關(guān)閉通知  465
23.1.4 案例：設(shè)計多條通知  466
23.2 頁面可見API 467
23.2.1 Page Visibility基礎(chǔ)  467
23.2.2 案例：設(shè)計視頻頁面  469
23.2.3 案例：設(shè)計登錄頁面  471
23.3 全屏API 472
23.3.1 Fullscreen API基礎(chǔ). 472
23.3.2 案例：設(shè)計全屏顯示  474
23.3.3 案例：設(shè)計全屏播放  476
23.4 在線練習(xí) 477
第24 章 綜合實戰(zhàn)：設(shè)計響應(yīng)式網(wǎng)站   478
24.1 認(rèn)識響應(yīng)式Web設(shè)計 479
24.2 構(gòu)建頁面 479
24.3 設(shè)計基本樣式   482
24.3.1 兼容早期瀏覽器  482
24.3.2 重置默認(rèn)樣式  482
24.4 設(shè)計響應(yīng)式樣式   483
24.4.1 創(chuàng)建可伸縮圖像  483
24.4.2 創(chuàng)建彈性布局網(wǎng)格  484
24.4.3 實現(xiàn)媒體查詢  484
24.4.4 組合樣式  488
24.4.5 兼容舊版IE  494