HTML5網頁設計與制作互動教程（AI協同）
王寅峰，李安琪
商品描述
本書內容由淺入深，圍繞知識導圖，覆蓋Web開發關鍵環節。本書共9個模塊，內容包括HTML5基礎與標簽、HTML5擴展、CSS基礎、CSS布局技術、CSS動畫、JavaScript基礎、DOM與事件處理、Canvas基礎與動畫設計、圖像處理與異步編程。全書各模塊均設置“零號任務”——基礎入門、“一號任務”——技能提升、“二號任務”——綜合運用和“技能補強”——拓展延伸，確保理論與企業最佳實踐緊密銜接。
本書可作為職業院校計算機類專業的Web開發教材、相關證書考試的輔導用書，也可作為Web開發者的自學用書。
作者簡介
王寅峰，深圳信息職業技術大學計算機與軟件學院副院長，教授。是國家級教學成果一二等獎主要完成人。主持建設2項國家專業教學標準。主編出版國家規劃教材6部，主持完成廣東省一類品牌專業建設，主持完成省自然科學基金及深圳基礎研究重點、科技攻關重點項目。長期擔任國際互聯網標準化組織：國際萬維網聯盟(W3C)技術顧問及AC代表。
目錄大綱
模塊1 HTML5基礎與標簽——構建Web世界的基石 1
學習目標 1
學習導言 1
知識導圖 2
零號任務：磨刀不誤砍柴工——配置Web開發環境與AI助手 3
任務說明 3
知識準備 3
1．開發與調試的核心工具：瀏覽器 3
2．代碼編輯器：Visual Studio Code 3
3．插件與快捷鍵 4
任務實現 6
1．安裝VS Code 6
2．安裝插件 6
3．調整代碼編輯器設置 6
4．創建工作區 6
5．創建文件並利用AI助手添加內容示例 6
6．測試環境並查看頁面效果 7
一號任務：脈絡分明——構建誌願服務隊招新頁面 8
任務說明 8
知識準備 8
1．HTML的基本概念 9
2．網頁語義化設計原則 10
3．文本內容標簽 10
4．表格標簽 13
任務實現 15
1．創建HTML文件並生成基礎模板 15
2．添加內容元素 16
3．組織頁面內容 16
4．查看效果 16
二號任務：圖文並茂——添加多媒體元素豐富頁面內容 17
任務說明 17
知識準備 17
1．多媒體標簽 18
2．HTML5常見的標簽屬性 22
3．相對路徑與絕對路徑 22
任務實現 24
技能補強：各司其職——動靜分離與圖床資源優化 25
技能知識 25
1．動靜分離原則 25
2．CDN技術 26
3．圖床服務的優勢與應用場景 26
技能實踐 27
1．實踐技能：應用圖床服務 27
2．從簡易到專業 27
思考與練習 27
模塊2 HTML5擴展——讓正確的標簽做正確的事 29
學習目標 29
學習導言 29
知識導圖 30
零號任務：各就各位——確定HTML5文件類型和字符編碼 30
任務說明 30
知識準備 31
1．HTML5文件類型聲明 31
2．字符編碼 31
3．語義化標簽 32
任務實現 33
一號任務：各得其所——用語義化標簽讓網頁內容易讀、易維護 34
任務說明 34
知識準備 34
1．
2．標簽 35
3．
任務實現 36
二號任務：如魚得水——使用交互式語義化標簽讓訪問更自然 36
任務說明 36
知識準備 36
1．可選性標簽 37
2．HTML5新增的表單輸入類型 37
3．HTML5新增的表單輸入屬性 38
任務實現 41
技能補強：一目了然——可見性原則 42
技能知識 42
關於可見性原則 42
技能實踐 43
1．可見性原則在實踐任務中的體現 43
2．可見性原則的業內最佳實踐 44
思考與練習 46
模塊3 CSS基礎——讓網頁穿上美麗的外衣 47
學習目標 47
學習導言 47
知識導圖 48
零號任務：一葉知秋——從開發者工具認識樣式 49
任務說明 49
知識準備 49
1．CSS核心原理 49
2．開發者工具 53
任務實現 56
1．頁面結構調整 56
2．添加類名 56
3．添加樣式 57
一號任務：萬紫千紅——用CSS統一色彩管理 59
任務說明 59
知識準備 59
1．現代CSS特性 60
2．CSS變量 60
3．使用:root定義全局變量 60
4．文本排版與hover效果 60
5．透明度及其應用 62
6．顏色搭配和設計 62
7．CSS命名規範 63
任務實現 63
1．定義全局顏色變量 63
2．使用全局變量的樣式 63
3．采用文本排版樣式 64
二號任務：井井有條——頁面布局與視覺層次設計 64
任務說明 64
知識準備 65
1．CSS盒模型 65
2．元素類型 67
3．display屬性 68
4．單位的使用 68
任務實現 69
1．設置全局變量 69
2．設定頁面基礎布局 69
3．調整區塊內容布局 69
4．圖像網格實現 70
5．調整內容元素間距 70
6．調整頁腳布局 70
技能補強：遊刃有余——CSS主題切換 71
技能知識 71
技能實踐 72
1．控制臺測試主題切換 72
2．集成頁面交互功能 72
思考與練習 73
模塊4 CSS布局技術——響應式網頁設計之旅 75
學習目標 75
學習導言 75
知識導圖 76
零號任務：精確定位——掌控布局之CSS定位技巧 77
任務說明 77
知識準備 77
1．定位的概念 77
2．不同的定位方式 77
3．重疊元素的處理 79
任務實現 79
一號任務：浮動不止——探索CSS的浮動魔法 80
任務說明 80
知識準備 81
1．浮動的概念 81
2．浮動未清除的問題 81
3．清除浮動的方法 82
任務實現 82
二號任務：從靈活到精準——實現Flexbox和Grid布局 83
任務說明 83
知識準備 84
1．關於Flexbox布局 84
2．關於Grid布局 85
3．Flexbox與Grid的混合使用 86
任務實現 87
技能補強：響應式設計——流式布局與適配性設計 90
技能知識 90
1．關於響應式設計 90
2．彈性單位 90
3．媒體查詢 91
技能實踐 91
思考與練習 95
模塊5 CSS動畫——以創意呈現流動的畫卷 97
學習目標 97
學習導言 97
知識導圖 98
零號任務：靜中思動——CSS過渡與關鍵幀動畫 98
任務說明 98
知識準備 99
1．簡單的過渡效果 99
2．復雜動畫關鍵幀 100
3．其他常見的動畫屬性 101
任務實現 102
一號任務：動感加速——探索CSS緩動函數 104
任務說明 104
知識準備 104
1．緩動函數的定義及分類 104
2．自定義緩動函數 106
任務實現 108
二號任務：惟妙惟肖——使用CSS動畫優化靜態網站 109
任務說明 109
知識準備 109
1．網頁設計原則與CSS動畫的關系 110
2．如何遵循網頁設計原則 110
任務實現 111
技能補強：別具匠心——視覺效果與功能的融合 113
技能知識 113
1．使用細膩的過渡效果 113
2．使用細節化的動畫效果 114
3．使用背景漸變和陰影效果 115
技能實踐 116
1．結合JavaScript實現“刀片切割效果” 116
2．制作高級玻璃質感效果 117
思考與練習 119
模塊6 JavaScript基礎——構建無障礙博客頁面 120
學習目標 120
學習導言 120
知識導圖 121
零號任務：JavaScript從零到一 ——構建基礎的博客頁面 121
任務說明 121
知識準備 122
1．變量與數據類型 122
2．控制語句類型 124
3．函數 124
任務實現 126
一號任務：全員通行——讓每個用戶都能無障礙訪問網頁 128
任務說明 128
知識準備 128
1．無障礙設計的基本概念 129
2．對象與數組 129
3．DOM操作與事件處理 131
任務實現 132
二號任務：設計與優化——面向對象程序設計與SOLID原則 135
任務說明 135
知識準備 135
1．面向對象程序設計 135
2．SOLID原則 138
任務實現 144
技能補強：輕松啟動——服務器搭建與Node.js的應用 145
技能知識 145
1．認識服務器 145
2．什麼是Node.js 145
3．搭建HTTP服務器 146
技能實踐 147
思考與練習 149
模塊7 DOM與事件處理——構建一個支持動態交互與協作功能的博客 150
學習目標 150
學習導言 150
知識導圖 151
零號任務：如虎添翼——使用DOM操作增強操作的動態響應 152
任務說明 152
知識準備 152
1．選擇節點 152
2．創建和插入節點 154
3．刪除節點 154
4．修改節點屬性 155
5．類名與樣式操作 155
6．替換節點 156
7．元素內容與文本操作 156
8．調試技巧 156
任務實現 156
一號任務：事半功倍——使用事件處理機制提高交互的精準性 159
任務說明 159
知識準備 159
1．添加和移除事件監聽器 159
2．常見事件類型及其使用場景 160
3．事件對象的使用 162
4．事件冒泡和捕獲 163
任務實現 163
二號任務：舉重若輕——使用閉包提效及防抖技術 164
任務說明 164
知識準備 164
1．閉包 165
2．匿名函數 167
3．防抖技術 167
任務實現 168
1．實現防抖函數 168
2．實現搜索功能 168
3．使用防抖技術優化搜索功能 168
4．優化其他高頻事件 169
技能補強：齊心協力——開發多人協作編輯器 169
技能知識 169
1．WebSocket 169
2．數據同步機制 169
3．編輯器的基本構成 170
4．剪貼板功能的安全考量 170
5．版本控制與沖突解決 171
技能實踐 171
1．準備工作 171
2．使用AI助手輔助完成server.js 171
3．通過代碼和API實現編輯器 172
4．運行WebSocket和HTTP服務器並測試 172
思考與練習 173
模塊8 Canvas基礎與動畫設計——在畫布上揮灑創意 175
學習目標 175
學習導言 175
知識導圖 176
零號任務：筆走龍蛇——Canvas繪圖 176
任務說明 176
知識準備 177
1．Canvas簡介 177
2．Canvas文本渲染 178
3．Canvas樣式 179
4．Canvas圖像編輯 180
任務實現 181
一號任務：妙趣橫生——Canvas動畫 182
任務說明 182
知識準備 182
1．實現Canvas動畫的基本步驟 183
2．Canvas動畫關鍵技術 183
3．Canvas高級動畫效果 184
4．Canvas動畫控制與互動 186
任務實現 188
二號任務：曲盡其妙——貝塞爾曲線繪制 189
任務說明 189
知識準備 189
1．貝塞爾曲線的定義與應用 189
2．常見貝塞爾曲線公式的推導 189
3．貝塞爾曲線的高級技巧 195
任務實現 197
技能補強：在線支付—— 開發仿真“打賞功能” 197
技能知識 198
1．什麼是SPC 198
2．SPC的三大核心理念 198
3．傳統支付與SPC支付的差異 198
技能實踐 199
1．模擬實現支付功能 199
2．模擬優化支付功能 202
思考與練習 203
模塊9 圖像處理與異步編程——實現視覺互動的魔法 205
學習目標 205
學習導言 205
知識導圖 206
零號任務：圖影即現——實現圖像上傳與預覽 206
任務說明 206
知識準備 207
1．二進制對象與文件API 208
2．資源生命周期管理 209
3．事件驅動的DOM交互 210
任務實現 211
一號任務：妙筆生花——實現圖像處理與應用視覺效果功能 213
任務說明 213
知識準備 213
1．Canvas渲染基礎 213
2．圖像處理算法與目標標註 216
3．硬件加速：WebGL與WebGPU 217
任務實現 219
二號任務：有備無患——異步編程與異常處理實踐 220
任務說明 220
知識準備 220
1．Promise與異步編程範式 220
2．異常處理 225
3．異常處理最佳實踐 230
任務實現 230
1．新增異步目標檢測功能 230
2．改寫目標檢測數據的Canvas標註 230
3．性能監控與異常處理的完善 230
4．控制按鈕事件綁定 230
技能補強：別具匠心——開發原生WebGPU小組件 231
技能知識 231
1．WebGPU的定義、背景與優勢 231
2．WebGPU和WebNN技術趨勢與發展方向 231
技能實踐 232
WebGPU組件部署 232
思考與練習 237
