第1章 Web网站初体验　1
1.1　揭秘Web前端　1
1.1.1 Web和Web前端　1
1.1.2 网页核心技术　3
1.2　走进HTML5　6
1.2.1 标签、元素、文件结构概述　6
1.2.2 HTML5的基本标签　7
1.3　使用WebStorm编写HTML5代码　9
1.3.1 下载和安装　9
1.3.2 创建HTML5工程和文件，
运行HTML5程序　11
1.4　在WebStorm中引入AIGC工具　12
1.4.1 AIGC编程助手Baidu Comate　12
1.4.2 AIGC编程助手TONGYI Lingma　13
1.4.3 DeepSeek R1推理大模型　14
小结　14
习题　14
第2章 搭建网站雏形　15
2.1 【案例1】制作第一个HTML5案例　15
2.1.1 案例描述　15
2.1.2 技术准备　16
2.1.3 案例实现　17
2.1.4 动手试一试　19
2.2 【案例2】实现多图展示合作伙伴　19
2.2.1 案例描述　19
2.2.2 技术准备　19
2.2.3 案例实现　21
2.2.4 动手试一试　22
2.3 【案例3】通过外链实现友情链接　23
2.3.1 案例描述　23
2.3.2 技术准备　23
2.3.3 案例实现　24
2.3.4 动手试一试　25
2.4 【案例4】使用分组标签制作联系方式　25
2.4.1 案例描述　25
2.4.2 技术准备　26
2.4.3 案例实现　26
2.4.4 动手试一试　27
2.5　AIGC辅助快速学习　28
2.5.1 AIGC辅助生成注释　28
2.5.2 AIGC辅助解释代码　28
2.5.3 AIGC辅助查询术语　29
小结　29
习题　29
第3章 用CSS3装饰网站　30
3.1 【案例1】使用图文混排展示“人邮经典”系列图书　30
3.1.1 案例描述　30
3.1.2 技术准备　31
3.1.3 案例实现　31
3.1.4 动手试一试　33
3.2 【案例2】制作商品列表页面　34
3.2.1 案例描述　34
3.2.2 技术准备　34
3.2.3 案例实现　36
3.2.4 动手试一试　37
3.3 【案例3】制作网购商城的商品抢购
页面　38
3.3.1 案例描述　38
3.3.2 技术准备　38
3.3.3 案例实现　40
3.3.4 动手试一试　42
3.4 【案例4】打造多彩网站主题背景　42
3.4.1 案例描述　42
3.4.2 技术准备　43
3.4.3 案例实现　44
3.4.4 动手试一试　45
3.5　AIGC辅助编程——添加CSS样式　46
3.5.1 为文本添加CSS样式　46
3.5.2 为列表构成的导航菜单添加
CSS样式　47
小结　48
习题　48
第4章 HTML5多媒体实现网站“家庭影院”　49
4.1 【案例1】实现网页中的视频播放器　49
4.1.1 案例描述　49
4.1.2 技术准备　49
4.1.3 案例实现　50
4.1.4 动手试一试　51
4.2 【案例2】实现动态文字弹幕　51
4.2.1 案例描述　51
4.2.2 技术准备　52
4.2.3 案例实现　53
4.2.4 动手试一试　53
4.3 【案例3】实现神奇的在线听书功能　54
4.3.1 案例描述　54
4.3.2 技术准备　54
4.3.3 案例实现　55
4.3.4 动手试一试　56
4.4 【案例4】定制专属视频播放器　56
4.4.1 案例描述　56
4.4.2 技术准备　57
4.4.3 案例实现　58
4.4.4 动手试一试　60
4.5　AIGC辅助编程——在网页中嵌入多媒体　61
4.5.1 随机播放背景音乐　61
4.5.2 定制播放器并设置时间　61
小结　62
习题　62
第5章 通过HTML5表单与用户交互　63
5.1 【案例1】使用表单实现用户注册页面　63
5.1.1 案例描述　63
5.1.2 技术准备　63
5.1.3 案例实现　65
5.1.4 动手试一试　68
5.2 【案例2】实现用户信息收集页面　68
5.2.1 案例描述　68
5.2.2 技术准备　68
5.2.3 案例实现　71
5.2.4 动手试一试　72
5.3 【案例3】仿制发表朋友圈页面　72
5.3.1 案例描述　72
5.3.2 技术准备　73
5.3.3 案例实现　74
5.3.4 动手试一试　75
5.4 【案例4】实现上传头像页面　76
5.4.1 案例描述　76
5.4.2 技术准备　76
5.4.3 案例实现　77
5.4 4 动手试一试　78
5.5　AIGC辅助编程——使用表单构建网页　78
5.5.1 使用复选框实现选择课程页面　78
5.5.2 使用文本域实现留言板　79
小结　80
习题　80
第6章 列表与表格——让网站更规整　81
6.1 【案例1】实现限时抢购页面　81
6.1.1 案例描述　81
6.1.2 技术准备　81
6.1.3 案例实现　83
6.1.4 动手试一试　85
6.2 【案例2】制作抽屉风格的滑出菜单特效　85
6.2.1 案例描述　85
6.2.2 技术准备　86
6.2.3 案例实现　86
6.2.4 动手试一试　88
6.3 【案例3】实现2023年度国内手机销量排名　88
6.3.1 案例描述　88
6.3.2 技术准备　89
6.3.3 案例实现　89
6.3.4 动手试一试　91
6.4 【案例4】使用表格设计购物车页面　91
6.4.1 案例描述　91
6.4.2 技术准备　92
6.4.3 案例实现　94
6.4.4 动手试一试　96
6.5　AIGC辅助编程——使用有序列表和表格构建网页　96
6.5.1 使用有序列表模拟QQ联系人列表　96
6.5.2 使用表格设计员工信息表　97
小结　98
习题　98
第7章 CSS3布局与动画　99
7.1 【案例1】实现购物网站中的“主题购”页面　99
7.1.1 案例描述　99
7.1.2 技术准备　99
7.1.3 案例实现　101
7.1.4 动手试一试　103
7.2 【案例2】实现鼠标指针滑过图片时的平移效果　104
7.2.1 案例描述　104
7.2.2 技术准备　104
7.2.3 案例实现　106
7.2.4 动手试一试　109
7.3 【案例3】为导航菜单添加动画特效　109
7.3.1 案例描述　109
7.3.2 技术准备　110
7.3.3 案例实现　111
7.3.4 动手试一试　113
7.4 【案例4】使用CSS3实现网页轮播图　113
7.4.1 案例描述　113
7.4.2 技术准备　114
7.4.3 案例实现　116
7.4.4 动手试一试　118
7.5　AIGC辅助编程——在网页中设置浮动布局和动画效果　118
7.5.1 为多个书名设置浮动布局　118
7.5.2 设置动态改变元素背景颜色和高度的动画效果　119
小结　120
习题　120
第8章 JavaScript编程应用　121
8.1 【案例1】计算存款本息合计　121
8.1.1 案例描述　121
8.1.2 技术准备　121
8.1.3 案例实现　124
8.1.4 动手试一试　126
8.2 【案例2】输出影厅座位图　126
8.2.1 案例描述　126
8.2.2 技术准备　126
8.2.3 案例实现　128
8.2.4 动手试一试　130
8.3 【案例3】输出2023年电影票房排行榜　130
8.3.1 案例描述　130
8.3.2 技术准备　130
8.3.3 案例实现　133
8.3.4 动手试一试　135
8.4 【案例4】更换页面主题　135
8.4.1 案例描述　135
8.4.2 技术准备　136
8.4.3 案例实现　137
8.4.4 动手试一试　139
8.5　AIGC辅助编程——流程控制语句的应用　139
8.5.1 使用if语句判断年龄段　139
8.5.2 使用for语句输出乘法口诀表　140
小结　141
习题　141
第9章 JavaScript事件处理　143
9.1 【案例1】实现切换商品类别的选项卡　142
9.1.1 案例描述　142
9.1.2 技术准备　142
9.1.3 案例实现　143
9.1.4 动手试一试　146
9.2 【案例2】实现简单计算器　147
9.2.1 案例描述　147
9.2.2 技术准备　147
9.2.3 案例实现　148
9.2.4 动手试一试　150
9.3 【案例3】模仿影视网站星级评分功能　150
9.3.1 案例描述　150
9.3.2 技术准备　151
9.3.3 案例实现　151
9.3.4 动手试一试　154
9.4 【案例4】实现用户注册页面　154
9.4.1 案例描述　154
9.4.2 技术准备　155
9.4.3 案例实现　155
9.4.4 动手试一试　157
9.5　AIGC辅助解决JavaScript事件在处理过程中的问题　158
小结　159
习题　159
第10章 手机响应式开发（上）　160
10.1 【案例1】实现手机端展示图文列表　160
10.1.1 案例描述　160
10.1.2 技术准备　161
10.1.3 案例实现　162
10.1.4 动手试一试　164
10.2 【案例2】实现手机端的用户登录　165
10.2.1 案例描述　165
10.2.2 技术准备　165
10.2.3 案例实现　166
10.2.4 动手试一试　168
10.3 【案例3】实现手机端的聊天界面　169
10.3.1 案例描述　169
10.3.2 技术准备　169
10.3.3 案例实现　171
10.3.4 动手试一试　173
10.4 【案例4】在手机端播放视频　173
10.4.1 案例描述　173
10.4.2 技术准备　174
10.4.3 案例实现　174
10.4.4 动手试一试　175
10.5 AIGC辅助编程——使用响应式网页设计实现APP网页应用　176
10.5.1 使用Flex布局设计一个APP底部导航栏　176
10.5.2 实现APP城市列表　177
小结　178
习题　178
第11章 手机响应式开发（下）　179
11.1 【案例1】添加响应式图片　179
11.1.1 案例描述　179
11.1.2 技术准备　180
11.1.3 案例实现　180
11.1.4 动手试一试　181
11.2 【案例2】使用第三方插件升级视频功能　181
11.2.1 案例描述　181
11.2.2 技术准备　182
11.2.3 案例实现　182
11.2.4 动手试一试　184
11.3 【案例3】实现响应式导航菜单　184
11.3.1 案例描述　184
11.3.2 技术准备　185
11.3.3 案例实现　185
11.3.4 动手试一试　187
11.4 【案例4】实现响应式表格　187
11.4.1 案例描述　187
11.4.2 技术准备　187
11.4.3 案例实现　188
11.4.4 动手试一试　189
11.5 AIGC辅助编程——添加响应式网页内容　190
11.5.1 实现购物网站响应式导航　190
11.5.2 使用响应式表格输出考试成绩表　191
小结　192
习题　192
第12章 综合案例——在线教育平台　193
12.1 案例分析　193
12.1.1 案例概述　193
12.1.2 系统功能结构　193
12.1.3 文件夹组织结构　194
12.2 技术准备　194
12.2.1 实现过程分析　195
12.2.2 Amaze UI的使用　197
12.2.3 登录页面的实现技巧　199
12.3 主页的设计与实现　199
12.3.1 主页概述　199
12.3.2 主页设计　200
12.3.3 代码实现　200
12.4 登录页面的设计与实现　205
12.4.1 登录页面概述　206
12.4.2 登录页面设计　206
12.4.3 代码实现　207
12.5 课程列表页面的设计与实现　210
12.5.1 课程列表页面概述　210
12.5.2 课程列表页面设计　210
12.5.3 代码实现　211
12.6 课程详情页面的设计与实现　215
12.6.1 课程详情页面概述　215
12.6.2 课程详情页面设计　216
12.6.3 代码实现　217
12.7 AIGC辅助分析优化项目　222
12.7.1 AIGC辅助提供项目开发思路　222
12.7.2 AIGC辅助优化代码　223
12.7.3 AIGC辅助完善项目　225
小结　226