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

目录
前言
二维码索引
单元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

前 言
本书由主教材和实训手册两部分组成，结合Web前端开发课程的发展背景，以实际项目为驱动，系统地介绍了Web前端开发的相关知识和技能。本书以社会主义核心价值观为引领，传承中华传统文化，内容体现时代性和创造性，注重立德树人，采用“项目引导、单元驱动”式教学法，设计了9个单元，通过实际操作提升学生的实践能力。
一、编写特色
1．注重学生素养提升，落实立德树人根本任务
在编写过程中，注重将立德树人的教育理念融入教材内容中，系统地设计了工匠精神、精益求精，家国情怀、为国育人，技术自信、勇于创新，严谨规范、攻坚克难，与时俱进、终身学习等学生素养元素主线，贯穿于整本教材，体现“价值塑造、知识传授、能力培养”三位一体的人才培养目标。
2．融入AIGC辅助学习工具，提升学习效率和质量
本书巧妙地融入了AIGC（人工智能生成内容）辅助学习工具，并在实训手册中重点练习。利用这些工具，学生可以实现自然语言生成代码、行级和函数级代码续写、代码优化、代码注释生成、测试数据生成、代码解释以及研发智能问答等多项功能，极大地提升了学习效率和质量，满足个性化学习需要，提升学生的人工智能素养。
在实训手册中，构建“AI+场景化开发”训练体系，详细设计了与AIGC辅助学习工具的结合使用方法。在局部网页模块制作阶段，通过自然语言交互生成HTML、CSS布局代码；在全站网页开发阶段，支持HTML、JavaScript和CSS智能代码补全，以及实时代码注释和解释；在调试阶段，可根据输入报错信息获得AI建议和指导。同时，设置大量的企业案例实战练习，让学生在使用AIGC工具解决具体问题的过程中，深化对知识的理解，在真实工程场景中掌握Web前端开发技术和经验。
3．项目引导、单元驱动，力求“学生易学、乐学”
本书内容编排遵循“零基础入门—— 技能进阶—— 实战应用”的递进式教学路径，精选了3个真实的项目案例，并将其分解为9个单元，每个单元再细化为2～5个子任务，形成了一套融“教、学、做、用”于一体的教学系统。
4．提供教学“一站式”解决方案，践行“老师易教、乐教”
本书提供了丰富的数字化、立体化教学资源，包括微课视频、教学课件、课程标准、习题答案、程序源代码、实训手册、拓展任务案例和考试试卷，最大限度地满足教学实施、课程考评等需求。此外，本书配套建立超星“示范教学包”，定位“能学、辅教”，共享优质教学资源。
5．校企双元开发，融合企业真实案例
本书由职业院校与企业资深工程师共同完成，引入3个企业真实案例，以项目化理念重构教学内容。编写成员包括具有多年教学经验的双师型职业院校教师以及来自企业开发一线、具有丰富实践经验的工程师；企业工程师参与教材项目的选取、项目的设计和资源制作等环节。
二、主要内容
本书采用双线并行设计：教学主线以“企业网站”和“美丽乡村网站”贯穿始终，循序渐进地讲解核心知识；研发线则以“数字智慧党建网站”为综合实践项目，系统地培养学生运用HTML、CSS、JavaScript和JSON的工程能力。下表是学时分配建议，教学实施时可参考并灵活调整。
单元 技能点 任务规划 72学时 90学时
单元1　搭建开发环境 Web前端开发概述，Web前端开发常用术语，HTML5的基本结构，Web浏览器简介，Web开发工具简介，AI辅助编程工具简介 HBuilder X的安装和使用，Visual Studio Code的安装和使用，浏览器的安装和使用，Dreamweaver的安装和使用，PHPStudy的安装和使用 2 4
单元2　HTML基础 HTML标记和语义元素，HTML文本标记，HTML超链接，HTML图像，HTML表格 制作企业简介网页，制作企业统计表网页，制作企业联系方式网页 6 8
单元3　HTML进阶 HTML列表，HTML5媒体元素，HTML5表单控件，HTML内联框架 制作企业视频宣传网页，制作志愿活动征集表单网页，制作音频播放网页和招聘报名网页 6 8
单元4　CSS基础 CSS和CSS3简介，引入CSS，CSS基本语法，CSS文本属性，CSS常用背景属性，CSS的选择器与权重，CSS表格与列表属性 美化企业简介网页，制作工匠技能认证网页，美化用户登录网页和招聘报名网页 8 10
单元5　CSS盒子模型 盒子模型的概念，盒子模型的构成属性，盒子模型的定位 制作美丽乡村首页，制作下拉菜单式网站导航，制作民宿详情网页 8 10
单元6　CSS弹性布局 Flex布局简介，Flex容器属性，Flex项目属性，媒体查询与响应式布局 制作美丽乡村新闻网页，制作瀑布流相册，制作新闻详情介绍网页 8 10
单元7　CSS动画 CSS动画简介和坐标系，transform变形属性，transition过渡属性，animation动画属性 制作美丽乡村照片墙网页，制作客栈网页的遮罩效果，制作新闻网页的动画效果 8 8
单元8　JavaScript基础 JavaScript简介，语法基础，数据类型，运算符，数据类型转换，流程控制语句，函数，对象 制作网页版计算器，制作网页贷款计算器，制作表单注册验证网页 8 12
单元9　JavaScript进阶 DOM简介，DOM对象操作，BOM简介和操作，JavaScript事件处理，JavaScript JSON，JavaScript Ajax 渲染美丽乡村网站首页；制作Tab选项卡效果，制作直播评论弹幕网页 10 12
单元10　制作数字智慧党建网站 项目描述，网站规划，制作管理后台的注册网页和登录网页，制作管理后台的用户列表网页，制作网站的图片列表网页，制作网站的新闻列表网页，制作网站的首页 8 8

主教材侧重理论讲解与示例演示，对应“技能点”模块；实训手册创新采用AIGC辅助开发模式，通过企业级项目实战任务，引导学生运用智能工具完成网页开发全流程，对应“任务规划”模块，充分体现“项目驱动、任务引领”的职业教育特色。
三、编写队伍及分工
本书由蓝永健和刘径平担任主编，古振忠、谢秀玲、蔡秀梅担任副主编，何倍廷、
韦权、黄洁燕、李天凤、邓爱玲、林丽婷、陈晓丽、陈利娟和范智峰参加编写。其中，
蓝永健编写了单元2、单元3和实训手册的单元10，刘径平编写了单元8和单元9，古振忠编写了单元5和单元6，谢秀玲编写了单元1和单元7，蔡秀梅编写了单元4。何倍廷、韦权、
黄洁燕、李天凤、邓爱玲、林丽婷、陈晓丽和陈利娟分别完成了单元2～单元9练习题库、拓展任务和实训任务书的编写工作。范智峰提供了企业项目和案例并参与了单元项目的设计和资源制作。全书由蓝永健统稿。
由于编者水平有限，书中难免存在不妥和疏漏之处，欢迎广大读者提出宝贵意见。

编　者