Web前端開發案例教程（HTML5+CSS3） (AI助學)（微課版）（第3版）

李誌雲，工學碩士學位，副教授，研究方向為Web應用技術、數據庫技術和高職教育研究；主持的“標準對接、項目引領、價值融入：Web前端開發教學內容和模式改革實踐”獲省級教學成果二等獎；山東省職業教育課程思政示範課程Web前端開發主持人；主編教材四部，其中兩部獲批“十四五”“十三五”職業教育國家規劃教材，發表論文二十余篇。

目 錄

任務1

創建第 一個HTML5網頁 1

1.1 任務描述 1

1.2 知識準備 1

1.2.1 認識Web前端開發 2

1.2.2 Web相關概念 2

1.2.3　HTML5概述 3

1.2.4　常用的瀏覽器 4

1.2.5　網頁編輯軟件 4

1.3 任務實現 5

任務小結 7

習題1 8

實訓1 9

技能拓展　利用人工智能大模型

（DeepSeek）獲得學習

建議 9

任務2

搭建簡單學院網站 11

2.1 任務描述 11

2.2 知識準備 12

2.2.1 HTML5文檔的基本結構 12

2.2.2 HTML標記及其屬性 13

2.2.3 HTML文本標記 14

2.2.4 HTML列表標記 19

2.2.5 HTML超鏈接標記 23

2.2.6 HTML圖像標記 26

2.3 任務實現 29

2.3.1 創建項目 29

2.3.2 創建網站首頁 30

2.3.3 創建學院簡介頁面 30

2.3.4 創建學院新聞頁面 31

2.3.5 創建新聞詳情頁面 32

任務小結 33

習題2 34

實訓2 35

技能拓展　HTML5代碼書寫規範 36

任務3

美化簡單學院網站 38

3.1 任務描述 38

3.2 知識準備 39

3.2.1 什麼是CSS 39

3.2.2 引入CSS樣式 39

3.2.3 CSS常用選擇器 43

3.2.4 CSS常用文本屬性 48

3.2.5 CSS的高級特性 54

3.3 任務實現 56

3.3.1 美化網站首頁 56

3.3.2 美化學院簡介頁面 57

3.3.3 美化學院新聞頁面 58

3.3.4 美化新聞詳情頁面 59

任務小結 61

習題3 62

實訓3 64

技能拓展　利用文心大模型了解CSS的

發展歷史 64

任務4

制作學院介紹頁面 66

4.1 任務描述 66

4.2 知識準備 67

4.2.1 盒子模型的概念 67

4.2.2 盒子模型的相關屬性 68

4.2.3 背景屬性 75

4.3 任務實現 83

4.3.1 搭建學院介紹頁面的結構 83

4.3.2 定義學院介紹頁面的CSS樣式 84

任務小結 85

習題4 86

實訓4 87

技能拓展　在HBuilderX中添加智能

編程助手 87

任務5

制作學院網站導航條 89

5.1 任務描述 89

5.2 知識準備 90

5.2.1 無序列表樣式設置 90

5.2.2 超鏈接樣式設置 91

5.2.3 元素的類型與轉換 92

5.3 任務實現 95

5.3.1 搭建學院網站導航條的結構 95

5.3.2 定義學院網站導航條的CSS

樣式 97

任務小結 99

習題5 99

實訓5 100

技能拓展　使用智能編程助手添加

代碼註釋 101

任務6

制作學院新聞塊 102

6.1 任務描述 102

6.2 知識準備 103

6.2.1 元素的浮動 103

6.2.2 元素的定位 106

6.2.3 塊元素間的外邊距 111

6.3 任務實現 118

6.3.1 搭建學院新聞塊的頁面結構 118

6.3.2 定義學院新聞塊的CSS樣式 119

任務小結 122

習題6 122

實訓6 123

技能拓展　網頁文字排版 124

任務7

制作學生信息表 125

7.1 任務描述 125

7.2 知識準備 125

7.2.1 表格標記 126

7.2.2 合並單元格 127

7.2.3 使用CSS定義表格樣式 129

7.3 任務實現 131

7.3.1 搭建學生信息表結構 131

7.3.2 定義學生信息表的CSS

樣式 133

任務小結 134

習題7 135

實訓7 135

技能拓展　Flex彈性布局 136

任務8

制作學生信息註冊表單 137

8.1 任務描述 137

8.2 知識準備 138

8.2.1 認識表單 138

8.2.2 表單標記 138

8.2.3 表單控件 139

8.2.4 使用CSS定義表單樣式 145

8.3 任務實現 147

8.3.1 搭建學生信息註冊表單的結構 147

8.3.2 使用CSS定義學生信息註冊表單的

樣式 149

任務小結 151

習題8 151

實訓8 153

技能拓展　利用豆包查詢正則表達式的

使用方法 154

任務9

布局學院網站主頁 155

9.1 任務描述 155

9.2 知識準備 156

9.2.1 HTML5新增的結構標記 156

9.2.2 HTML5+CSS3布局 160

9.3 任務實現 167

9.3.1 搭建布局塊結構 167

9.3.2 定義布局塊CSS樣式 169

任務小結 172

習題9 172

實訓9 173

技能拓展　響應式布局 174

任務10

制作校園照片墻頁面 175

10.1 任務描述 175

10.2 知識準備 176

10.2.1 過渡屬性 176

10.2.2 變形屬性 181

10.2.3 動畫屬性 190

10.3 任務實現 195

10.3.1 搭建照片墻結構 195

10.3.2 定義照片墻的CSS樣式 196

任務小結 197

習題10 198

實訓10 199

技能拓展　了解Vue框架 200

任務11

完整項目：制作未來信息學院

網站 201

11.1 任務描述 201

11.2 網站設計與規劃 202

11.3 效果圖設計 203

11.3.1 效果圖設計原則 203

11.3.2 效果圖設計步驟 204

11.3.3 效果圖切片與導出 208

11.4 制作網站主頁 208

11.5 制作新聞列表頁 227

11.6 制作新聞詳情頁 233

11.7 制作視頻宣傳頁 235

11.8 添加網頁動態效果 236

任務小結 237

技能拓展　網頁的配色原則 237

任務12

完整項目：制作愛心助農水果商城網站 238

12.1 任務描述 238

12.2 網站規劃 239

12.2.1 網站需求分析 239

12.2.2 網站風格定位 240

12.2.3 規劃草圖 240

12.2.4 素材準備 240

12.3 制作網站主頁 241

12.4 制作網站登錄頁面 256

12.5 制作網站註冊頁面 259

任務小結 262

技能拓展　iconfont是什麼？ 263