HTML5+CSS3+JavaScript Web前端開發案例教程（慕課版 第2版）AIGC高效編程

王方，男，副教授，現任文華學院信息科學與技術學部副主任。

研究方向：電腦軟件與理論、大數據及數據挖掘技術等方向。

主講課程：數據結構、java程序開發、大數據技術等。

學校省一流本科專業建設點“電腦科學與技術”專業負責人，作為電腦科學與技術專業的負責人，積極組織和建設優勢應用學科“大數據挖掘與應用技術”特色專業方向建設，主持和參加省級、校級教改10餘項，主編5部教材，發表教學科研論文10餘篇；獲湖北省高等學校教學成果獎三等獎1項；國外電子測量技術雜志編委委員；2022年入選武漢市網絡安全協會專家委員會；多次指導學生獲得藍橋杯全國軟件大賽特等、一等、二等獎項；指導學生獲得全國信息技術應用水平大賽移動因特網站設計全國一等獎；指導學生完成湖北省大學生創新創業訓練計劃兩項。

第 1章 Web網站初體驗　1

1.1　揭秘Web前端　1

1.1.1　Web和Web前端　1

1.1.2　網頁核心技術　3

1.2　走進HTML5　6

1.2.1　標簽、元素、文件結構概述　6

1.2.2　HTML5的基本標簽　7

1.3　使用WebStorm編寫HTML5代碼　9

1.3.1　下載和安裝　9

1.3.2　創建HTML5工程和文件，

運行HTML5程序　11

1.4　在WebStorm中引入AIGC工具　12

1.4.1　AIGC編程助手Baidu Comate　12

1.4.2　AIGC編程助手TONGYI Lingma　13

1.4.3　DeepSeek R1推理大模型　14

小結　14

習題　14

第　2章 搭建網站雛形　15

2.1　【案例1】製作第 一個HTML5案例　15

2.1.1　案例描述　15

2.1.2　技術準備　16

2.1.3　案例實現　17

2.1.4　動手試一試　19

2.2　【案例2】實現多圖展示合作夥伴　19

2.2.1　案例描述　19

2.2.2　技術準備　19

2.2.3　案例實現　21

2.2.4　動手試一試　22

2.3　【案例3】通過外鏈實現友情鏈接　23

2.3.1　案例描述　23

2.3.2　技術準備　23

2.3.3　案例實現　24

2.3.4　動手試一試　25

2.4　【案例4】使用分組標簽製作聯系方式　25

2.4.1　案例描述　25

2.4.2　技術準備　26

2.4.3　案例實現　26

2.4.4　動手試一試　27

2.5　AIGC輔助快速學習　28

2.5.1　AIGC輔助生成註釋　28

2.5.2　AIGC輔助解釋代碼　28

2.5.3　AIGC輔助查詢術語　29

小結　29

習題　29

第3章　用CSS3裝飾網站　30

3.1　【案例1】使用圖文混排展示“人郵經典”系列圖書　30

3.1.1　案例描述　30

3.1.2　技術準備　31

3.1.3　案例實現　31

3.1.4　動手試一試　33

3.2　【案例2】製作商品列表頁面　34

3.2.1　案例描述　34

3.2.2　技術準備　34

3.2.3　案例實現　36

3.2.4　動手試一試　37

3.3　【案例3】製作網購商城的商品搶購

頁面　38

3.3.1　案例描述　38

3.3.2　技術準備　38

3.3.3　案例實現　40

3.3.4　動手試一試　42

3.4　【案例4】打造多彩網站主題背景　42

3.4.1　案例描述　42

3.4.2　技術準備　43

3.4.3　案例實現　44

3.4.4　動手試一試　45

3.5　AIGC輔助編程——添加CSS樣式　46

3.5.1　為文本添加CSS樣式　46

3.5.2　為列表構成的導航菜單添加

CSS樣式　47

小結　48

習題　48

第4章　HTML5多媒體實現網站“家庭影院”　49

4.1　【案例1】實現網頁中的視頻播放器　49

4.1.1　案例描述　49

4.1.2　技術準備　49

4.1.3　案例實現　50

4.1.4　動手試一試　51

4.2　【案例2】實現動態文字彈幕　51

4.2.1　案例描述　51

4.2.2　技術準備　52

4.2.3　案例實現　53

4.2.4　動手試一試　53

4.3　【案例3】實現神奇的在線聽書功能　54

4.3.1　案例描述　54

4.3.2　技術準備　54

4.3.3　案例實現　55

4.3.4　動手試一試　56

4.4　【案例4】定製專屬視頻播放器　56

4.4.1　案例描述　56

4.4.2　技術準備　57

4.4.3　案例實現　58

4.4.4　動手試一試　60

4.5　AIGC輔助編程——在網頁中嵌入多媒體　61

4.5.1　隨機播放背景音樂　61

4.5.2　定製播放器並設置時間　61

小結　62

習題　62

第5章　通過HTML5表單與用戶交互　63

5.1　【案例1】使用表單實現用戶註冊頁面　63

5.1.1　案例描述　63

5.1.2　技術準備　63

5.1.3　案例實現　65

5.1.4　動手試一試　68

5.2　【案例2】實現用戶信息收集頁面　68

5.2.1　案例描述　68

5.2.2　技術準備　68

5.2.3　案例實現　71

5.2.4　動手試一試　72

5.3　【案例3】仿製發表朋友圈頁面　72

5.3.1　案例描述　72

5.3.2　技術準備　73

5.3.3　案例實現　74

5.3.4　動手試一試　75

5.4　【案例4】實現上傳頭像頁面　76

5.4.1　案例描述　76

5.4.2　技術準備　76

5.4.3　案例實現　77

5.4　4 動手試一試　78

5.5　AIGC輔助編程——使用表單構建網頁　78

5.5.1　使用復選框實現選擇課程頁面　78

5.5.2　使用文本域實現留言板　79

小結　80

習題　80

第6章　列表與表格——讓網站更規整　81

6.1　【案例1】實現限時搶購頁面　81

6.1.1　案例描述　81

6.1.2　技術準備　81

6.1.3　案例實現　83

6.1.4　動手試一試　85

6.2　【案例2】製作抽屜風格的滑出菜單特效　85

6.2.1　案例描述　85

6.2.2　技術準備　86

6.2.3　案例實現　86

6.2.4　動手試一試　88

6.3　【案例3】實現2023年度國內手機銷量排名　88

6.3.1　案例描述　88

6.3.2　技術準備　89

6.3.3　案例實現　89

6.3.4　動手試一試　91

6.4　【案例4】使用表格設計購物車頁面　91

6.4.1　案例描述　91

6.4.2　技術準備　92

6.4.3　案例實現　94

6.4.4　動手試一試　96

6.5　AIGC輔助編程——使用有序列表和表格構建網頁　96

6.5.1　使用有序列表模擬QQ聯系人列表　96

6.5.2　使用表格設計員工信息表　97

小結　98

習題　98

第7章　CSS3佈局與動畫　99

7.1　【案例1】實現購物網站中的“主題購”頁面　99

7.1.1　案例描述　99

7.1.2　技術準備　99

7.1.3　案例實現　101

7.1.4　動手試一試　103

7.2　【案例2】實現鼠標指針滑過圖片時的平移效果　104

7.2.1　案例描述　104

7.2.2　技術準備　104

7.2.3　案例實現　106

7.2.4　動手試一試　109

7.3　【案例3】為導航菜單添加動畫特效　109

7.3.1　案例描述　109

7.3.2　技術準備　110

7.3.3　案例實現　111

7.3.4　動手試一試　113

7.4　【案例4】使用CSS3實現網頁輪播圖　113

7.4.1　案例描述　113

7.4.2　技術準備　114

7.4.3　案例實現　116

7.4.4　動手試一試　118

7.5　AIGC輔助編程——在網頁中設置浮動佈局和動畫效果　118

7.5.1　為多個書名設置浮動佈局　118

7.5.2　設置動態改變元素背景顏色和高度的動畫效果　119

小結　120

習題　120

第8章　JavaScript編程應用　121

8.1　【案例1】計算存款本息合計　121

8.1.1　案例描述　121

8.1.2　技術準備　121

8.1.3　案例實現　124

8.1.4　動手試一試　126

8.2　【案例2】輸出影廳座位圖　126

8.2.1　案例描述　126

8.2.2　技術準備　126

8.2.3　案例實現　128

8.2.4　動手試一試　130

8.3　【案例3】輸出2023年電影票房排行榜　130

8.3.1　案例描述　130

8.3.2　技術準備　130

8.3.3　案例實現　133

8.3.4　動手試一試　135

8.4　【案例4】更換頁面主題　135

8.4.1　案例描述　135

8.4.2　技術準備　136

8.4.3　案例實現　137

8.4.4　動手試一試　139

8.5　AIGC輔助編程——流程控制語句的應用　139

8.5.1　使用if語句判斷年齡段　139

8.5.2　使用for語句輸出乘法口訣表　140

小結　141

習題　141

第9章　JavaScript事件處理　143

9.1　【案例1】實現切換商品類別的選項卡　142

9.1.1　案例描述　142

9.1.2　技術準備　142

9.1.3　案例實現　143

9.1.4　動手試一試　146

9.2　【案例2】實現簡單計算器　147

9.2.1　案例描述　147

9.2.2　技術準備　147

9.2.3　案例實現　148

9.2.4　動手試一試　150

9.3　【案例3】模仿影視網站星級評分功能　150

9.3.1　案例描述　150

9.3.2　技術準備　151

9.3.3　案例實現　151

9.3.4　動手試一試　154

9.4　【案例4】實現用戶註冊頁面　154

9.4.1　案例描述　154

9.4.2　技術準備　155

9.4.3　案例實現　155

9.4.4　動手試一試　157

9.5　AIGC輔助解決JavaScript事件在處理過程中的問題　158

小結　159

習題　159

第　10章 手機響應式開發（上）　160

10.1　【案例1】實現手機端展示圖文列表　160

10.1.1　案例描述　160

10.1.2　技術準備　161

10.1.3　案例實現　162

10.1.4　動手試一試　164

10.2　【案例2】實現手機端的用戶登錄　165

10.2.1　案例描述　165

10.2.2　技術準備　165

10.2.3　案例實現　166

10.2.4　動手試一試　168

10.3　【案例3】實現手機端的聊天界面　169

10.3.1　案例描述　169

10.3.2　技術準備　169

10.3.3　案例實現　171

10.3.4　動手試一試　173

10.4　【案例4】在手機端播放視頻　173

10.4.1　案例描述　173

10.4.2　技術準備　174

10.4.3　案例實現　174

10.4.4　動手試一試　175

10.5　AIGC輔助編程——使用響應式網頁設計實現APP網頁應用　176

10.5.1　使用Flex佈局設計一個APP底部導航欄　176

10.5.2　實現APP城市列表　177

小結　178

習題　178

第　11章 手機響應式開發（下）　179

11.1　【案例1】添加響應式圖片　179

11.1.1　案例描述　179

11.1.2　技術準備　180

11.1.3　案例實現　180

11.1.4　動手試一試　181

11.2　【案例2】使用第三方插件升級視頻功能　181

11.2.1　案例描述　181

11.2.2　技術準備　182

11.2.3　案例實現　182

11.2.4　動手試一試　184

11.3　【案例3】實現響應式導航菜單　184

11.3.1　案例描述　184

11.3.2　技術準備　185

11.3.3　案例實現　185

11.3.4　動手試一試　187

11.4　【案例4】實現響應式表格　187

11.4.1　案例描述　187

11.4.2　技術準備　187

11.4.3　案例實現　188

11.4.4　動手試一試　189

11.5　AIGC輔助編程——添加響應式網頁內容　190

11.5.1　實現購物網站響應式導航　190

11.5.2　使用響應式表格輸出考試成績表　191

小結　192

習題　192

第　12章 綜合案例——在線教育平臺　193

12.1　案例分析　193

12.1.1　案例概述　193

12.1.2　系統功能結構　193

12.1.3　文件夾組織結構　194

12.2　技術準備　194

12.2.1　實現過程分析　195

12.2.2　Amaze UI的使用　197

12.2.3　登錄頁面的實現技巧　199

12.3　主頁的設計與實現　199

12.3.1　主頁概述　199

12.3.2　主頁設計　200

12.3.3　代碼實現　200

12.4　登錄頁面的設計與實現　205

12.4.1　登錄頁面概述　206

12.4.2　登錄頁面設計　206

12.4.3　代碼實現　207

12.5　課程列表頁面的設計與實現　210

12.5.1　課程列表頁面概述　210

12.5.2　課程列表頁面設計　210

12.5.3　代碼實現　211

12.6　課程詳情頁面的設計與實現　215

12.6.1　課程詳情頁面概述　215

12.6.2　課程詳情頁面設計　216

12.6.3　代碼實現　217

12.7　AIGC輔助分析優化項目　222

12.7.1　AIGC輔助提供項目開發思路　222

12.7.2　AIGC輔助優化代碼　223

12.7.3　AIGC輔助完善項目　225

小結　226