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

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