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

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