Web前端開發實戰教程（HTML5+CSS3+JavaScript）（AI協同）（第2版）
蝸牛學苑
- 出版商: 人民郵電
- 出版日期: 2026-05-01
- 定價: $359
- 售價: $358
- 語言: 簡體中文
- 頁數: 280
- ISBN: 7115693781
- ISBN-13: 9787115693785
-
相關分類:
JavaScript
下單後立即進貨 (約4週~6週)
相關主題
商品描述
本書全面地講解了HTML5的各種開發技術，包括HTML元素、CSS、網頁布局、JavaScript程序設計等內容。此外，本書緊跟AI輔助編程的趨勢，介紹了AI編程助手（如Cline、Continue等）的配置與使用及基於前端技術開發AI智能體的完整過程。
全書共11章：第1章主要講解VSCode開發工具及AI編程插件的配置與使用；第2章主要講解HTML基礎元素與頁面布局；第3章主要講解CSS各種樣式的設置；第4章主要講解Web頁面布局，包括盒模型與彈性布局等；第5章是網頁布局項目實戰，同時講解響應式布局技術；第6章主要講解 JavaScript 程序設計的語法與基礎編程知識；第 7 章主要講解文檔對象模型，也就是如何利用JavaScript操作Web頁面元素；第8章主要講解JavaScript各種常用的內置對象；第9章主要講解Web頁面的各個元素的事件處理機制；第10章主要是基於JavaScript程序設計的項目實戰；第11章主要基於前端開發技術實現AI智能體，是一個完整的實戰項目。
本書可以作為高校計算機、軟件工程、人工智能或電子商務等專業前端開發課程的教材，也可以作為Web前端開發愛好者的實戰寶典。
作者簡介
徐朝波，男，蝸牛學苑技術總監，全棧工程師，華為開發者專家（HDE）認證。12年以上IT行業從業經驗，具備豐富的軟件開發和項目管理實戰經驗。精通Java、大前端及鴻蒙全棧技術，尤其在H5開發領域經驗深厚。擅長系統架構、應用架構設計及Web前端技術棧。多次參與大型互聯網項目開發，對前後端分離架構有深刻理解，在Vue/React架構設計、性能優化及分布式系統架構方面擁有豐富實戰經驗。
目錄大綱
第 1章 Web開發環境配置 1
1.1 VSCode開發工具 2
1.1.1 安裝VSCode 2
1.1.2 創建項目 3
1.2 申請AI大模型Key 4
1.2.1 關於AI編程插件 4
1.2.2 對接DeepSeek 4
1.2.3 對接矽基流動 5
1.2.4 對接OpenRouter 5
1.3 配置AI編程插件及插件應用 7
1.3.1 配置AI編程插件 7
1.3.2 Cline插件應用 11
1.3.3 Continue插件應用 14
第 2章 HTML頁面布局實戰 18
2.1 HTML常用標簽 19
2.1.1 HTML簡介 19
2.1.2 HTML頁面 20
2.1.3 文本 21
2.1.4 超鏈接 23
2.1.5 圖像 24
2.1.6 表格 27
2.1.7 表單元素 31
2.1.8 列表 32
2.1.9 其他標簽 33
2.2 在線計算器 35
2.2.1 項目介紹 35
2.2.2 開發思路 35
2.2.3 代碼實現 36
2.2.4 利用Cline生成代碼 38
2.3 蝸牛學苑宣傳頁 42
2.3.1 項目介紹 42
2.3.2 開發思路 43
2.3.3 代碼實現 44
2.3.4 利用Continue修改代碼 46
第3章 CSS核心基礎 48
3.1 CSS基礎 49
3.1.1 CSS簡介 49
3.1.2 CSS的特點 49
3.1.3 CSS的使用 49
3.2 CSS選擇器 51
3.2.1 標簽選擇器 51
3.2.2 ID選擇器 53
3.2.3 Class選擇器 55
3.2.4 組合選擇器 56
3.2.5 偽類選擇器 58
3.3 CSS元素樣式 59
3.3.1 文本與圖像 59
3.3.2 表格 61
3.3.3 超鏈接 63
3.3.4 列表 64
3.3.5 表單 65
3.4 CSS3新增樣式 66
3.4.1 邊框陰影 66
3.4.2 邊框圓角 67
3.4.3 背景固定與漸變 67
第4章 盒模型與彈性布局 70
4.1 盒模型基礎知識 71
4.1.1 盒模型簡介 71
4.1.2 盒模型屬性 71
4.1.3 盒模型基礎布局 73
4.2 盒模型浮動 74
4.2.1 浮動的作用 74
4.2.2 盒模型左浮動 74
4.2.3 盒模型右浮動 75
4.2.4 禁止浮動 77
4.3 盒模型內容 77
4.3.1 寬度與高度 77
4.3.2 水平居中 79
4.3.3 垂直居中 80
4.3.4 內容溢出 82
4.4 盒模型嵌套 84
4.4.1 嵌套的作用 84
4.4.2 嵌套的排版 85
4.5 盒模型定位 87
4.5.1 定位簡介 87
4.5.2 固定定位 88
4.5.3 絕對定位 90
4.5.4 相對定位 91
4.5.5 其他屬性 92
4.6 彈性布局 93
4.6.1 彈性布局簡介 93
4.6.2 彈性布局相關屬性 94
4.6.3 富余空間 96
4.6.4 彈性空間 97
第5章 布局項目實戰 99
5.1 在線計算器布局 100
5.1.1 項目介紹 100
5.1.2 開發思路 100
5.1.3 代碼實現 101
5.2 蝸牛學苑宣傳頁布局 103
5.2.1 項目介紹 103
5.2.2 開發思路 103
5.2.3 代碼實現 105
5.3 響應式布局 113
5.3.1 響應式布局簡介 113
5.3.2 媒體查詢 115
5.3.3 Bootstrap框架 118
5.4 蝸牛筆記布局 121
5.4.1 整體風格 121
5.4.2 頂部設計 123
5.4.3 中部設計 127
5.4.4 利用AI生成輪播圖 133
第6章 JavaScript程序設計 136
6.1 語法基礎 137
6.1.1 JavaScript簡介 137
6.1.2 數據交互基礎 138
6.1.3 變量與數據類型 140
6.1.4 分支語句 143
6.1.5 循環語句 147
6.2 基礎編程練習 149
6.2.1 循環求和 149
6.2.2 水仙花數 150
6.2.3 統計字符 151
6.2.4 抓球問題 152
6.2.5 字符串判斷 152
6.2.6 質數判斷 154
6.3 數組 155
6.3.1 定義與使用 155
6.3.2 核心算法 156
6.3.3 排序算法 158
6.3.4 多維數組 158
6.3.5 數組對象 159
6.3.6 數組練習 160
6.4 函數 164
6.4.1 函數定義 164
6.4.2 參數可選 166
6.4.3 匿名函數 166
6.4.4 箭頭函數 166
6.4.5 函數應用 167
6.5 字符串 173
6.5.1 字符串的屬性 173
6.5.2 字符串的方法 173
6.5.3 字符串的應用 174
第7章 文檔對象模型 178
7.1 Document對象 179
7.1.1 對象集合 179
7.1.2 對象屬性 181
7.1.3 對象方法 182
7.2 查找DOM元素 183
7.2.1 DOM簡介 183
7.2.2 通過id屬性查找 184
7.2.3 通過標簽查找 185
7.2.4 通過class屬性查找 186
7.2.5 通過name屬性查找 188
7.2.6 DOM操作練習 189
7.3 操作DOM元素 192
7.3.1 DOM的屬性與方法 192
7.3.2 DOM元素的新增 194
7.3.3 DOM元素的刪除 195
7.3.4 DOM元素屬性的修改 196
7.3.5 針對表格的操作 197
第8章 JavaScript對象 204
8.1 Window對象 205
8.1.1 BOM簡介 205
8.1.2 Window基礎操作 206
8.1.3 彈出窗口 208
8.1.4 彈出框對象 209
8.1.5 定時器對象 209
8.1.6 其他對象 210
8.2 異常處理機制 211
8.2.1 異常處理機制簡介 211
8.2.2 使用onerror處理異常 211
8.2.3 使用try...catch...finally處理異常 212
8.3 正則表達式 213
8.3.1 正則表達式簡介 213
8.3.2 正則表達式語法 213
8.3.3 RegExp對象 214
8.4 JSON對象 216
8.4.1 JSON概述 216
8.4.2 JSON定義 217
8.4.3 JSON字符串 217
第9章 事件處理 219
9.1 鼠標事件 220
9.1.1 鼠標事件簡述 220
9.1.2 鼠標右擊示例 220
9.1.3 鼠標指針懸停示例 222
9.2 鍵盤事件 223
9.2.1 鍵盤事件及屬性 223
9.2.2 檢測按鍵示例 224
9.2.3 限制只能輸入數字 225
9.3 表單事件 226
9.3.1 表單事件簡述 226
9.3.2 密碼對比示例 227
9.3.3 動態城市聯動 227
9.4 多媒體事件 229
9.4.1 多媒體事件簡述 229
9.4.2 記錄播放時間 230
第 10章 JavaScript項目實戰 232
10.1 隨機飄雪 233
10.1.1 項目介紹 233
10.1.2 開發思路 233
10.1.3 代碼實現 235
10.1.4 思維拓展 238
10.2 在線計算器 239
10.2.1 項目介紹 239
10.2.2 開發思路 239
10.2.3 代碼實現 241
10.2.4 思維拓展 243
10.3 在線時鐘 243
10.3.1 項目介紹 243
10.3.2 開發思路 244
10.3.3 代碼實現 244
10.4 倒計時程序 246
10.4.1 項目介紹 246
10.4.2 開發思路 247
10.4.3 代碼實現 247
10.4.4 思維拓展 252
10.5 圖像輪播 253
10.5.1 項目介紹 253
10.5.2 開發思路 253
10.5.3 代碼實現 254
10.5.4 思維拓展 259
第 11章 AI智慧導遊項目實戰 260
11.1 系統功能與實現思路 261
11.1.1 AI智慧導遊功能描述 261
11.1.2 各功能實現思路 261
11.1.3 JavaScript對接大模型 263
11.2 界面布局實現 265
11.2.1 界面布局框架 265
11.2.2 界面布局代碼實現 266
11.2.3 移動端訪問HTML頁面 270
11.3 功能代碼實現 270
11.3.1 AI問答 270
11.3.2 智能識圖 273
11.3.3 語言翻譯 275
11.3.4 語音播報 276
11.3.5 用戶體驗優化 279
