本书秉持“学生易学”的理念，注重实践能力训练，内容编排遵循“零基础入门—— 技能进阶—— 实战应用”的递进式教学路径，以企业级项目实战任务为载体，精选了“企业网站”“美丽乡村网站”“数字智慧党建网站”3个真实的案例。主教材把这3个案例分解成9个单元，内容包括搭建开发环境、HTML基础、HTML进阶、CSS基础、CSS盒子模型、CSS弹性布局、CSS动画、JavaScript基础和JavaScript进阶，侧重理论讲解与示例演示。实训手册共10个单元，在主教材对应实训内容的基础上增加了制作数字智慧党建网站的完整项目实战，并采用AIGC辅助开发的模式，帮助读者实现自然语言生成代码、代码续写、代码优化、代码解释、注释生成以及研发智能问答等 多项功能。主教材与实训手册相辅相成，引导学生运用人工智能工具完成网页开发全流程，形成了一套融“教、学、做、用”于一体的系统化教学方法。 本书可以作为各类职业院校Web前端开发和网站开发相关课程的教材，也可以作为 Web前端开发爱好者的学习参考书。 本书配有微课视频、教学课件、课程标准、习题答案、程序源代码、实训手册、拓展任务案例和考试试卷，选用本书作为教材的教师可登录机械工业出版社教育服务网（www.cmpedu.com）注册后免费下载，或联系编辑（010-88379194）咨询。本书还整合了超星“示范教学包”，为师生提供一站式的“能学、辅教”的数字化课程资源服务，提升教学质量与效率。

职业院校教师

目录
前言
二维码索引
单元1　搭建开发环境　　// 001
1.1　Web前端开发概述　　// 002
1.2　Web前端开发常用术语　　// 002
1.3　HTML5的基本结构　　// 003
1.4　Web浏览器简介　　// 005
1.5　Web开发工具简介　　// 005
1.6　AI辅助编程工具简介　　// 007
技能实训　　// 009
小结　　// 009
单元2　HTML基础　　// 010
2.1　HTML标记和语义元素　　// 011
2.2　HTML文本标记　　// 012
2.3　HTML超链接　　// 014
2.4　HTML图像　　// 018
2.5　HTML表格　　// 020
技能实训　　// 026
小结　　// 026
单元3　HTML进阶　　// 027
3.1　HTML列表　　// 028
3.2　HTML5媒体元素　　// 030
3.3　HTML5表单控件　　// 032
3.4　HTML内联框架　　// 039
技能实训　　// 041
小结　　// 041
单元4　CSS基础　　// 042
4.1　CSS和CSS3简介　　// 043
4.2　引入CSS　　// 043
4.3　CSS基本语法　　// 044
4.4　CSS文本属性　　// 047
4.5　CSS常用背景属性　　// 050
4.6　CSS的选择器与权重　　// 054
4.7　CSS表格与列表属性　　// 059
技能实训　　// 062
小结　　// 062
单元5　CSS盒子模型　　// 063
5.1　盒子模型的概念　　// 064
5.2　盒子模型的构成属性　　// 066
5.3　盒子模型的定位　　// 072
技能实训　　// 077
小结　　// 078
单元6　CSS弹性布局　　// 079
6.1　Flex布局简介　　// 080
6.2　Flex容器属性　　// 082
6.3　Flex项目属性　　// 090
6.4　媒体查询与响应式布局　　// 093
技能实训　　// 095
小结　　// 096
单元7　CSS动画　　// 097
7.1　CSS动画简介和坐标系　　// 098
7.2　transform变形属性　　// 099
7.3　transition过渡属性　　// 104
7.4　animation动画属性　　// 106
技能实训　　// 111
小结　　// 111
单元8　JavaScript基础　　// 112
8.1　JavaScript简介　　// 113
8.2　语法基础　　// 113
8.3　数据类型　　// 115
8.4　运算符　　// 118
8.5　数据类型转换　　// 121
8.6　流程控制语句　　// 123
8.7　函数　　// 128
8.8　对象　　// 129
技能实训　　// 131
小结　　// 131
单元9　JavaScript进阶　　// 132
9.1　DOM简介　　// 133
9.2　DOM对象操作　　// 133
9.3　BOM简介和操作　　// 138
9.4　JavaScript事件处理　　// 143
9.5　JavaScript JSON　　// 149
9.6　JavaScript Ajax　　// 150
技能实训　　// 152
小结　　// 152
参考文献　　// 153