AI+Web前端開發

第1 部分 Web 前端開發基礎入門
第1 章 前端開發概述 .......................................................................................................................... 2
1.1 前端開發的概念 ..................................................................................................................... 2
1.1.1 定義與範疇 ................................................................................................................. 2
1.1.2 前端技術體系架構 ..................................................................................................... 3
1.2 前端開發的發展脈絡 ............................................................................................................. 5
1.2.1 萌芽起步期 ................................................................................................................. 6
1.2.2 快速發展期 ................................................................................................................. 6
1.2.3 當下前沿趨勢 ............................................................................................................. 6
1.3 前端開發人員的角色與技能 ................................................................................................. 7
1.3.1 角色定位 ..................................................................................................................... 7
1.3.2 必備硬技能 ................................................................................................................. 8
1.3.3 關鍵軟技能 ................................................................................................................. 9
1.4 前端開發的典型應用場景 ..................................................................................................... 9
1.4.1 傳統網頁應用 ............................................................................................................. 9
1.4.2 移動互聯網應用 ....................................................................................................... 10
1.4.3 桌面端跨平臺應用 ................................................................................................... 10
1.5 開發環境搭建基礎 ............................................................................................................... 12
1.5.1 代碼編輯器選擇 ....................................................................................................... 12
1.5.2 瀏覽器與調試工具 ................................................................................................... 15
課後練習 ........................................................................................................................................ 16
第2 章 HTML 基礎 ............................................................................................................................ 17
2.1 HTML 概述 .......................................................................................................................... 17
2.1.1 HTML 的誕生背景與發展歷程 ............................................................................... 17
2.1.2 HTML 的作用與地位 ............................................................................................... 18
2.2 HTML 基本語法 .................................................................................................................. 19
2.2.1 標簽語法規則 ........................................................................................................... 19
2.2.2 文檔聲明與根標簽 ................................................................................................... 19
2.3 HTML 文檔結構 .................................................................................................................. 20
2.3.1 ＜head＞標簽區域 ....................................................................................................... 20
2.3.2 ＜body＞標簽區域 ....................................................................................................... 22
2.4 文本內容排版 ....................................................................................................................... 23
2.4.1 標題標簽 ................................................................................................................... 23
2.4.2 段落標簽與換行標簽 ............................................................................................... 24
2.4.3 文本格式化標簽 ....................................................................................................... 25
2.5 列表元素 ............................................................................................................................... 26
2.5.1 有序列表 ................................................................................................................... 26
2.5.2 無序列表 ................................................................................................................... 27
2.5.3 定義列表 ................................................................................................................... 28
2.6 超鏈接 ................................................................................................................................... 29
2.6.1 ＜a＞標簽的基礎屬性 ................................................................................................. 29
2.6.2 不同類型的超鏈接 ................................................................................................... 30
2.7 圖像元素 ............................................................................................................................... 32
2.7.1 ＜img＞標簽的核心屬性 ............................................................................................. 32
2.7.2 圖像與網頁布局 ....................................................................................................... 33
2.8 HTML 表格 .......................................................................................................................... 34
2.8.1 表格的基本結構 ....................................................................................................... 34
2.8.2 表格屬性與樣式 ....................................................................................................... 35
2.9 HTML 表單 .......................................................................................................................... 37
2.9.1 表單的基礎結構 ....................................................................................................... 38
2.9.2 表單元素的屬性與功能............................................................................................ 39
2.9.3 HTML5 新增表單組件 ............................................................................................. 39
2.10 HTML 語義化 .................................................................................................................... 41
2.10.1 語義化概念 ............................................................................................................. 41
2.10.2 常用語義化標簽實踐 ............................................................................................. 41
課後練習 ........................................................................................................................................ 43
第3 章 CSS 基礎 .............................................................................................................................. 44
3.1 CSS 概述............................................................................................................................... 44
3.1.1 CSS 的誕生背景與發展歷程 ................................................................................... 44
3.1.2 CSS 的作用與地位 ................................................................................................... 45
3.2 CSS 的基本語法 ................................................................................................................... 45
3.2.1 選擇器 ....................................................................................................................... 45
3.2.2 聲明塊與屬性值 ....................................................................................................... 47
3.3 CSS 引入方式 ....................................................................................................................... 49
3.3.1 內聯樣式 ................................................................................................................... 49
3.3.2 嵌入式樣式表 ........................................................................................................... 49
3.3.3 外部樣式表 ............................................................................................................... 50
3.4 字體與文本樣式 ................................................................................................................... 50
3.4.1 字體屬性 ................................................................................................................... 51
3.4.2 文本屬性 ................................................................................................................... 52
3.5 顏色與背景 ........................................................................................................................... 53
3.5.1 顏色表示法 ............................................................................................................... 53
3.5.2 背景屬性 ................................................................................................................... 54
3.6 邊框與盒模型 ....................................................................................................................... 55
3.6.1 邊框屬性 ................................................................................................................... 56
3.6.2 盒模型 ....................................................................................................................... 57
3.7 尺寸與布局 ........................................................................................................................... 58
3.7.1 尺寸屬性 ................................................................................................................... 58
3.7.2 布局屬性 ................................................................................................................... 59
3.8 列表的樣式 ........................................................................................................................... 62
3.8.1 有序列表的樣式 ....................................................................................................... 62
3.8.2 無序列表的樣式 ....................................................................................................... 63
3.8.3 定義列表的樣式 ....................................................................................................... 63
3.9 偽類與偽元素 ....................................................................................................................... 64
3.9.1 偽類基礎 ................................................................................................................... 64
3.9.2 偽元素的應用 ........................................................................................................... 65
3.10 CSS 繼承與層疊 ................................................................................................................. 66
3.10.1 CSS 繼承 ................................................................................................................. 66
3.10.2 CSS 層疊 ................................................................................................................. 67
3.11 CSS 過渡和動畫 ................................................................................................................. 68
3.11.1 CSS 過渡 ................................................................................................................. 68
3.11.2 CSS 動畫 ................................................................................................................. 69
3.12 CSS 響應式設計 ................................................................................................................. 71
3.12.1 媒體查詢 ................................................................................................................. 71
3.12.2 彈性布局 ................................................................................................................. 72
3.12.3 網格布局 ................................................................................................................. 73
課後練習 ........................................................................................................................................ 74
第2 部分 JavaScript 核心知識
第4 章 JavaScript 基礎 .................................................................................................................... 76
4.1 JavaScript 概述 ..................................................................................................................... 76
4.1.1 誕生背景與發展歷程 ............................................................................................... 76
4.1.2 語言特性與優勢 ....................................................................................................... 77
4.1.3 在網頁開發中的應用場景 ........................................................................................ 78
4.2 運行環境與引入方式 ........................................................................................................... 81
4.2.1 瀏覽器環境對JavaScript 的支持 ............................................................................. 81
4.2.2 腳本引入方式詳解 ................................................................................................... 83
4.3 基本語法 ............................................................................................................................... 85
4.3.1 語句與分號規則 ....................................................................................................... 85
4.3.2 註釋類型及用法 ....................................................................................................... 86
4.3.3 變量聲明 ................................................................................................................... 87
4.3.4 數據類型 ................................................................................................................... 89
4.3.5 常用運算符介紹 ....................................................................................................... 91
4.4 流程控制 ............................................................................................................................... 92
4.4.1 條件語句 ................................................................................................................... 92
4.4.2 循環語句 ................................................................................................................... 93
4.4.3 異常處理語句 ........................................................................................................... 95
4.5 函數 ....................................................................................................................................... 95
4.5.1 函數聲明與表達式 ................................................................................................... 96
4.5.2 箭頭函數 ................................................................................................................... 96
4.5.3 函數參數 ................................................................................................................... 97
4.5.4 函數調用方式 ........................................................................................................... 98
課後練習 ........................................................................................................................................ 99
第5 章 JavaScript 進階 .................................................................................................................. 100
5.1 數組 ..................................................................................................................................... 100
5.1.1 數組創建與元素訪問 ............................................................................................. 100
5.1.2 數組常用方法 ......................................................................................................... 101
5.1.3 多維數組概念與操作 ............................................................................................. 103
5.2 對象 ..................................................................................................................................... 104
5.2.1 對象的創建 ............................................................................................................. 104
5.2.2 對象的屬性與方法 ................................................................................................. 104
5.2.3 內置對象 ................................................................................................................. 105
5.2.4 對象的封裝與繼承 ................................................................................................. 108
5.3 作用域與閉包 ..................................................................................................................... 109
5.3.1 全局作用域、局部作用域、塊作用域 .................................................................. 109
5.3.2 閉包的定義和形成機制.......................................................................................... 110
5.3.3 閉包的實際應用與註意事項 ................................................................................... 111
5.4 事件處理 .............................................................................................................................. 111
5.4.1 常見事件類型 .......................................................................................................... 111
5.4.2 事件綁定方式 ......................................................................................................... 114
5.4.3 事件冒泡與捕獲 ..................................................................................................... 115
5.5 高階函數 ............................................................................................................................. 116
5.5.1 函數作為參數傳遞 ................................................................................................. 116
5.5.2 函數作為返回值輸出 ............................................................................................. 116
5.5.3 常用高階函數示例與實踐 ...................................................................................... 117
5.6 ES6 的新特性 ..................................................................................................................... 118
5.6.1 變量聲明 ................................................................................................................. 118
5.6.2 箭頭函數 ................................................................................................................. 119
5.6.3 模板字符串 ............................................................................................................. 119
5.6.4 解構賦值 ................................................................................................................. 120
5.6.5 類 ............................................................................................................................. 120
5.6.6 模塊 ......................................................................................................................... 121
課後練習 ...................................................................................................................................... 121
第6 章 DOM 操作 ........................................................................................................................... 122
6.1 DOM 概述 .......................................................................................................................... 122
6.1.1 DOM 的概念與意義 ............................................................................................... 122
6.1.2 DOM 樹結構解析 ................................................................................................... 122
6.2 DOM 節點操作 .................................................................................................................. 124
6.2.1 獲取節點 ................................................................................................................. 124
6.2.2 創建節點 ................................................................................................................. 125
6.2.3 添加節點、刪除節點、替換節點 .......................................................................... 127
6.3 DOM 屬性操作與樣式操作 ............................................................................................... 128
6.3.1 獲取、設置與移除屬性.......................................................................................... 128
6.3.2 通過不同方式修改元素樣式 .................................................................................. 129
課後練習 ...................................................................................................................................... 131
第3 部分 進階前端庫與框架
第7 章 經典前端開發框架：jQuery .............................................................................................. 134
7.1 jQuery 概述 ......................................................................................................................... 134
7.1.1 什麼是jQuery ......................................................................................................... 134
7.1.2 jQuery 的優勢 ......................................................................................................... 134
7.2 jQuery 基礎使用 ................................................................................................................. 135
7.2.1 引入jQuery 庫 ........................................................................................................ 135
7.2.2 文檔就緒函數 ......................................................................................................... 137
7.2.3 選擇器 ..................................................................................................................... 137
7.3 jQuery 的DOM 操作 ......................................................................................................... 144
7.3.1 獲取、設置、移除元素屬性 .................................................................................. 144
7.3.2 操作元素內容 ......................................................................................................... 145
7.3.3 創建、添加與刪除元素.......................................................................................... 146
7.4 jQuery 事件處理 ................................................................................................................. 148
7.4.1 綁定事件 ................................................................................................................. 148
7.4.2 解綁事件 ................................................................................................................. 149
7.4.3 事件冒泡與阻止 ..................................................................................................... 149
7.5 jQuery 動畫效果 ................................................................................................................. 150
7.5.1 基本動畫方法 ......................................................................................................... 150
7.5.2 自定義動畫 ............................................................................................................. 151
7.5.3 動畫回調函數 ......................................................................................................... 151
7.6 jQuery 插件開發與使用 ..................................................................................................... 152
7.6.1 插件基礎知識 ......................................................................................................... 152
7.6.2 開發簡單插件 ......................................................................................................... 152
7.6.3 使用流行插件 ......................................................................................................... 153
課後練習 ...................................................................................................................................... 154
第8 章 漸進式JavaScript 框架：Vue.js 3 ................................................................................... 155
8.1 Vue.js 3 概述 ....................................................................................................................... 155
8.1.1 誕生背景與發展歷程 ............................................................................................. 155
8.1.2 框架特性 ................................................................................................................. 156
8.2 環境搭建 ............................................................................................................................. 159
8.2.1 開發工具準備 ......................................................................................................... 159
8.2.2 Vue CLI 安裝與配置 ............................................................................................... 160
8.2.3 引入Vue.js 3 的方式 .............................................................................................. 161
8.3 基礎語法 ............................................................................................................................. 163
8.3.1 模板語法 ................................................................................................................. 163
8.3.2 數據綁定 ................................................................................................................. 164
8.3.3 計算屬性與偵聽器 ................................................................................................. 166
8.4 組件系統 ............................................................................................................................. 167
8.4.1 組件基礎概念 ......................................................................................................... 167
8.4.2 組件創建與註冊 ..................................................................................................... 168
8.4.3 組件通信 ................................................................................................................. 170
8.5 路由管理 ............................................................................................................................. 173
8.5.1 Vue Router 基礎 ...................................................................................................... 173
8.5.2 路由配置 ................................................................................................................. 175
8.5.3 路由導航與守衛 ..................................................................................................... 176
8.6 狀態管理 ............................................................................................................................. 179
8.6.1 Vuex 概述 ................................................................................................................ 179
8.6.2 Vuex 模塊搭建 ........................................................................................................ 180
8.6.3 與組件交互 ............................................................................................................. 182
8.7 生命周期 ............................................................................................................................. 183
8.7.1 生命周期概念 ......................................................................................................... 183
8.7.2 常用鉤子函數 ......................................................................................................... 184
8.8 動畫與過渡 ......................................................................................................................... 187
8.8.1 過渡效果基礎 ......................................................................................................... 187
8.8.2 動畫效果集成 ......................................................................................................... 187
8.8.3 動態過渡與動畫 ..................................................................................................... 188
課後練習 ...................................................................................................................................... 189
第9 章 打造響應式網站的利器：Bootstrap ................................................................................. 191
9.1 Bootstrap 簡介 .................................................................................................................... 191
9.1.1 什麼是Bootstrap ..................................................................................................... 191
9.1.2 選擇Bootstrap 的原因 ............................................................................................ 192
9.2 環境搭建與基礎配置 ......................................................................................................... 193
9.2.1 CDN 引入 ................................................................................................................ 193
9.2.2 工程化項目安裝 ..................................................................................................... 194
9.2.3 手動下載源代碼 ..................................................................................................... 194
9.2.4 使用Starter 模板 ..................................................................................................... 195
9.3 核心概念與布局 ................................................................................................................. 195
9.3.1 響應式設計基礎 ..................................................................................................... 195
9.3.2 網格系統 ................................................................................................................. 197
9.3.3 實用工具類 ............................................................................................................. 198
9.4 Bootstrap 組件 .................................................................................................................... 201
9.4.1 導航與導航欄 ......................................................................................................... 201
9.4.2 按鈕與按鈕組 ......................................................................................................... 202
9.4.3 卡片組件 ................................................................................................................. 204
9.4.4 表單與輸入組件 ..................................................................................................... 205
9.4.5 模態框與彈出提示 ................................................................................................. 208
9.5 進階功能與定制 ................................................................................................................. 210
9.5.1 使用Sass 定制Bootstrap ........................................................................................ 210
9.5.2 擴展組件與插件 ..................................................................................................... 212
9.5.3 Bootstrap 與JavaScript ........................................................................................... 214
課後練習 ...................................................................................................................................... 216
第4 部分 一個Web 看板程序項目實踐
第10 章 項目創建與基礎配置 ........................................................................................................ 218
10.1 開發環境搭建 ................................................................................................................... 218
10.1.1 安裝Node.js 與npm ............................................................................................. 218
10.1.2 腳手架工具 ........................................................................................................... 219
10.1.3 Vue 項目的創建 .................................................................................................... 219
10.2 項目的結構 ....................................................................................................................... 220
10.2.1 關鍵目錄解析 ....................................................................................................... 221
10.2.2 基礎文件說明 ....................................................................................................... 221
課後練習 ...................................................................................................................................... 224
第11 章 頁面布局與組件開發 ........................................................................................................ 225
11.1 主頁面布局設計 ............................................................................................................... 225
11.1.1 布局設計的一般步驟 ............................................................................................ 225
11.1.2 創建基礎布局組件 ................................................................................................ 226
11.2 列表組件和任務組件 ....................................................................................................... 227
11.2.1 任務組件................................................................................................................ 227
11.2.2 列表渲染................................................................................................................ 230
11.2.3 添加樣式................................................................................................................ 232
課後練習 ...................................................................................................................................... 233
第12 章 功能實現 ........................................................................................................................... 234
12.1 程序的主要結構 ............................................................................................................... 234
12.2 任務添加 ........................................................................................................................... 235
12.3 任務刪除 ........................................................................................................................... 235
12.4 任務查詢 ........................................................................................................................... 235
12.5 狀態變更 ........................................................................................................................... 236
12.6 數據持久化 ....................................................................................................................... 236
12.7 測試和部署 ....................................................................................................................... 237
12.7.1 構建生產環境代碼 ............................................................................................... 237
12.7.2 檢查構建結果 ....................................................................................................... 237
12.7.3 部署到服務器 ....................................................................................................... 237
課後練習 ...................................................................................................................................... 239
第5 部分 前沿技術與工程化規範
第13 章 高性能Web 開發 ............................................................................................................. 242
13.1 WebAssembly 與Rust 集成 ............................................................................................. 242
13.1.1 使用Rust 編譯WebAssembly 模塊 ..................................................................... 242
13.1.2 WebAssembly 在圖像處理與加密算法中的應用 ................................................ 244
13.2 WebGPU 圖形渲染 ........................................................................................................... 246
13.2.1 WebGPU 與Three.js 結合案例 ............................................................................ 246
13.2.2 三維數據可視化性能優化 .................................................................................... 247
課後練習 ...................................................................................................................................... 248
第14 章 AI 與低代碼開發 ............................................................................................................... 249
14.1 AI 輔助開發工具 .............................................................................................................. 249
14.1.1 GitHub Copilot 代碼生成實戰 .............................................................................. 249
14.1.2 國產AI 輔助開發工具 ......................................................................................... 253
14.2 低代碼平臺融合開發 ....................................................................................................... 255
14.2.1 Figma 設計稿轉換為代碼 .................................................................................... 255
14.2.2 Webflow 與自定義代碼擴展 ................................................................................ 257
課後練習 ...................................................................................................................................... 258
第15 章 開源協作與工程倫理 ........................................................................................................ 260
15.1 開源協作基礎 ................................................................................................................... 260
15.1.1 開源協作的核心價值 ........................................................................................... 260
15.1.2 開源協作流程與規範 ........................................................................................... 261
15.1.3 開源協作工具鏈 ................................................................................................... 262
15.2 工程倫理與職業責任 ....................................................................................................... 265
15.2.1 工程倫理的核心原則 ........................................................................................... 265
15.2.2 前端開發中的倫理實踐 ........................................................................................ 266
15.2.3 法律與合規風險 ................................................................................................... 268
課後練習 ...................................................................................................................................... 269
參考文獻 .............................................................................................................................................. 270
後記 ...................................................................................................................................................... 271