前　言近几年，随着互联网行业的持续发展以及数字化经济的高速发展，海量的平台开发工作形成巨大的人才缺口，尤其是Web前端、移动端HTML5的开发人才紧缺。本书以培养前端工程师为目标，立足前端工程师工作岗位所必须具备的素质，包括熟知页面布局、熟练样式美化、掌握JavaScript基础、熟悉jQuery框架，了解Vue框架，能够使用HTML5十CSS3开发出炫丽的交互效果。本书遵循项目导向理念，融合了编者多年的教学实践和改革经验，全面讲解了Web前端开发的知识。在第1版的基础上，设计8个单元15个工作任务，具有以下特点。1）本书注重价值引领，将专业教育与思政教育相融合，强化育人功能，通过素材选取的方法，指导教师在进行不同知识点讲解时，选用优质载体，开展课程思政，对其中蕴含的价值进行引导和适时传递，寓价值观于知识传授中。2）围绕互联网十、新兴技术行业对Web前端开发技术的需求，追踪网站前端设计技术发展趋势，吸收企业技术骨干参与教材编写，将新技术充分融入本书中。3）本书引入人工智能技术，精心设计AIGC典型应用，学生可以参考本书提供的提示词，使用任意大模型（首选有代码模式的大模型）生成代码并预览，在提高人工智能应用的基础上加深对相关知识的理解。4）本书是一本能;操作的图书，精心设计知识点，每个知识点对应一个真实网站开发案例，教材主线为关联知识十实战举例十任务实施十AIGC典型应用，举一反三，力求帮助读者;知其然，知其所以然。5）本书采用项目导向、任务驱动模式。以项目为载体，将教学内容与实际项目相结合，将学习置于任务实践中，从而培养学生的实践能力和解决问题的能力。6）本书按照新型一体化教材标准配套建设教材资源，资源丰富，提供教案、PPT课件、微课视频、程序源代码、课后习题。建有在线开放课程，方便教师教学和学生预习、复习。本书可用于32课时、48课时、64课时的教学，详见下表安排。单元内容32课时48课时64课时单元1　Web前端开发基础8810单元2　HTML5常用标签444单元3　CSS3基础知识81012单元4　首页设计CSS3高级应用446单元5　用户中心表格和表单41014

单元内容32课时48课时64课时单元6　网站交互JavaScript语法基础268单元7　jQuery框架048单元8　Vue框架222合计324864本书由无锡职业技术大学王得燕、周薇任主编，刘培林、杨文珺任副主编，常州信息职业技术学院聂章龙、江苏一道云科技发展有限公司高级工程师宋学永参编。其中，单元1、单元8由王得燕编写，单元3由杨文珺编写，单元4由聂章龙编写，单元5由宋学永编写，单元6由刘培林编写，单元2、单元7由周薇、王得燕编写。全书由王得燕统稿，杨文珺审核。在编写本书的过程中黄心怡、蔡海林、马龙剑、李康、谢含洁等同学对教材中的程序进行多轮交叉调试，在此对他们的辛勤付出表示感谢。由于编者水平有限，书中难免出现疏漏或不足之处，敬请读者批评指正。编　者

本书遵循职业教育教材编写规律和职业院校学生学习规律，配套齐全

本书以一个完整网站开发项目，在第1版的基础上修订而成，共设计8个单元15个工作任务，以关联知识、实战举例、任务描述、任务实施、AIGC典型应用为主线，按照认知规律由浅入深详尽讲述了HTML5、CSS3、JavaScript和jQuery及目前较新的Vue前端技术。全书主要包含Web前端开发基础、HTML5常用标签、CSS3基础知识、首页设计、用户中心、网站交互、jQuery框架、Vue框架。本书适合作为高等职业教育计算机类专业本科及专科的教材，也可以作为期望从事Web前端开发相关职业人员的自学参考书。本书配套资源丰富，提供教案、PPT、微课视频、程序源代码、习题。选用本书 作为教材的教师可登录机械工业出版社教育服务网（www.cmpedu.com）注册账号后下载。

本人于2000.07至今在高职院校从事计算机大类专业教学21年。马来西亚管理与科学大学博士在读。主持并结题江苏省教改课题2项，参与1项。作为主要完成人完成《可视化程序设计》国家级在线开放课程建设。作为副主编编写教材《ASP.NET(C井)动态网站开发案例教程》获评江苏省重点教材。发表北大核心期刊及以上高水平论文10余篇，其中SCI论文2篇，EI论文2篇。

目　录前言二维码索引单元1　Web前端开发基础　　// 001　单元概述　　// 001学习目标　　// 0011.1　网页与网站　　// 0021.2　HTML发展历史　　// 0021.3　CSS发展历史　　// 0031.4　JavaScript发展历史　　// 0031.5　HTML常用开发工具　　// 0041.6　HTML的基本定义　　// 0051.7　HTML文档的基本结构说明　　// 005工作任务1　Web项目初始化　　// 006单元总结　　// 009习题　　// 009AIGC典型应用　　// 010单元2　HTML5常用标签　　// 011　单元概述　　// 011学习目标　　// 0112.1　文本标签　　// 0122.2　分隔线标签　　// 0152.3　图片标签　　// 0152.4　列表标签　　// 0162.5　超链接标签　　// 0182.6　多媒体标签Web页面音视频播放　　// 0212.7　标签类型　　// 0242.8　lt;metagt;标签　　// 0272.9　媒体查询　　// 028工作任务2　设计一个富含多媒体元素的新闻页面　　// 030工作任务3　设计一个网站导航栏　　// 031单元总结　　// 034习题　　// 034拓展实训　　// 035单元3　CSS3基础知识　　// 037　单元概述　　// 037学习目标　　// 0373.1　CSS3基本概念　　// 0383.2　CSS3基本选择器　　// 0403.3　字体样式属性　　// 0503.4　文本属性　　// 0533.5　背景属性　　// 054工作任务4　CSS样式文件设计与导入　　// 055单元总结　　// 056习题　　// 056拓展实训　　// 057单元4　首页设计CSS3高级应用　　// 059　单元概述　　// 059学习目标　　// 0594.1　CSS3盒模型　　// 0604.2　CSS3常见网页布局　　// 0664.3　CSS3弹性布局　　// 0724.4　CSS3定位　　// 0784.5　CSS3变形与动画　　// 083工作任务5　设计网站首页　　// 088工作任务6　完善首页内容　　// 092单元总结　　// 105习题　　// 106拓展实训　　// 108AIGC典型应用　　// 108单元5　用户中心表格和表单　　// 109　单元概述　　// 109学习目标　　// 1095.1　表格　　// 1105.2　表单　　// 1125.3　HTML5 input控件新增功能类型　　// 1155.4　HTML5表单控件新增属性　　// 117工作任务7　用户登录页面　　// 120工作任务8　用户注册页面　　// 124单元总结　　// 125习题　　// 125拓展实训　　// 126AIGC典型应用　　// 126单元6　网站交互JavaScript语法基础　　// 127　单元概述　　// 127学习目标　　// 1276.1　JavaScript程序概述　　// 1286.2　变量与运算符　　// 1326.3　JavaScript数组　　// 1426.4　JavaScript对象　　// 1476.5　程序结构　　// 1486.6　函数　　// 1556.7　元素与节点操作　　// 1596.8　事件处理程序　　// 1666.9　常用事件处理程序　　// 1736.10　定时器与动画　　// 179工作任务9　用户登录信息验证　　// 182单元总结　　// 185习题　　// 185拓展实训　　// 187AIGC典型应用　　// 187单元7　jQuery框架　　// 189　单元概述　　// 189学习目标　　// 1897.1　jQuery介绍　　// 1907.2　jQuery选择器　　// 1937.3　正则表达式定义　　// 2027.4　操作正则表达式的方法　　// 2057.5　jQuery AJAX　　// 2077.6　jQuery常见效果　　// 210工作任务10　用户注册信息验证　　// 214工作任务11　首页导航栏下拉菜单　　// 216工作任务12　首页轮播图效果　　// 216工作任务13　首页成果展示左右滚动　　// 217单元总结　　// 219习题　　// 219拓展实训　　// 220AIGC典型应用　　// 221单元8　Vue框架　　// 223　单元概述　　// 223学习目标　　// 2238.1　Vue.js概述　　// 2248.2　Vue指令　　// 2318.3　计算属性　　// 2408.4　监听属性　　// 2448.5　v_model表单数据双向绑定　　// 245工作任务14　基于Vue的购物车　　// 246工作任务15　基于Vue的用户登录验证　　// 249单元总结　　// 252习题　　// 252拓展实训　　// 253参考文献　　// 254