HTML5+CSS3+JavaScript從入門到精通

第1篇 HTML5基礎
第1章 HTML5入門 2
視頻講解：60分鐘
1.1 HTML5概述 2
1.1.1 什麼是HTML 2
1.1.2 HTML的發展歷史 3
1.1.3 HTML5的新特性 3
1.1.4 HTML5的目標 5
1.2 HTML5的基本結構和語法 6
1.2.1 HTML5的基本結構 6
1.2.2 HTML5的語法 7
1.3 各流覽器對HTML5的支持 9
1.4 WebStorm簡介 9
1.4.1 WebStorm的下載 10
1.4.2 WebStorm的安裝 10
1.5 編寫第一個HTML檔 12
1.5.1 HTML檔的編寫方法 12
1.5.2 手工編寫頁面 12
1.5.3 使用WebStorm編寫頁面 13
1.6 實踐與練習 15
第2章 HTML5文檔結構 17
視頻講解：37分鐘
2.1 文檔基本結構 17
2.1.1 型別宣告 17
2.1.2 檔開始標籤 18
2.1.3 文件頭部 18
2.1.4 文件主體 19
2.1.5 注釋 21
2.2 主體結構元素 22
2.2.1 article元素 22
2.2.2 section元素 24
2.2.3 nav元素 25
2.2.4 aside元素 27
2.2.5 time元素 27
2.2.6 pubdate屬性 28
2.3 非主體結構元素 28
2.3.1 header元素 28
2.3.2 hgroup元素 29
2.3.3 footer元素 29
2.3.4 address元素 30
2.4 全域屬性 31
2.4.1 id、class、style屬性 31
2.4.2 title屬性 31
2.4.3 dir屬性 31
2.4.4 contentEditable屬性 32
2.4.5 designMode屬性 33
2.4.6 hidden屬性 34
2.4.7 spellcheck屬性 35
2.5 實踐與練習 36
第3章 HTML5文本 37
視頻講解：68分鐘
3.1 標題文本 37
3.2 普通文本 39
3.2.1 文字的斜體、下畫線、刪除線 39
3.2.2 文字的上標與下標 40
3.2.3 設置等寬文字 41
3.3 段落文本 42
3.3.1 段落標籤 42
3.3.2 段落的換行標籤 43
3.3.3 保留原始排版方式 44
3.3.4 段落縮進 45
3.4 功能性文本 45
3.4.1 標記文本 46
3.4.2 展開/收縮資訊 47
3.4.3 進度資訊 49
3.4.4 刻度信息 50
3.4.5 位址資訊 51
3.4.6 文字標注 52
3.4.7 作品標題資訊 53
3.5 實踐與練習 54
第4章 HTML5表格、清單和超連結 55
視頻講解：85分鐘
4.1 表格應用 55
4.1.1 表格的基本構成 55
4.1.2 設置表格的標題 57
4.1.3 設置表頭 58
4.1.4 合併儲存格 59
4.2 列表應用 61
4.2.1 列表的標籤 61
4.2.2 無序列表 61
4.2.3 有序列表 63
4.2.4 定義列表 65
4.2.5 嵌套列表 66
4.3 超連結 70
4.3.1 絕對路徑和相對路徑 70
4.3.2 文本連結 70
4.3.3 設置超連結的目標視窗 71
4.4 實踐與練習 73
第5章 HTML5表單 74
視頻講解：111分鐘
5.1 定義表單 74
5.1.1 處理動作 75
5.1.2 表單名稱 75
5.1.3 傳送方法 76
5.1.4 編碼方式 76
5.1.5 目標顯示方式 77
5.2 常用表單控制項 77
5.2.1 文字方塊 78
5.2.2 密碼框 79
5.2.3 選項按鈕 81
5.2.4 核取方塊 82
5.2.5 普通按鈕 83
5.2.6 提交按鈕 84
5.2.7 重新開機按鈕 85
5.2.8 圖像域 87
5.2.9 隱藏欄位 88
5.2.10 文件域 89
5.2.11 標籤 90
5.2.12 使用button定義按鈕 91
5.2.13 菜單和清單 92
5.2.14 文本域 93
5.3 input元素的新類型和屬性 94
5.3.1 input元素的新類型 95
5.3.2 input元素的新屬性 101
5.3.3 output元素 103
5.4 表單驗證 104
5.4.1 自動驗證 104
5.4.2 checkValidity顯式驗證法 105
5.4.3 避免驗證 106
5.4.4 自訂錯誤資訊 108
5.5 實踐與練習 109
第6章 HTML5圖像與多媒體 110
視頻講解：150分鐘
6.1 使用圖像 110
6.1.1 圖像的基本格式 111
6.1.2 添加圖像 111
6.1.3 設置圖像屬性 112
6.1.4 圖像的超連結 114
6.1.5 圖像熱區連結 115
6.2 多媒體簡述 117
6.3 HTML5中的多媒體 117
6.3.1 video元素與audio元素 117
6.3.2 多媒體元素的屬性 118
6.4 控制多媒體播放 122
6.4.1 媒體播放時的方法 122
6.4.2 canPlayType(type)方法 124
6.5 事件監聽 124
6.5.1 事件處理方式 124
6.5.2 事件介紹 125
6.5.3 事件應用 125
6.6 實踐與練習 127
第7章 HTML5繪圖 128
視頻講解：119分鐘
7.1 Canvas概述 128
7.2 繪製基本圖形 129
7.2.1 繪製直線 129
7.2.2 繪製曲線 131
7.2.3 繪製矩形 133
7.2.4 繪製圓形 135
7.3 繪製變形圖形 136
7.3.1 繪製平移效果的圖形 136
7.3.2 繪製縮放效果的圖形 137
7.3.3 繪製旋轉效果的圖形 138
7.4 繪製文字 139
7.4.1 文字的輪廓 139
7.4.2 文字的填充 140
7.4.3 文字相關屬性 141
7.5 SVG基礎 142
7.5.1 使用SVG的原因 142
7.5.2 使用SVG的方法 143
7.6 SVG繪製基本形狀 143
7.6.1 繪製矩形 143
7.6.2 繪製圓形 145
7.6.3 繪製橢圓 145
7.6.4 繪製直線 146
7.6.5 繪製折線 147
7.6.6 繪製文本 148
7.6.7 繪製路徑 149
7.7 SVG中的漸變 151
7.7.1 線性漸變 151
7.7.2 徑向漸變 152
7.8 實踐與練習 153

第2篇 CSS3基礎
第8章 CSS3概述 156
視頻講解：21分鐘
8.1 CSS的概念及發展 156
8.2 CSS規則 157
8.3 在頁面中使用CSS 158
8.3.1 行內樣式 158
8.3.2 內嵌式樣式表 158
8.3.3 連結式樣式表 159
8.3.4 樣式表調用的優先順序 160
8.4 CSS的繼承 160
8.4.1 HTML的繼承關係 160
8.4.2 CSS繼承的應用 162
8.5 實踐與練習 162
第9章 CSS3選擇器 163
視頻講解：52分鐘
9.1 選擇器概述 163
9.2 基本選擇器 164
9.2.1 元素選擇器 164
9.2.2 類別選取器 166
9.2.3 ID選擇器 167
9.2.4 屬性選擇器 170
9.3 複合選擇器 173
9.3.1 後代選擇器 173
9.3.2 子元素選擇器 174
9.3.3 相鄰兄弟元素選擇器 175
9.3.4 通用兄弟元素選擇器 175
9.4 偽類別選取器和偽元素選擇器 177
9.4.1 偽類別選取器 177
9.4.2 偽元素選擇器 177
9.5 實踐與練習 180
第10章 字體和文本相關屬性 181
視頻講解：28分鐘
10.1 字體屬性 181
10.1.1 設置字體類型 181
10.1.2 設置字體大小 182
10.1.3 設置文字顏色 183
10.1.4 設置文字粗細 183
10.2 文字屬性 184
10.2.1 設置水準對齊 184
10.2.2 設置文本間距 185
10.2.3 設置行高 185
10.2.4 設置首行縮進 186
10.2.5 設置文本換行 187
10.3 實踐與練習 188
第11章 背景和清單相關屬性 189
視頻講解：27分鐘
11.1 背景屬性 189
11.1.1 設置背景顏色 189
11.1.2 設置背景圖像 190
11.1.3 設置背景圖像平鋪方式 190
11.1.4 設置背景圖像是否固定 191
11.1.5 設置背景圖像位置 192
11.1.6 設置背景圖像大小 192
11.1.7 設置背景圖像的起點 193
11.2 清單屬性 194
11.2.1 設置清單項標記的類型 195
11.2.2 使用圖像替換清單項標記 195
11.3 實踐與練習 196
第12章 CSS3盒模型 198
視頻講解：30分鐘
12.1 框模型概述 198
12.2 設置元素大小 199
12.3 設置外邊距 199
12.3.1 設置一個值 200
12.3.2 設置兩個值 200
12.3.3 設置三個值 201
12.3.4 設置四個值 201
12.4 設置邊框 203
12.4.1 設置邊框顏色 203
12.4.2 設置邊框樣式 203
12.4.3 設置邊框寬度 204
12.5 設置內邊距 205
12.6 實踐與練習 207
第13章 網頁佈局 209
視頻講解：17分鐘
13.1 浮動佈局 209
13.1.1 定義浮動 209
13.1.2 清除浮動 211
13.2 定位屬性 212
13.2.1 設置定位方式 212
13.2.2 設置元素位置 212
13.2.3 設置堆疊順序 215
13.3 實踐與練習 216
第14章 CSS3變形與動畫 217
視頻講解：23分鐘
14.1 變換效果 217
14.1.1 定義2D平移 218
14.1.2 定義2D縮放 219
14.1.3 定義2D旋轉 219
14.1.4 定義2D傾斜 220
14.2 過渡效果 221
14.2.1 指定過渡屬性 222
14.2.2 指定過渡時間 222
14.2.3 指定過渡的延遲時間 223
14.2.4 指定過渡的動畫類型 223
14.3 動畫效果 225
14.3.1 關鍵幀 225
14.3.2 動畫屬性 226
14.4 實踐與練習 228
第15章 回應式網頁設計 229
視頻講解：44分鐘
15.1 回應式網頁設計概述 229
15.1.1 回應式網頁設計的概念 229
15.1.2 回應式網頁設計的優缺點和技術原理 230
15.2 常用術語 231
15.2.1 圖元 231
15.2.2 螢幕解析度 231
15.2.3 設備圖元 232
15.2.4 CSS圖元 232
15.3 視口 233
15.3.1 視口的概念 233
15.3.2 viewport屬性 234
15.3.3 媒體查詢 234
15.4 佈局設計 235
15.4.1 佈局的類型 236
15.4.2 佈局的實現方式 236
15.4.3 佈局的設計與實現 237
15.5 實踐與練習 238

第3篇 JavaScript基礎
第16章 JavaScript語言基礎 240
視頻講解：163分鐘
16.1 JavaScript簡述 240
16.1.1 JavaScript的發展史 241
16.1.2 JavaScript的特點 241
16.1.3 JavaScript的使用方法 242
16.1.4 基本語法 244
16.2 基底資料型別 246
16.2.1 數值型 246
16.2.2 字串型 248
16.2.3 布林型 250
16.2.4 特殊資料類型 250
16.3 變數 250
16.3.1 變數的命名 250
16.3.2 變數的聲明和賦值 251
16.3.3 變數的類型 252
16.4 運算子 253
16.4.1 算術運算子 253
16.4.2 字串運算子 254
16.4.3 比較運算子 255
16.4.4 設定運算子 256
16.4.5 邏輯運算子 257
16.4.6 條件運算子 257
16.4.7 運算子優先順序 258
16.5 資料類型的轉換規則 259
16.6 實踐與練習 261
第17章 流程控制 262
視頻講解：108分鐘
17.1 條件判斷語句 262
17.1.1 if語句 262
17.1.2 switch語句 267
17.2 迴圈語句 269
17.2.1 while迴圈語句 269
17.2.2 do…while迴圈語句 270
17.2.3 for迴圈語句 272
17.2.4 for…in迴圈語句 273
17.2.5 迴圈嵌套 274
17.3 跳躍陳述式 275
17.3.1 continue語句 275
17.3.2 break語句 276
17.4 實踐與練習 277
第18章 函數 278
視頻講解：66分鐘
18.1 定義函數 278
18.2 調用函數 279
18.2.1 函數的簡單調用 279
18.2.2 在事件回應中調用函數 280
18.2.3 通過連結調用函數 281
18.3 函數的參數和返回值 281
18.3.1 函數的參數 281
18.3.2 函數的返回值 282
18.4 函數的嵌套調用 284
18.5 全域變數和區域變數 285
18.6 匿名函數 285
18.7 內置函數 287
18.7.1 數值處理函數 287
18.7.2 字串處理函數 289
18.8 實踐與練習 290
第19章 JavaScript對象 291
視頻講解：225分鐘
19.1 對象簡介 291
19.1.1 物件的概念 292
19.1.2 物件的屬性和方法 292
19.1.3 JavaScript對象的種類 293
19.2 創建自訂對象 293
19.2.1 直接創建自訂物件 293
19.2.2 通過構造函數創建物件 294
19.2.3 通過Object創建對象 296
19.3 Array對象 297
19.3.1 陣列簡介 297
19.3.2 定義陣列 298
19.3.3 訪問陣列元素 299
19.3.4 獲取陣列的長度 301
19.3.5 運算元組 303
19.4 String對象 308
19.4.1 創建String對象 308
19.4.2 獲取字串的長度 309
19.4.3 操作字串 309
19.5 Math對象 315
19.5.1 Math物件的屬性 315
19.5.2 Math物件的方法 316
19.6 Date對象 317
19.6.1 創建Date對象 317
19.6.2 Date物件的方法 319
19.7 實踐與練習 321
第20章 事件處理機制 323
視頻講解：41分鐘
20.1 事件概述 323
20.1.1 事件簡介 324
20.1.2 事件的調用 324
20.1.3 事件物件Event 325
20.2 表單事件 326
20.2.1 onblur事件與onfocus事件 326
20.2.2 onchange事件 326
20.2.3 onsubmit事件與onreset事件 327
20.3 滑鼠事件和鍵盤事件 328
20.3.1 滑鼠事件 329
20.3.2 鍵盤事件 331
20.4 頁面事件 333
20.4.1 onload事件 333
20.4.2 onresize事件 334
20.5 實踐與練習 334
第21章 BOM程式設計 336
視頻講解：80分鐘
21.1 Window物件概述 336
21.1.1 Window物件的屬性 337
21.1.2 Window物件的方法 337
21.1.3 Window物件的使用 338
21.2 對話方塊 338
21.2.1 警告對話方塊 338
21.2.2 確認對話方塊 339
21.2.3 提示對話方塊 340
21.3 打開視窗與關閉視窗 341
21.3.1 打開視窗 341
21.3.2 關閉窗口 342
21.4 控制視窗 344
21.4.1 移動視窗 344
21.4.2 視窗滾動 346
21.4.3 訪問視窗歷史 347
21.4.4 設置超時 347
21.5 Document物件概述 348
21.6 Document物件的應用 349
21.6.1 設置文檔前景色和背景色 350
21.6.2 設置動態標題列 350
21.6.3 獲取URL 351
21.6.4 在文檔中輸出資料 351
21.6.5 動態添加一個HTML標記 352
21.6.6 獲取文字方塊並修改其內容 353
21.7 實踐與練習 354
第22章 DOM程式設計 355
視頻講解：60分鐘
22.1 DOM概述 355
22.2 獲取HTML元素 357
22.2.1 使用id屬性獲取元素 357
22.2.2 使用標籤名獲取元素 358
22.2.3 使用類名獲取元素 358
22.3 DOM節點屬性 358
22.4 操作節點 359
22.4.1 創建節點 359
22.4.2 插入節點 360
22.4.3 刪除節點 361
22.4.4 替換節點 362
22.5 獲取或設置元素的HTML內容 362
22.6 JavaScript操作元素樣式 364
22.6.1 Style對象簡介 364
22.6.2 樣式標籤屬性和樣式屬性 364
22.6.3 顏色和背景屬性 367
22.6.4 邊框屬性 369
22.6.5 定位屬性 372
22.6.6 字體屬性 373
22.6.7 表格佈局屬性 377
22.7 實踐與練習 378

第4篇 高級開發
第23章 文件與拖放 380
視頻講解：36分鐘
23.1 file對象 380
23.1.1 選擇檔 380
23.1.2 獲取文件的類型與大小 381
23.2 讀取文件 383
23.2.1 FileReader介面 383
23.2.2 預覽圖片 384
23.2.3 讀取文字檔 385
23.3 拖放文件 386
23.3.1 拖放頁面元素 386
23.3.2 DataTransfer物件的屬性與方法 388
23.3.3 設置拖放效果 389
23.4 實踐與練習 390
第24章 本機存放區 391
視頻講解：18分鐘
24.1 Web Storage 391
24.1.1 Web Storage概述 391
24.1.2 資料的存儲與獲取 392
24.1.3 資料的刪除與清空 393
24.2 本地資料庫 395
24.2.1 Web SQL資料庫概述 395
24.2.2 打開和創建資料庫 395
24.2.3 創建資料表 395
24.2.4 插入和查詢資料 396
24.3 實踐與練習 399
第25章 離線應用 400
視頻講解：21分鐘
25.1 離線Web應用 400
25.1.1 離線Web應用簡介 400
25.1.2 本地緩存與流覽器網頁緩存的區別 401
25.2 創建離線應用 401
25.2.1 緩存清單 402
25.2.2 applicationCache對象 404
25.2.3 離線應用的事件 404
25.3 實踐與練習 406
第26章 執行緒的使用 407
視頻講解：24分鐘
26.1 Web Workers概述 407
26.1.1 創建執行緒 407
26.1.2 處理執行緒的應用 409
26.1.3 與執行緒進行資料的交互 411
26.2 執行緒中可用的物件和方法 413
26.3 載入多個JavaScript檔 413
26.4 執行緒嵌套 414
26.4.1 執行緒的單層嵌套 414
26.4.2 子執行緒之間的資料交互 415
26.5 實踐與練習 418
第27章 通信API 419
視頻講解：9分鐘
27.1 跨文檔消息通信 419
27.1.1 使用postMessageAPI 419
27.1.2 跨文檔消息傳輸 420
27.1.3 跨域通信 421
27.2 實踐與練習 423
第28章 Vue.js程式設計 424
視頻講解：39分鐘
28.1 Vue.js概述 425
28.2 Vue.js的安裝 425
28.2.1 使用CDN 425
28.2.2 使用NPM 426
28.2.3 使用Vue CLI 426
28.3 應用程式實例及選項 426
28.3.1 數據 427
28.3.2 方法 427
28.3.3 生命週期鉤子函數 428
28.4 數據綁定 429
28.4.1 文本插值 429
28.4.2 插入HTML 430
28.4.3 使用運算式 430
28.5 指令 431
28.5.1 v-bind指令 431
28.5.2 v-on指令 432
28.5.3 v-if指令 433
28.5.4 v-else指令 434
28.5.5 v-else-if指令 435
28.5.6 v-for指令 436
28.5.7 v-model指令 437
28.6 實踐與練習 438
第29章 Bootstrap應用 439
視頻講解：95分鐘
29.1 Bootstrap概述 439
29.1.1 Bootstrap的概念 439
29.1.2 Bootstrap的優點 440
29.1.3 Bootstrap包含的內容 440
29.2 Bootstrap的下載和使用 440
29.2.1 Bootstrap的下載 440
29.2.2 Bootstrap的檔結構 442
29.2.3 Bootstrap的使用 443
29.3 通用樣式 444
29.3.1 文本樣式 444
29.3.2 顏色樣式 446
29.3.3 設置內外邊距 449
29.3.4 邊框與浮動 450
29.4 網格佈局 453
29.4.1 網格系統概述 453
29.4.2 自動佈局列 455
29.4.3 專案的對齊處理 458
29.5 實踐與練習 460

第5篇 專案實戰
第30章 51購商城 462
視頻講解：10分鐘
30.1 專案的設計思路 462
30.1.1 項目概述 462
30.1.2 介面預覽 463
30.1.3 系統功能結構 465
30.1.4 系統業務流程 465
30.1.5 資料夾組織結構 466
30.2 主頁的設計與實現 466
30.2.1 主頁的設計 466
30.2.2 頂部區和底部區功能的實現 468
30.2.3 商品分類導航功能的實現 469
30.2.4 輪播圖功能的實現 471
30.2.5 商品推薦功能的實現 473
30.2.6 適配移動端的實現 474
30.3 商品清單頁面的設計與實現 475
30.3.1 商品清單頁面的設計 475
30.3.2 分類選項功能的實現 476
30.3.3 商品列表區的實現 476
30.4 商品詳情頁面的設計與實現 478
30.4.1 商品詳情頁面的設計 478
30.4.2 圖片放大鏡效果的實現 479
30.4.3 商品概要功能的實現 481
30.4.4 商品評價功能的實現 482
30.4.5 猜你喜歡功能的實現 484
30.5 購物車頁面的設計與實現 485
30.5.1 購物車頁面的設計 485
30.5.2 購物車頁面的實現 486
30.6 付款頁面的設計與實現 487
30.6.1 付款頁面的設計 487
30.6.2 付款頁面的實現 487
30.7 登錄頁面和註冊頁面的設計與實現 489
30.7.1 登錄頁面和註冊頁面的設計 489
30.7.2 登錄頁面的實現 490
30.7.3 註冊頁面的實現 491
30.8 小結 493