第 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