本书以一个完整网站开发项目，在第1版的基础上修订而成，共设计8个单元15个工作任务，以关联知识、实战举例、任务描述、任务实施、AIGC典型应用为主线，按照认知规律由浅入深详尽讲述了HTML5、CSS3、JavaScript和jQuery及目前较新的Vue前端技术。全书主要包含Web前端开发基础、HTML5常用标签、CSS3基础知识、首页设计、用户中心、网站交互、jQuery框架、Vue框架。

本书适合作为高等职业教育计算机类专业本科及专科的教材，也可以作为期望从事Web前端开发相关职业人员的自学参考书。本书配套资源丰富，提供教案、PPT、微课视频、程序源代码、习题。选用本书 作为教材的教师可登录机械工业出版社教育服务网（www.cmpedu.com）注册账号后下载。

目　录

前言

二维码索引

单元1　Web前端开发基础　　// 001　

单元概述　　// 001

学习目标　　// 001

1.1　网页与网站　　// 002

1.2　HTML发展历史　　// 002

1.3　CSS发展历史　　// 003

1.4　JavaScript发展历史　　// 003

1.5　HTML常用开发工具　　// 004

1.6　HTML的基本定义　　// 005

1.7　HTML文档的基本结构说明　　// 005

工作任务1　Web项目初始化　　// 006

单元总结　　// 009

习题　　// 009

AIGC典型应用　　// 010

单元2　HTML5常用标签　　// 011　

单元概述　　// 011

学习目标　　// 011

2.1　文本标签　　// 012

2.2　分隔线标签　　// 015

2.3　图片标签　　// 015

2.4　列表标签　　// 016

2.5　超链接标签　　// 018

2.6　多媒体标签——Web页面音视频播放　　// 021

2.7　标签类型　　// 024

2.8　<meta>标签　　// 027

2.9　媒体查询　　// 028

工作任务2　设计一个富含多媒体元素的新闻页面　　// 030

工作任务3　设计一个网站导航栏　　// 031

单元总结　　// 034

习题　　// 034

拓展实训　　// 035

单元3　CSS3基础知识　　// 037　

单元概述　　// 037

学习目标　　// 037

3.1　CSS3基本概念　　// 038

3.2　CSS3基本选择器　　// 040

3.3　字体样式属性　　// 050

3.4　文本属性　　// 053

3.5　背景属性　　// 054

工作任务4　CSS样式文件设计与导入　　// 055

单元总结　　// 056

习题　　// 056

拓展实训　　// 057

单元4　首页设计——CSS3高级应用　　// 059　

单元概述　　// 059

学习目标　　// 059

4.1　CSS3盒模型　　// 060

4.2　CSS3常见网页布局　　// 066

4.3　CSS3弹性布局　　// 072

4.4　CSS3定位　　// 078

4.5　CSS3变形与动画　　// 083

工作任务5　设计网站首页　　// 088

工作任务6　完善首页内容　　// 092

单元总结　　// 105

习题　　// 106

拓展实训　　// 108

AIGC典型应用　　// 108

单元5　用户中心——表格和表单　　// 109　

单元概述　　// 109

学习目标　　// 109

5.1　表格　　// 110

5.2　表单　　// 112

5.3　HTML5 input控件新增功能类型　　// 115

5.4　HTML5表单控件新增属性　　// 117

工作任务7　用户登录页面　　// 120

工作任务8　用户注册页面　　// 124

单元总结　　// 125

习题　　// 125

拓展实训　　// 126

AIGC典型应用　　// 126

单元6　网站交互——JavaScript语法基础　　// 127　

单元概述　　// 127

学习目标　　// 127

6.1　JavaScript程序概述　　// 128

6.2　变量与运算符　　// 132

6.3　JavaScript数组　　// 142

6.4　JavaScript对象　　// 147

6.5　程序结构　　// 148

6.6　函数　　// 155

6.7　元素与节点操作　　// 159

6.8　事件处理程序　　// 166

6.9　常用事件处理程序　　// 173

6.10　定时器与动画　　// 179

工作任务9　用户登录信息验证　　// 182

单元总结　　// 185

习题　　// 185

拓展实训　　// 187

AIGC典型应用　　// 187

单元7　jQuery框架　　// 189　

单元概述　　// 189

学习目标　　// 189

7.1　jQuery介绍　　// 190

7.2　jQuery选择器　　// 193

7.3　正则表达式定义　　// 202

7.4　操作正则表达式的方法　　// 205

7.5　jQuery AJAX　　// 207

7.6　jQuery常见效果　　// 210

工作任务10　用户注册信息验证　　// 214

工作任务11　首页导航栏下拉菜单　　// 216

工作任务12　首页轮播图效果　　// 216

工作任务13　首页成果展示左右滚动　　// 217

单元总结　　// 219

习题　　// 219

拓展实训　　// 220

AIGC典型应用　　// 221

单元8　Vue框架　　// 223　

单元概述　　// 223

学习目标　　// 223

8.1　Vue.js概述　　// 224

8.2　Vue指令　　// 231

8.3　计算属性　　// 240

8.4　监听属性　　// 244

8.5　v-model表单数据双向绑定　　// 245

工作任务14　基于Vue的购物车　　// 246

工作任务15　基于Vue的用户登录验证　　// 249

单元总结　　// 252

习题　　// 252

拓展实训　　// 253

参考文献　　// 254