模块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．<figure>与<figcaption>标签　34
2．<mark>标签　35
3．<progress>标签　35
任务实现　36
二号任务：如鱼得水——使用交互式语义化标签让访问更自然　36
任务说明　36
知识准备　36
1．可选性标签<details>和<summary>　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