Web前端開發(fā)實(shí)戰(zhàn)：HTML5+CSS3+JavaScript+Vue+Bootstrap（微視頻版）

第 1 章　HTML5基礎(chǔ) 1
1.1　HTML5概述 2
1.1.1　HTML5發(fā)展歷程 2
1.1.2　HTML5設(shè)計(jì)理念 2
1.2　新建HTML5文檔 4
1.2.1　創(chuàng)建空白文檔 4
1.2.2　添加網(wǎng)頁(yè)內(nèi)容 5
1.3　頭部信息 7
1.3.1　網(wǎng)頁(yè)標(biāo)題 7
1.3.2　網(wǎng)頁(yè)元信息 7
1.3.3　文檔視口 8
1.4　基本結(jié)構(gòu) 10
1.4.1　定義文檔結(jié)構(gòu) 10
1.4.2　使用div元素 11
1.4.3　使用id和class 12
1.4.4　使用title 12
1.4.5　使用role 13
1.4.6　HTML5注釋 13
1.5　主體結(jié)構(gòu) 14
1.5.1　頁(yè)眉 14
1.5.2　導(dǎo)航 14
1.5.3　主要區(qū)域 15
1.5.4　文章塊 15
1.5.5　區(qū)塊 16
1.5.6　附欄 16
1.5.7　頁(yè)腳 17
第 2 章　文本和圖像 18
2.1　標(biāo)題和段落 19
2.1.1　定義標(biāo)題 19
2.1.2　定義段落 20
2.2　文本格式 20
2.2.1　字體 20
2.2.2　字號(hào) 21
2.2.3　顏色 22
2.2.4　強(qiáng)調(diào) 23
2.2.5　注解 23
2.2.6　備選 24
2.2.7　上下標(biāo) 24
2.2.8　術(shù)語(yǔ) 25
2.2.9　代碼 26
2.2.10　預(yù)定義格式 26
2.2.11　縮寫詞 27
2.2.12　編輯提示 27
2.2.13　引用 28
2.2.14　引述 28
2.2.15　修飾 29
2.2.16　換行顯示 30
2.3　特殊效果 30
2.3.1　高亮 30
2.3.2　進(jìn)度 31
2.3.3　刻度 31
2.3.4　時(shí)間 32
2.3.5　聯(lián)系信息 33
2.3.6　旁注 34
2.4　網(wǎng)頁(yè)圖像 34
2.4.1　定義圖像 34
2.4.2　定義流 35
2.4.3　定義圖標(biāo) 36
2.4.4　定義響應(yīng)式圖像 36
第 3 章　音頻和視頻 37
3.1　使用audio元素 38
3.2　使用video元素 39
3.3　使用embed元素 40
3.4　使用object元素 41
第 4 章　列表和超鏈接 43
4.1　列表 44
4.1.1　無(wú)序列表 44
4.1.2　有序列表 44
4.1.3　項(xiàng)目編號(hào) 45
4.1.4　嵌套列表 46
4.1.5　描述列表 47
4.1.6　菜單列表 47
4.2　超鏈接 48
4.2.1　頁(yè)間鏈接 48
4.2.2　塊級(jí)鏈接 49
4.2.3　錨記鏈接 50
4.2.4　目標(biāo)鏈接 50
4.2.5　郵件鏈接 51
4.2.6　下載鏈接 51
4.2.7　圖像熱點(diǎn) 51
第 5 章　CSS3基礎(chǔ) 53
5.1　CSS3概述 54
5.1.1　CSS3樣式 54
5.1.2　應(yīng)用CSS3樣式 55
5.1.3　CSS3樣式表 55
5.1.4　CSS3代碼注釋 57
5.1.5　CSS3代碼格式化 57
5.1.6　CSS3繼承性 57
5.1.7　CSS3層疊性 58
5.2　CSS3選擇器 59
5.2.1　元素選擇器 59
5.2.2　關(guān)系選擇器 61
5.2.3　 屬性選擇器 63
5.2.4　偽類選擇器 64
5.2.5　偽對(duì)象選擇器 67
第 6 章　文本樣式 68
6.1　字體樣式 69
6.1.1　字體 69
6.1.2　大小 70
6.1.3　顏色 71
6.1.4　粗體 71
6.1.5　斜體 71
6.1.6　修飾線 71
6.1.7　變體 72
6.1.8　大小寫 73
6.2　文本格式 73
6.2.1　對(duì)齊 73
6.2.2　間距 74
6.2.3　行高 75
6.2.4　縮進(jìn) 75
6.2.5　換行 75
6.3　書寫模式 77
6.4　特殊值 78
6.5　文本效果 80
6.5.1　文本陰影 81
6.5.2　文本特效 82
6.6　顏色模式 84
6.6.1　RGBA 84
6.6.2　HSL 85
6.6.3　HSLA 85
6.6.4　opacity 86
6.7　動(dòng)態(tài)內(nèi)容 86
第 7 章　圖像和背景樣式 90
7.1　美化圖像 91
7.1.1　圖像大小 91
7.1.2　圖像邊框 92
7.1.3　半透明圖片 92
7.1.4　圖像圓角 93
7.1.5　圖像陰影 94
7.2　背景圖像 95
7.2.1　定義背景圖像 95
7.2.2　定義背景原點(diǎn)/位置/裁剪 96
7.2.3　控制背景圖像顯示大小 97
7.2.4　固定背景圖像 99
7.3　漸變背景 100
7.3.1　線性漸變 100
7.3.2　徑向漸變 102
第 8 章　表格 105
8.1　定義表格 106
8.1.1　普通表格 106
8.1.2　列標(biāo)題 106
8.1.3　表格標(biāo)題 107
8.1.4　表格行/列分組 107
8.2　表格屬性 108
8.2.1　內(nèi)/外框線 108
8.2.2　單元格間距 109
8.2.3　細(xì)線邊框 110
8.2.4　內(nèi)容摘要 110
8.3　單元格屬性 110
8.3.1　跨單元格顯示 110
8.3.2　單元格表頭 111
8.3.3　綁定表頭 111
8.3.4　信息縮寫 112
8.3.5　單元格分類 112
8.4　表格樣式 113
第 9 章　表單 116
9.1　定義表單 117
9.1.1　設(shè)計(jì)表單結(jié)構(gòu) 117
9.1.2　表單對(duì)象分組 117
9.1.3　添加提示文本 119
9.2　表單控件 119
9.2.1　文本框 120
9.2.2　密碼框 121
9.2.3　文本區(qū)域 121
9.2.4　單選按鈕 122
9.2.5　復(fù)選框 122
9.2.6　選擇框 123
9.2.7　文件域和隱藏域 124
9.2.8　按鈕 124
9.2.9　數(shù)據(jù)列表 125
9.3　表單屬性 126
9.3.1　名稱和值 126
9.3.2　布爾型屬性 126
9.3.3　必填屬性 127
9.3.4　禁止驗(yàn)證 128
9.3.5　多選屬性 129
9.3.6　自動(dòng)完成 129
9.3.7　自動(dòng)獲取焦點(diǎn) 130
9.3.8　所屬表單 131
9.3.9　表單重寫 131
9.3.10　高和寬 131
9.3.11　最小值/最大值/步長(zhǎng) 132
9.3.12　匹配模式 132
9.3.13　替換文本 132
9.4　表單樣式與定制表單 133
第 10 章　CSS3盒子模型 134
10.1　顯示方式 135
10.2　可控大小 136
10.3　內(nèi)容溢出 137
10.4　輪廓線 137
10.5　圓角邊框 138
10.6　圖像邊框 139
10.7　盒子陰影 140
10.8　布局方式 142
10.8.1　流式布局 142
10.8.2　浮動(dòng)布局 143
10.8.3　定位布局 144
第 11 章　CSS3移動(dòng)布局 146
11.1　多列布局 147
11.1.1　定義列寬 147
11.1.2　定義列數(shù) 148
11.1.3　定義列間距 149
11.1.4　定義列邊框 149
11.1.5　定義跨列顯示 150
11.1.6　定義列高度 150
11.2　盒布局模型 151
11.2.1　定義寬度 151
11.2.2　定義順序 152
11.2.3　定義方向 153
11.2.4　定義自適應(yīng) 153
11.2.5　定義對(duì)齊方式 153
11.3　彈性盒布局 155
11.3.1　定義彈性盒 155
11.3.2　定義伸縮方向 156
11.3.3　定義行數(shù) 157
11.3.4　定義對(duì)齊方式 158
11.3.5　定義伸縮項(xiàng)目 159
11.4　媒體查詢 161
第 12 章　CSS3變形和動(dòng)畫 164
12.1　變形 165
12.1.1　2D旋轉(zhuǎn) 165
12.1.2　2D縮放 166
12.1.3　2D移動(dòng) 167
12.1.4　2D傾斜 167
12.1.5　2D矩陣 168
12.1.6　變形原點(diǎn) 168
12.1.7　3D變形 169
12.1.8　3D位移 170
12.1.9　3D縮放 171
12.1.10　3D旋轉(zhuǎn) 172
12.2　過(guò)渡樣式 174
12.2.1　定義過(guò)渡 175
12.2.2　定義過(guò)渡時(shí)間 175
12.2.3　定義延時(shí) 176
12.2.4　定義動(dòng)畫效果 176
12.2.5　定義觸發(fā)時(shí)機(jī) 177
12.3　關(guān)鍵幀動(dòng)畫 178
12.3.1　定義關(guān)鍵幀 178
12.3.2　定義幀動(dòng)畫 179
第 13 章　JavaScript基礎(chǔ) 181
13.1　JavaScript概述 182
13.1.1　JavaScript的主要特點(diǎn) 182
13.1.2　JavaScript的基本語(yǔ)法 182
13.1.3　JavaScript在HTML中的使用 183
13.2　JavaScript程序 185
13.2.1　語(yǔ)句和語(yǔ)句塊 185
13.2.2　代碼 186
13.2.3　消息框 186
13.2.4　JavaScript注釋 188
13.3　標(biāo)識(shí)符和變量 188
13.3.1　標(biāo)識(shí)符 188
13.3.2　變量 189
13.4　數(shù)據(jù)類型 191
13.5　運(yùn)算符 191
13.5.1　算術(shù)運(yùn)算符 191
13.5.2　比較運(yùn)算符 192
13.5.3　賦值運(yùn)算符 192
13.5.4　邏輯運(yùn)算符 193
13.5.5　條件運(yùn)算符 193
13.5.6　其他運(yùn)算符 194
13.5.7　運(yùn)算符優(yōu)先級(jí) 195
13.6　表達(dá)式和賦值語(yǔ)句 196
13.6.1　表達(dá)式 196
13.6.2　賦值語(yǔ)句 196
13.7　流程控制語(yǔ)句 196
13.7.1　條件判斷語(yǔ)句 197
13.7.2　循環(huán)語(yǔ)句 201
13.7.3　跳轉(zhuǎn)語(yǔ)句 203
13.8　JavaScript函數(shù) 204
13.8.1　常用系統(tǒng)函數(shù) 204
13.8.2　自定義函數(shù) 205
13.8.3　帶參數(shù)返回的return語(yǔ)句 206
13.8.4　函數(shù)變量的作用域 206
第 14 章　事件處理 207
14.1　JavaScript事件概述 208
14.1.1　事件類型 208
14.1.2　事件句柄 208
14.1.3　事件處理 209
14.1.4　程序返回值 212
14.2　表單事件 212
14.2.1　獲取與失去焦點(diǎn) 212
14.2.2　提交與重置 213
14.2.3　改變與選擇 215
14.3　鼠標(biāo)事件 216
14.4　鍵盤事件 216
14.5　窗口事件 217
第 15 章　BOM和DOM 218
15.1　JavaScript常用對(duì)象 219
15.1.1　Array對(duì)象 219
15.1.2　Date對(duì)象 221
15.1.3　Math對(duì)象 223
15.1.4　Number對(duì)象 224
15.1.5　String對(duì)象 225
15.1.6　Boolean對(duì)象 226
15.2　BOM  227
15.2.1　window對(duì)象 228
15.2.2　navigator對(duì)象 229
15.2.3　screen對(duì)象 229
15.2.4　history對(duì)象 230
15.2.5　location對(duì)象 230
15.3　DOM  231
15.3.1　DOM節(jié)點(diǎn)樹 232
15.3.2　DOM節(jié)點(diǎn) 232
15.3.3　DOM節(jié)點(diǎn)訪問 234
15.3.4　DOM節(jié)點(diǎn)操作 237
第 16 章　Bootstrap基礎(chǔ) 239
16.1　Bootstrap概述 240
16.1.1　什么是Bootstrap 240
16.1.2　Bootstrap的優(yōu)勢(shì) 240
16.1.3　Bootstrap的構(gòu)成模塊 240
16.2　下載與安裝  241
16.2.1　下載Bootstrap  241
16.2.2　安裝Bootstrap 242
16.3　開發(fā)工具 243
16.4　基本架構(gòu) 244
16.4.1　文件結(jié)構(gòu) 244
16.4.2　布局基礎(chǔ) 245
16.4.3　網(wǎng)格系統(tǒng) 248
16.4.4　布局工具類 253
16.5　排版優(yōu)化 254
16.5.1　標(biāo)題 254
16.5.2　段落 255
16.5.3　強(qiáng)調(diào)/對(duì)齊/列表 256
16.6　顯示代碼 256
16.6.1　行內(nèi)代碼 256
16.6.2　多行代碼塊 257
16.7　響應(yīng)式圖片 257
16.7.1　同步縮放 257
16.7.2　縮略圖 257
16.7.3　圖像對(duì)齊 258
16.8　表格樣式 258
第 17 章　CSS通用樣式 259
17.1　文本處理 260
17.1.1　文本對(duì)齊 260
17.1.2　文本換行 261
17.1.3　大小寫轉(zhuǎn)換 261
17.1.4　粗體和斜體 262
17.1.5　其他文本樣式類 263
17.2　顏色樣式 263
17.2.1　文本顏色 263
17.2.2　鏈接顏色 264
17.2.3　背景顏色 264
17.3　邊框樣式 264
17.3.1　添加邊框 264
17.3.2　邊框顏色 265
17.3.3　圓角邊框 265
17.4　寬度和高度 266
17.4.1　相對(duì)于父元素 266
17.4.2　相對(duì)于視口 267
17.5　邊距 268
17.5.1　定義邊距 268
17.5.2　響應(yīng)式邊距 269
17.6　浮動(dòng)樣式 269
17.6.1　實(shí)現(xiàn)浮動(dòng)樣式 270
17.6.2　響應(yīng)式浮動(dòng)樣式 270
17.7　display屬性 271
17.7.1　隱藏/顯示元素 271
17.7.2　響應(yīng)式隱藏/顯示元素 271
17.8　嵌入網(wǎng)頁(yè)元素 272
17.9　內(nèi)容溢出 273
17.10　定位元素 273
17.11　陰影效果 274
第 18 章　CSS組件 275
18.1　按鈕和按鈕組 276
18.1.1　按鈕 276
18.1.2　按鈕組 278
18.2　下拉菜單 281
18.2.1　設(shè)計(jì)分裂式按鈕樣式 282
18.2.2　設(shè)計(jì)菜單展開方向 282
18.2.3　設(shè)計(jì)菜單分割線 282
18.2.4　激活/禁用菜單項(xiàng) 283
18.2.5　設(shè)計(jì)菜單項(xiàng)對(duì)齊方式 283
18.2.6　設(shè)計(jì)菜單偏移量 283
18.2.7　設(shè)計(jì)更多菜單內(nèi)容 283
18.3　導(dǎo)航組件 284
18.3.1　設(shè)計(jì)水平對(duì)齊布局 285
18.3.2　設(shè)計(jì)垂直對(duì)齊布局 285
18.3.3　設(shè)計(jì)標(biāo)簽頁(yè)導(dǎo)航 285
18.3.4　設(shè)計(jì)膠囊式導(dǎo)航 286
18.3.5　設(shè)計(jì)導(dǎo)航內(nèi)容填充和對(duì)齊 286
18.3.6　設(shè)計(jì)導(dǎo)航選項(xiàng)卡 286
18.4　超大屏幕 287
18.5　其他CSS組件 288
18.5.1　徽章 288
18.5.2　警告框 288
18.5.3　媒體對(duì)象 289
18.5.4　進(jìn)度條 290
18.5.5　導(dǎo)航欄 291
第 19 章　JavaScript插件 292
19.1　JavaScript插件概述 293
19.1.1　安裝插件 293
19.1.2　調(diào)用插件 294
19.1.3　事件 295
19.2　模態(tài)框 295
19.2.1　設(shè)計(jì)模態(tài)框垂直居中 297
19.2.2　設(shè)計(jì)模態(tài)框大小 298
19.2.3　添加模態(tài)框和工具提示 298
19.2.4　調(diào)用模態(tài)框 298
19.2.5　為模態(tài)框添加用戶行為 299
19.3　下拉菜單 299
19.3.1　調(diào)用下拉菜單 300
19.3.2　設(shè)置下拉菜單 301
19.3.3　為下拉菜單添加用戶行為 301
19.4　彈窗 301
19.4.1　設(shè)計(jì)彈窗方向 303
19.4.2　調(diào)用彈窗 303
19.4.3　為彈窗添加用戶行為 304
19.5　工具提示 304
19.5.1　工具提示方向 305
19.5.2　調(diào)用工具提示 306
19.5.3　為工具提示添加用戶行為 307
19.6　標(biāo)簽頁(yè) 307
19.6.1　調(diào)用標(biāo)簽頁(yè) 308
19.6.2　為標(biāo)簽頁(yè)添加用戶行為 309
19.7　其他JavaScript插件 310
19.7.1　按鈕 310
19.7.2　警告框 310
19.7.3　折疊 311
第 20 章　使用Vue 313
20.1　Vue概述 314
20.1.1　Vue.js產(chǎn)生的背景 314
20.1.2　Vue.js的安裝和導(dǎo)入 314
20.2　Vue實(shí)例和組件 315
20.2.1　Vue實(shí)例 315
20.2.2　Vue組件 316
20.3　Vue模板語(yǔ)法 324
20.3.1　插值表達(dá)式 324
20.3.2　指令 327
20.4　Vue的data屬性 337
20.5　Vue方法 338
20.6　Vue計(jì)算屬性 340
20.7　Vue監(jiān)聽器 341