Web前端開發任務驅動式教程：HTML5+CSS3+JavaScript（簡體書）

本書以“採用網頁新標準技術、突破傳統知識體系結構、基於工作能力培養、置身真實工作情境”為標準，通過任務驅動的教學方式講解HTML5、CSS3、JavaScript等Web前端開發技術。本書包含“8個知識單元、18個項目任務、36個實戰案例、18個課後實訓”，每個項目任務又以“知識準備→實戰演練→強化訓練→課後實訓”為主線，介紹了Web基礎知識、HTML5語言基礎、HTML5新增標簽及屬性、CSS3基礎、盒子模型、HTML5表單的應用、網頁多媒體和JavaScript基礎。本書將Web前端開發技術貫穿所有的項目任務和實訓中，深入剖析了網頁佈局及樣式美化的思路和方法，使學生掌握Web前端核心技術，啟發並引導學生自主學習，並形成良好的職業素養。本書附有源代碼、電子課件、教案等教學資源。本書既可以作為高等院校、高等職業院校“網頁設計與製作”課程的教材，也可以作為前端與移動開發的培訓教材，還可以供網頁製作、網站開發、網頁編程、美工設計等人員參考。

第一單元 Web基礎知識
任務1 搭建開發環境 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 實戰演練――搭建開發環境 3
1.2.1 網頁編輯軟件的安裝 3
1.2.2 瀏覽器的安裝 5
1.3 強化訓練――創建第一個HTML5頁面 5
1.3.1 創建和管理站點 5
1.3.2 創建和保存HTML5文檔 7
1.4 課後實訓 8

第二單元 HTML5語言基礎
任務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 實戰演練――製作“科技館參觀須知”網頁 18
2.2.1 網頁效果圖 18
2.2.2 製作過程 19
2.2.3 代碼分析 19
2.3 強化訓練――製作“我家菜館”點菜單網頁 20
2.3.1 網頁效果圖 20
2.3.2 製作過程 20
2.3.3 代碼分析 21
2.4 課後實訓 21
任務3 圖像和超鏈接 22
3.1 知識準備 22
3.1.1 圖像標簽 22
3.1.2 絕對路徑和相對路徑 23
3.1.3 超鏈接標簽 24
3.1.4 錨點鏈接 25
3.2 實戰演練――製作“網頁技術介紹”網頁 27
3.2.1 網頁效果圖 27
3.2.2 製作過程 27
3.2.3 代碼分析 29
3.3 強化訓練――製作“文章故事網”網頁 29
3.3.1 網頁效果圖 29
3.3.2 製作過程 30
3.3.3 代碼分析 31
3.4 課後實訓 31

第三單元 HTML5新增標簽及屬性
任務4 結構標簽和分組標簽 32
4.1 知識準備 32
4.1.1 結構標簽 32
4.1.2 分組標簽 39
4.2 實戰演練――製作“唐詩欣賞”網頁 41
4.2.1 網頁效果圖 41
4.2.2 製作過程 41
4.2.3 代碼分析 44
4.3 強化訓練――製作“溫州地標性建築”網頁 45
4.3.1 網頁效果圖 45
4.3.2 製作過程 45
4.3.3 代碼分析 47
4.4 課後實訓 48
任務5 頁面交互標簽、層次語義標簽和全局屬性 48
5.1 知識準備 48
5.1.1 頁面交互標簽 48
5.1.2 層次語義標簽 51
5.1.3 全局屬性 53
5.2 實戰演練――製作“書評網”網頁 56
5.2.1 網頁效果圖 56
5.2.2 製作過程 57
5.2.3 代碼分析 60
5.3 強化訓練――製作“面試應答技巧”網頁 60
5.3.1 網頁效果圖 60
5.3.2 製作過程 61
5.3.3 代碼分析 63
5.4 課後實訓 63

第四單元 CSS3基礎
任務6 標記選擇器和類選擇器 65
6.1 知識準備 65
6.1.1 CSS簡介 65
6.1.2 CSS樣式規則 65
6.1.3 CSS樣式的引入 66
6.1.4 CSS樣式的優先級 68
6.1.5 標記選擇器 68
6.1.6 類選擇器 69
6.2 實戰演練――製作“美化文章”網頁 70
6.2.1 網頁效果圖 70
6.2.2 製作過程 70
6.2.3 代碼分析 72
6.3 強化訓練――製作“圖文混排”網頁 72
6.3.1 網頁效果圖 72
6.3.2 製作過程 73
6.3.3 代碼分析 74
6.4 課後實訓 75
任務7 鏈接偽類和CSS樣式面板 75
7.1 知識準備 75
7.1.1 鏈接偽類 75
7.1.2 CSS樣式面板 77
7.2 實戰演練――製作“散文欣賞”網頁 77
7.2.1 網頁效果圖 77
7.2.2 製作過程 78
7.2.3 代碼分析 85
7.3 強化訓練――製作“熱點新聞”列表 85
7.3.1 網頁效果圖 85
7.3.2 製作過程 86
7.3.3 代碼分析 91
7.4 課後實訓 91
任務8 id選擇器、偽選擇器和表格樣式 92
8.1 知識準備 92
8.1.1 id選擇器 92
8.1.2 偽選擇器 93
8.1.3 表格 94
8.2 實戰演練――製作“鞋子尺碼對照單”網頁 96
8.2.1 網頁效果圖 96
8.2.2 製作過程 96
8.2.3 代碼分析 98
8.3 強化訓練――製作“嬰兒身高體重標準表”網頁 99
8.3.1 網頁效果圖 99
8.3.2 製作過程 100
8.3.3 代碼分析 102
8.4 課後實訓 103
任務9 複合選擇器、通配符選擇器 103
9.1 知識準備 103
9.1.1 複合選擇器 103
9.1.2 通配符選擇器 106
9.1.3 同時應用多個樣式 106
9.2 實戰演練――製作“寓言故事”網頁 107
9.2.1 網頁效果圖 107
9.2.2 製作過程 108
9.2.3 代碼分析 110
9.3 強化訓練――製作“詩詞欣賞”網頁 110
9.3.1 網頁效果圖 110
9.3.2 製作過程 111
9.3.3 代碼分析 116
9.4 課後實訓 116

第五單元 盒子模型
任務10 盒子模型及應用 119
10.1 知識準備 119
10.1.1 盒子模型的概念 119
10.1.2 邊框的設置 120
10.1.3 內邊距的設置 125
10.1.4 外邊距的設置 126
10.2 實戰演練――製作“古詩文欣賞”網頁 128
10.2.1 網頁效果圖 128
10.2.2 製作過程 128
10.2.3 代碼分析 129
10.3 強化訓練――製作“散文賞析”網頁 130
10.3.1 網頁效果圖 130
10.3.2 製作過程 130
10.3.3 代碼分析 132
10.4 課後實訓 133
任務11 元素的浮動 133
11.1 知識準備 133
11.1.1 元素的類型及轉換 133
11.1.2 overflow屬性 135
11.1.3 元素的浮動 136
11.1.4 清除浮動 139
11.2 實戰演練――製作“網站導航條”網頁 144
11.2.1 網頁效果圖 144
11.2.2 製作過程 145
11.2.3 代碼分析 146
11.3 強化訓練――製作“浪漫花語百科網”網頁 146
11.3.1 網頁效果圖 146
11.3.2 製作過程 146
11.3.3 代碼分析 150
11.4 課後實訓 151
任務12 元素的定位 152
12.1 知識準備 152
12.1.1 元素的定位模式與邊偏移 152
12.1.2 靜態定位 152
12.1.3 相對定位 152
12.1.4 絕對定位 154
12.1.5 固定定位 156
12.1.6 z-index層疊等級屬性 156
12.2 實戰演練――製作“旅遊景點推薦網”banner 157
12.2.1 網頁效果圖 157
12.2.2 製作過程 157
12.2.3 代碼分析 159
12.3 強化訓練――製作“個人博客首頁”網頁 160
12.3.1 網頁效果圖 160
12.3.2 製作過程 160
12.3.3 代碼分析 163
12.4 課後實訓 164
任務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 重複漸變 168
13.1.6 Web字體圖標 170
13.2 實戰演練――製作“網站廣告欄”網頁 171
13.2.1 網頁效果圖 171
13.2.2 製作過程 171
13.2.3 代碼分析 173
13.3 強化訓練――製作“旅遊攻略網”網頁 174
13.3.1 網頁效果圖 174
13.3.2 製作過程 175
13.3.3 代碼分析 179
13.4 課後實訓 181
任務14 過渡與變形屬性 181
14.1 知識準備 181
14.1.1 過渡屬性 181
14.1.2 變形屬性 183
14.2 實戰演練――製作“產品展示”網頁 184
14.2.1 網頁效果圖 184
14.2.2 製作過程 185
14.2.3 代碼分析 186
14.3 強化訓練――製作“商品評論”網頁 187
14.3.1 網頁效果圖 187
14.3.2 製作過程 187
14.3.3 代碼分析 191
14.4 課後實訓 191

第六單元 HTML5表單的應用
任務15 表單與input元素 194
15.1 知識準備 194
15.1.1 認識表單 194
15.1.2 創建表單 194
15.1.3 input元素及屬性 195
15.2 實戰演練――製作“登錄界面”網頁 196
15.2.1 網頁效果圖 196
15.2.2 製作過程 196
15.2.3 代碼分析 198
15.3 強化訓練――製作“簡歷”表單 199
15.3.1 網頁效果圖 199
15.3.2 製作過程 200
15.3.3 代碼分析 203
15.4 課後實訓 204
任務16 其他表單元素與表單驗證 204
16.1 知識準備 204
16.1.1 其他表單元素 204
16.1.2 表單驗證方法 207
16.1.3 正則表達式 208
16.2 實戰演練――製作“商品訂購”表單 210
16.2.1 網頁效果圖 210
16.2.2 製作過程 210
16.2.3 代碼分析 213
16.3 強化訓練――製作“會員註冊”表單 213
16.3.1 網頁效果圖 213
16.3.2 製作過程 214
16.3.3 代碼分析 216
16.4 課後實訓 217

第七單元 網頁多媒體
任務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 實戰演練――製作“音樂播放器”網頁 221
17.2.1 網頁效果圖 221
17.2.2 製作過程 221
17.2.3 代碼分析 223
17.3 強化訓練――製作“視頻播放”網頁 223
17.3.1 網頁效果圖 223
17.3.2 製作過程 224
17.3.3 代碼分析 225
17.4 課後實訓 225

第八單元 JavaScript基礎
任務18 JavaScript的應用 226
18.1 知識準備 226
18.1.1 JavaScript簡介 226
18.1.2 JavaScript語言基礎 228
18.1.3 JavaScript函數 230
18.1.4 事件及事件驅動 231
18.1.5 JavaScript對象 233
18.1.6 BOM對象 238
18.1.7 DOM對象 240
18.2 實戰演練――製作“商品精選模塊”網頁 243
18.2.1 網頁效果圖 243
18.2.2 製作過程 243
18.2.3 代碼分析 245
18.3 強化訓練――製作“焦點圖廣告”網頁 246
18.3.1 網頁效果圖 246
18.3.2 製作過程 246
18.3.3 代碼分析 250
18.4 課後實訓 251