HTML5+CSS3+JavaScript從入門到精通

第1篇 HTML5基礎
第1章 HTML5入門 2
視頻講解：60分鐘
1.1 HTML5概述 2
1.1.1 什么是HTML 2
1.1.2 HTML的發(fā)展歷史 3
1.1.3 HTML5的新特性 3
1.1.4 HTML5的目標 5
1.2 HTML5的基本結(jié)構和語法 6
1.2.1 HTML5的基本結(jié)構 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文檔結(jié)構 17
視頻講解：37分鐘
2.1 文檔基本結(jié)構 17
2.1.1 類型聲明 17
2.1.2 文件開始標簽 18
2.1.3 文件頭部 18
2.1.4 文件主體 19
2.1.5 注釋 21
2.2 主體結(jié)構元素 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 非主體結(jié)構元素 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 圖像熱區(qū)鏈接 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 事件監(jiān)聽 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 繪制旋轉(zhuǎn)效果的圖形 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的概念及發(fā)展 156
8.2 CSS規(guī)則 157
8.3 在頁面中使用CSS 158
8.3.1 行內(nèi)樣式 158
8.3.2 內(nèi)嵌式樣式表 158
8.3.3 鏈接式樣式表 159
8.3.4 樣式表調(diào)用的優(yōu)先順序 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 設置邊框?qū)挾?204
12.5 設置內(nèi)邊距 205
12.6 實踐與練習 207
第13章 網(wǎng)頁布局 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旋轉(zhuǎn) 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章 響應式網(wǎng)頁設計 229
視頻講解：44分鐘
15.1 響應式網(wǎng)頁設計概述 229
15.1.1 響應式網(wǎng)頁設計的概念 229
15.1.2 響應式網(wǎng)頁設計的優(yōu)缺點和技術原理 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 布局的實現(xiàn)方式 236
15.4.3 布局的設計與實現(xiàn) 237
15.5 實踐與練習 238
第3篇 JavaScript基礎
第16章 JavaScript語言基礎 240
視頻講解：163分鐘
16.1 JavaScript簡述 240
16.1.1 JavaScript的發(fā)展史 241
16.1.2 JavaScript的特點 241
16.1.3 JavaScript的使用方法 242
16.1.4 基本語法 244
16.2 基本數(shù)據(jù)類型 246
16.2.1 數(shù)值型 246
16.2.2 字符串型 248
16.2.3 布爾型 250
16.2.4 特殊數(shù)據(jù)類型 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 運算符優(yōu)先級 258
16.5 數(shù)據(jù)類型的轉(zhuǎn)換規(guī)則 259
16.6 實踐與練習 261
第17章 流程控制 262
視頻講解：108分鐘
17.1 條件判斷語句 262
17.1.1 if語句 262
17.1.2 switch語句 267
17.2 循環(huán)語句 269
17.2.1 while循環(huán)語句 269
17.2.2 do…while循環(huán)語句 270
17.2.3 for循環(huán)語句 272
17.2.4 for…in循環(huán)語句 273
17.2.5 循環(huán)嵌套 274
17.3 跳轉(zhuǎn)語句 275
17.3.1 continue語句 275
17.3.2 break語句 276
17.4 實踐與練習 277
第18章 函數(shù) 278
視頻講解：66分鐘
18.1 定義函數(shù) 278
18.2 調(diào)用函數(shù) 279
18.2.1 函數(shù)的簡單調(diào)用 279
18.2.2 在事件響應中調(diào)用函數(shù) 280
18.2.3 通過鏈接調(diào)用函數(shù) 281
18.3 函數(shù)的參數(shù)和返回值 281
18.3.1 函數(shù)的參數(shù) 281
18.3.2 函數(shù)的返回值 282
18.4 函數(shù)的嵌套調(diào)用 284
18.5 全局變量和局部變量 285
18.6 匿名函數(shù) 285
18.7 內(nèi)置函數(shù) 287
18.7.1 數(shù)值處理函數(shù) 287
18.7.2 字符串處理函數(shù) 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 創(chuàng)建自定義對象 293
19.2.1 直接創(chuàng)建自定義對象 293
19.2.2 通過構造函數(shù)創(chuàng)建對象 294
19.2.3 通過Object創(chuàng)建對象 296
19.3 Array對象 297
19.3.1 數(shù)組簡介 297
19.3.2 定義數(shù)組 298
19.3.3 訪問數(shù)組元素 299
19.3.4 獲取數(shù)組的長度 301
19.3.5 操作數(shù)組 303
19.4 String對象 308
19.4.1 創(chuàng)建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 創(chuàng)建Date對象 317
19.6.2 Date對象的方法 319
19.7 實踐與練習 321
第20章 事件處理機制 323
視頻講解：41分鐘
20.1 事件概述 323
20.1.1 事件簡介 324
20.1.2 事件的調(diào)用 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 設置動態(tài)標題欄 350
21.6.3 獲取URL 351
21.6.4 在文檔中輸出數(shù)據(jù) 351
21.6.5 動態(tài)添加一個HTML標記 352
21.6.6 獲取文本框并修改其內(nèi)容 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節(jié)點屬性 358
22.4 操作節(jié)點 359
22.4.1 創(chuàng)建節(jié)點 359
22.4.2 插入節(jié)點 360
22.4.3 刪除節(jié)點 361
22.4.4 替換節(jié)點 362
22.5 獲取或設置元素的HTML內(nèi)容 362
22.6 JavaScript操作元素樣式 364
22.6.1 Style對象簡介 364
22.6.2 樣式標簽屬性和樣式屬性 364
22.6.3 顏色和背景屬性 367
22.6.4 邊框?qū)傩?369
22.6.5 定位屬性 372
22.6.6 字體屬性 373
22.6.7 表格布局屬性 377
22.7 實踐與練習 378
第4篇 高級開發(fā)
第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 數(shù)據(jù)的存儲與獲取 392
24.1.3 數(shù)據(jù)的刪除與清空 393
24.2 本地數(shù)據(jù)庫 395
24.2.1 Web SQL數(shù)據(jù)庫概述 395
24.2.2 打開和創(chuàng)建數(shù)據(jù)庫 395
24.2.3 創(chuàng)建數(shù)據(jù)表 395
24.2.4 插入和查詢數(shù)據(jù) 396
24.3 實踐與練習 399
第25章 離線應用 400
視頻講解：21分鐘
25.1 離線Web應用 400
25.1.1 離線Web應用簡介 400
25.1.2 本地緩存與瀏覽器網(wǎng)頁緩存的區(qū)別 401
25.2 創(chuàng)建離線應用 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 創(chuàng)建線程 407
26.1.2 處理線程的應用 409
26.1.3 與線程進行數(shù)據(jù)的交互 411
26.2 線程中可用的對象和方法 413
26.3 加載多個JavaScript文件 413
26.4 線程嵌套 414
26.4.1 線程的單層嵌套 414
26.4.2 子線程之間的數(shù)據(jù)交互 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 應用程序?qū)嵗斑x項 426
28.3.1 數(shù)據(jù) 427
28.3.2 方法 427
28.3.3 生命周期鉤子函數(shù) 428
28.4 數(shù)據(jù)綁定 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的優(yōu)點 440
29.1.3 Bootstrap包含的內(nèi)容 440
29.2 Bootstrap的下載和使用 440
29.2.1 Bootstrap的下載 440
29.2.2 Bootstrap的文件結(jié)構 442
29.2.3 Bootstrap的使用 443
29.3 通用樣式 444
29.3.1 文本樣式 444
29.3.2 顏色樣式 446
29.3.3 設置內(nèi)外邊距 449
29.3.4 邊框與浮動 450
29.4 網(wǎng)格布局 453
29.4.1 網(wǎng)格系統(tǒng)概述 453
29.4.2 自動布局列 455
29.4.3 項目的對齊處理 458
29.5 實踐與練習 460
第5篇 項目實戰(zhàn)
第30章 51購商城 462
視頻講解：10分鐘
30.1 項目的設計思路 462
30.1.1 項目概述 462
30.1.2 界面預覽 463
30.1.3 系統(tǒng)功能結(jié)構 465
30.1.4 系統(tǒng)業(yè)務流程 465
30.1.5 文件夾組織結(jié)構 466
30.2 主頁的設計與實現(xiàn) 466
30.2.1 主頁的設計 466
30.2.2 頂部區(qū)和底部區(qū)功能的實現(xiàn) 468
30.2.3 商品分類導航功能的實現(xiàn) 469
30.2.4 輪播圖功能的實現(xiàn) 471
30.2.5 商品推薦功能的實現(xiàn) 473
30.2.6 適配移動端的實現(xiàn) 474
30.3 商品列表頁面的設計與實現(xiàn) 475
30.3.1 商品列表頁面的設計 475
30.3.2 分類選項功能的實現(xiàn) 476
30.3.3 商品列表區(qū)的實現(xiàn) 476
30.4 商品詳情頁面的設計與實現(xiàn) 478
30.4.1 商品詳情頁面的設計 478
30.4.2 圖片放大鏡效果的實現(xiàn) 479
30.4.3 商品概要功能的實現(xiàn) 481
30.4.4 商品評價功能的實現(xiàn) 482
30.4.5 猜你喜歡功能的實現(xiàn) 484
30.5 購物車頁面的設計與實現(xiàn) 485
30.5.1 購物車頁面的設計 485
30.5.2 購物車頁面的實現(xiàn) 486
30.6 付款頁面的設計與實現(xiàn) 487
30.6.1 付款頁面的設計 487
30.6.2 付款頁面的實現(xiàn) 487
30.7 登錄頁面和注冊頁面的設計與實現(xiàn) 489
30.7.1 登錄頁面和注冊頁面的設計 489
30.7.2 登錄頁面的實現(xiàn) 490
30.7.3 注冊頁面的實現(xiàn) 491
30.8 小結(jié) 493