Web前端開發(fā)任務(wù)驅(qū)動(dòng)式教程（HTML5+CSS3+JavaScript 第2版 微課版）

目錄
第一單元 Web基礎(chǔ)知識(shí)
任務(wù)1 搭建開發(fā)環(huán)境 1
1.1 知識(shí)準(zhǔn)備 1
1.1.1 Web與Internet 1
1.1.2 Web的工作原理 2
1.1.3 Web頁(yè)的類型 3
1.1.4 HTML5概述 3
1.2 實(shí)戰(zhàn)演練——搭建開發(fā)環(huán)境 3
1.2.1 網(wǎng)頁(yè)編輯軟件的安裝 3
1.2.2 瀏覽器的安裝 5
1.3 強(qiáng)化訓(xùn)練——?jiǎng)?chuàng)建第一個(gè)HTML5頁(yè)面 5
1.3.1 創(chuàng)建和管理站點(diǎn) 5
1.3.2 創(chuàng)建和保存HTML5文檔 7
1.4 課后實(shí)訓(xùn) 8
第二單元 HTML5語(yǔ)言基礎(chǔ)
任務(wù)2 文字與段落排版 10
2.1 知識(shí)準(zhǔn)備 10
2.1.1 HTML5文檔格式 10
2.1.2 標(biāo)簽的屬性 11
2.1.3 文本標(biāo)簽 12
2.1.4 分隔標(biāo)簽 14
2.1.5 序列標(biāo)簽 16
2.2 實(shí)戰(zhàn)演練——制作“科技館參觀須知”網(wǎng)頁(yè) 18
2.2.1 網(wǎng)頁(yè)效果圖 18
2.2.2 制作過(guò)程 19
2.2.3 代碼分析 19
2.3 強(qiáng)化訓(xùn)練——制作“我家菜館”點(diǎn)菜單網(wǎng)頁(yè) 20
2.3.1 網(wǎng)頁(yè)效果圖 20
2.3.2 制作過(guò)程 20
2.3.3 代碼分析 21
2.4 課后實(shí)訓(xùn) 21
任務(wù)3 圖像和超鏈接 22
3.1 知識(shí)準(zhǔn)備 22
3.1.1 圖像標(biāo)簽 22
3.1.2 絕對(duì)路徑和相對(duì)路徑 23
3.1.3 超鏈接標(biāo)簽 24
3.1.4 錨點(diǎn)鏈接 25
3.2 實(shí)戰(zhàn)演練——制作“網(wǎng)頁(yè)技術(shù)介紹”網(wǎng)頁(yè) 27
3.2.1 網(wǎng)頁(yè)效果圖 27
3.2.2 制作過(guò)程 27
3.2.3 代碼分析 29
3.3 強(qiáng)化訓(xùn)練——制作“文章故事網(wǎng)”網(wǎng)頁(yè) 29
3.3.1 網(wǎng)頁(yè)效果圖 29
3.3.2 制作過(guò)程 30
3.3.3 代碼分析 31
3.4 課后實(shí)訓(xùn) 31
第三單元 HTML5新增標(biāo)簽及屬性
任務(wù)4 結(jié)構(gòu)標(biāo)簽和分組標(biāo)簽 32
4.1 知識(shí)準(zhǔn)備 32
4.1.1 結(jié)構(gòu)標(biāo)簽 32
4.1.2 分組標(biāo)簽 39
4.2 實(shí)戰(zhàn)演練——制作“唐詩(shī)欣賞”網(wǎng)頁(yè) 41
4.2.1 網(wǎng)頁(yè)效果圖 41
4.2.2 制作過(guò)程 41
4.2.3 代碼分析 44
4.3 強(qiáng)化訓(xùn)練——制作“溫州地標(biāo)性建筑”網(wǎng)頁(yè) 45
4.3.1 網(wǎng)頁(yè)效果圖 45
4.3.2 制作過(guò)程 45
4.3.3 代碼分析 47
4.4 課后實(shí)訓(xùn) 48
任務(wù)5 頁(yè)面交互標(biāo)簽、層次語(yǔ)義標(biāo)簽和全局屬性 48
5.1 知識(shí)準(zhǔn)備 48
5.1.1 頁(yè)面交互標(biāo)簽 48
5.1.2 層次語(yǔ)義標(biāo)簽 51
5.1.3 全局屬性 53
5.2 實(shí)戰(zhàn)演練——制作“書評(píng)網(wǎng)”網(wǎng)頁(yè) 56
5.2.1 網(wǎng)頁(yè)效果圖 56
5.2.2 制作過(guò)程 57
5.2.3 代碼分析 60
5.3 強(qiáng)化訓(xùn)練——制作“面試應(yīng)答技巧”網(wǎng)頁(yè) 60
5.3.1 網(wǎng)頁(yè)效果圖 60
5.3.2 制作過(guò)程 61
5.3.3 代碼分析 63
5.4 課后實(shí)訓(xùn) 63
第四單元 CSS3基礎(chǔ)
任務(wù)6 標(biāo)記選擇器和類選擇器 65
6.1 知識(shí)準(zhǔn)備 65
6.1.1 CSS簡(jiǎn)介 65
6.1.2 CSS樣式規(guī)則 65
6.1.3 CSS樣式的引入 66
6.1.4 CSS樣式的優(yōu)先級(jí) 68
6.1.5 標(biāo)記選擇器 68
6.1.6 類選擇器 69
6.2 實(shí)戰(zhàn)演練——制作“美化文章”網(wǎng)頁(yè) 70
6.2.1 網(wǎng)頁(yè)效果圖 70
6.2.2 制作過(guò)程 70
6.2.3 代碼分析 72
6.3 強(qiáng)化訓(xùn)練——制作“圖文混排”網(wǎng)頁(yè) 72
6.3.1 網(wǎng)頁(yè)效果圖 72
6.3.2 制作過(guò)程 73
6.3.3 代碼分析 74
6.4 課后實(shí)訓(xùn) 75
任務(wù)7 鏈接偽類和CSS樣式面板 75
7.1 知識(shí)準(zhǔn)備 75
7.1.1 鏈接偽類 75
7.1.2 CSS樣式面板 77
7.2 實(shí)戰(zhàn)演練——制作“散文欣賞”網(wǎng)頁(yè) 77
7.2.1 網(wǎng)頁(yè)效果圖 77
7.2.2 制作過(guò)程 78
7.2.3 代碼分析 85
7.3 強(qiáng)化訓(xùn)練——制作“熱點(diǎn)新聞”列表 85
7.3.1 網(wǎng)頁(yè)效果圖 85
7.3.2 制作過(guò)程 86
7.3.3 代碼分析 91
7.4 課后實(shí)訓(xùn) 91
任務(wù)8 id選擇器、偽選擇器和表格樣式 92
8.1 知識(shí)準(zhǔn)備 92
8.1.1 id選擇器 92
8.1.2 偽選擇器 93
8.1.3 表格 94
8.2 實(shí)戰(zhàn)演練——制作“鞋子尺碼對(duì)照單”網(wǎng)頁(yè) 96
8.2.1 網(wǎng)頁(yè)效果圖 96
8.2.2 制作過(guò)程 96
8.2.3 代碼分析 98
8.3 強(qiáng)化訓(xùn)練——制作“嬰兒身高體重標(biāo)準(zhǔn)表”網(wǎng)頁(yè) 99
8.3.1 網(wǎng)頁(yè)效果圖 99
8.3.2 制作過(guò)程 100
8.3.3 代碼分析 102
8.4 課后實(shí)訓(xùn) 103
任務(wù)9 復(fù)合選擇器和通配符選擇器 103
9.1 知識(shí)準(zhǔn)備 103
9.1.1 復(fù)合選擇器 103
9.1.2 通配符選擇器 106
9.1.3 同時(shí)應(yīng)用多個(gè)樣式 106
9.2 實(shí)戰(zhàn)演練——制作“寓言故事”網(wǎng)頁(yè) 107
9.2.1 網(wǎng)頁(yè)效果圖 107
9.2.2 制作過(guò)程 108
9.2.3 代碼分析 110
9.3 強(qiáng)化訓(xùn)練——制作“詩(shī)詞欣賞”網(wǎng)頁(yè) 110
9.3.1 網(wǎng)頁(yè)效果圖 110
9.3.2 制作過(guò)程 111
9.3.3 代碼分析 116
9.4 課后實(shí)訓(xùn) 116
第五單元 盒 子 模 型
任務(wù)10 盒子模型及應(yīng)用 119
10.1 知識(shí)準(zhǔn)備 119
10.1.1 盒子模型的概念 119
10.1.2 邊框的設(shè)置 120
10.1.3 內(nèi)邊距的設(shè)置 125
10.1.4 外邊距的設(shè)置 126
10.2 實(shí)戰(zhàn)演練——制作“古詩(shī)文欣賞”網(wǎng)頁(yè) 128
10.2.1 網(wǎng)頁(yè)效果圖 128
10.2.2 制作過(guò)程 128
10.2.3 代碼分析 129
10.3 強(qiáng)化訓(xùn)練——制作“散文賞析”網(wǎng)頁(yè) 130
10.3.1 網(wǎng)頁(yè)效果圖 130
10.3.2 制作過(guò)程 130
10.3.3 代碼分析 132
10.4 課后實(shí)訓(xùn) 133
任務(wù)11 元素的浮動(dòng) 133
11.1 知識(shí)準(zhǔn)備 133
11.1.1 元素的類型及轉(zhuǎn)換 133
11.1.2 overflow屬性 135
11.1.3 元素的浮動(dòng) 136
11.1.4 清除浮動(dòng) 139
11.2 實(shí)戰(zhàn)演練——制作“網(wǎng)站導(dǎo)航條”網(wǎng)頁(yè) 144
11.2.1 網(wǎng)頁(yè)效果圖 144
11.2.2 制作過(guò)程 145
11.2.3 代碼分析 146
11.3 強(qiáng)化訓(xùn)練——制作“浪漫花語(yǔ)百科網(wǎng)”網(wǎng)頁(yè) 146
11.3.1 網(wǎng)頁(yè)效果圖 146
11.3.2 制作過(guò)程 146
11.3.3 代碼分析 150
11.4 課后實(shí)訓(xùn) 151
任務(wù)12 元素的定位 152
12.1 知識(shí)準(zhǔn)備 152
12.1.1 元素的定位模式與邊偏移 152
12.1.2 靜態(tài)定位 152
12.1.3 相對(duì)定位 152
12.1.4 絕對(duì)定位 154
12.1.5 固定定位 156
12.1.6 z-index層疊等級(jí)屬性 156
12.2 實(shí)戰(zhàn)演練——制作“旅游景點(diǎn)推薦網(wǎng)”banner 157
12.2.1 網(wǎng)頁(yè)效果圖 157
12.2.2 制作過(guò)程 157
12.2.3 代碼分析 159
12.3 強(qiáng)化訓(xùn)練——制作“個(gè)人博客首頁(yè)”網(wǎng)頁(yè) 160
12.3.1 網(wǎng)頁(yè)效果圖 160
12.3.2 制作過(guò)程 160
12.3.3 代碼分析 163
12.4 課后實(shí)訓(xùn) 164
任務(wù)13 陰影與漸變屬性 164
13.1 知識(shí)準(zhǔn)備 164
13.1.1 box-shadow屬性 164
13.1.2 box-sizing屬性 165
13.1.3 線性漸變 167
13.1.4 徑向漸變 168
13.1.5 重復(fù)漸變 168
13.1.6 Web字體圖標(biāo) 170
13.2 實(shí)戰(zhàn)演練——制作“網(wǎng)站廣告欄”網(wǎng)頁(yè) 171
13.2.1 網(wǎng)頁(yè)效果圖 171
13.2.2 制作過(guò)程 171
13.2.3 代碼分析 173
13.3 強(qiáng)化訓(xùn)練——制作“旅游攻略網(wǎng)”網(wǎng)頁(yè) 174
13.3.1 網(wǎng)頁(yè)效果圖 174
13.3.2 制作過(guò)程 175
13.3.3 代碼分析 179
13.4 課后實(shí)訓(xùn) 181
任務(wù)14 過(guò)渡與變形屬性 181
14.1 知識(shí)準(zhǔn)備 181
14.1.1 過(guò)渡屬性 181
14.1.2 變形屬性 183
14.2 實(shí)戰(zhàn)演練——制作“產(chǎn)品展示”網(wǎng)頁(yè) 184
14.2.1 網(wǎng)頁(yè)效果圖 184
14.2.2 制作過(guò)程 185
14.2.3 代碼分析 186
14.3 強(qiáng)化訓(xùn)練——制作“商品評(píng)論”網(wǎng)頁(yè) 187
14.3.1 網(wǎng)頁(yè)效果圖 187
14.3.2 制作過(guò)程 187
14.3.3 代碼分析 191
14.4 課后實(shí)訓(xùn) 191
第六單元 HTML5表單的應(yīng)用
任務(wù)15 表單與input元素 194
15.1 知識(shí)準(zhǔn)備 194
15.1.1 認(rèn)識(shí)表單 194
15.1.2 創(chuàng)建表單 194
15.1.3 input元素及屬性 195
15.2 實(shí)戰(zhàn)演練——制作“登錄界面”網(wǎng)頁(yè) 196
15.2.1 網(wǎng)頁(yè)效果圖 196
15.2.2 制作過(guò)程 196
15.2.3 代碼分析 198
15.3 強(qiáng)化訓(xùn)練——制作“簡(jiǎn)歷”表單 199
15.3.1 網(wǎng)頁(yè)效果圖 199
15.3.2 制作過(guò)程 200
15.3.3 代碼分析 203
15.4 課后實(shí)訓(xùn) 204
任務(wù)16 其他表單元素與表單驗(yàn)證 204
16.1 知識(shí)準(zhǔn)備 204
16.1.1 其他表單元素 204
16.1.2 表單驗(yàn)證方法 207
16.1.3 正則表達(dá)式 208
16.2 實(shí)戰(zhàn)演練——制作“商品訂購(gòu)”表單 210
16.2.1 網(wǎng)頁(yè)效果圖 210
16.2.2 制作過(guò)程 210
16.2.3 代碼分析 213
16.3 強(qiáng)化訓(xùn)練——制作“會(huì)員注冊(cè)”表單 213
16.3.1 網(wǎng)頁(yè)效果圖 213
16.3.2 制作過(guò)程 214
16.3.3 代碼分析 216
16.4 課后實(shí)訓(xùn) 217
第七單元 網(wǎng)頁(yè)多媒體
任務(wù)17 視頻與音頻 218
17.1 知識(shí)準(zhǔn)備 218
17.1.1 嵌入視頻 218
17.1.2 嵌入音頻 219
17.1.3 ＜source＞標(biāo)簽 219
17.1.4 視頻與音頻的DOM操作 220
17.2 實(shí)戰(zhàn)演練——制作“音樂(lè)播放器”網(wǎng)頁(yè) 221
17.2.1 網(wǎng)頁(yè)效果圖 221
17.2.2 制作過(guò)程 221
17.2.3 代碼分析 223
17.3 強(qiáng)化訓(xùn)練——制作“視頻播放”網(wǎng)頁(yè) 223
17.3.1 網(wǎng)頁(yè)效果圖 223
17.3.2 制作過(guò)程 224
17.3.3 代碼分析 225
17.4 課后實(shí)訓(xùn) 225
第八單元 JavaScript基礎(chǔ)
任務(wù)18 JavaScript的應(yīng)用 226
18.1 知識(shí)準(zhǔn)備 226
18.1.1 JavaScript簡(jiǎn)介 226
18.1.2 JavaScript語(yǔ)言基礎(chǔ) 228
18.1.3 JavaScript函數(shù) 230
18.1.4 事件及事件驅(qū)動(dòng) 231
18.1.5 JavaScript對(duì)象 233
18.1.6 BOM對(duì)象 238
18.1.7 DOM對(duì)象 240
18.2 實(shí)戰(zhàn)演練——制作“商品精選模塊”網(wǎng)頁(yè) 243
18.2.1 網(wǎng)頁(yè)效果圖 243
18.2.2 制作過(guò)程 243
18.2.3 代碼分析 245
18.3 強(qiáng)化訓(xùn)練——制作“焦點(diǎn)圖廣告”網(wǎng)頁(yè) 246
18.3.1 網(wǎng)頁(yè)效果圖 246
18.3.2 制作過(guò)程 246
18.3.3 代碼分析 250
18.4 課后實(shí)訓(xùn) 251