前言

党的二十大报告指出：教育、科技、人才是全面建设社会主义现代化国家的基础性、战略性支撑。必须坚持科技是第一生产力、人才是第一资源、创新是第一动力，深入实施科教兴国战略、人才强国战略、创新驱动发展战略，开辟发展新领域新赛道，不断塑造发展新动能新优势。高等教育与经济社会发展紧密相连，对促进就业创业、助力经济社会发展、增进人民福祉具有重要意义。

前端技术日新月异，在过去几年中经历了快速迭代与革新，从开发框架到工程化工具，从性能优化到设计理念，都发生了显著变化，为开发者提供了更加高效、便捷的开发手段，同时也为教材的更新和与时俱进提出了进一步的要求。从本书第1版教材的出版到本版教材完稿的5年中，我们见证了浏览器的更新迭代，如IE浏览器从逐步淘汰到正式退出，并将接力棒交给Edge浏览器； 见证了以HTML5、CSS3、JavaScript为三大基石的H5技术的持续发展和强大能力； 还见证了这些年来Web前端开发工具的发展从基础语言到框架再到集成开发环境的演变。早期，HTML、CSS和JavaScript是前端开发的基础，随着Web应用的复杂化，出现了如jQuery这样的库来简化开发。随后，React、Vue、Angular等现代前端框架兴起，提供了丰富的组件库和高效的开发模式，极大地提高了开发效率。这些工具的发展不仅简化了开发流程，还促进了前端技术的标准化和规范化。

2019年工信部教育与考试中心推出的Web前端开发职业技能初级标准不仅包括前端三大基石——HTML、CSS3、JavaScript的应用，还增加了对jQuery这一轻量级前端框架在交互应用方面的考查。在此背景下，本版教材在第1版的基础上进行了一个重大调整，即将jQuery从课业拓展中的一节调整为理论篇的单独一章。此外，结合第1版教材在全国各高校使用的反馈，本版教材的另一个重大改变是新增了一章内容——Vue框架，并提供了对第4章介绍的华为商城PC端布局的局部改造示范，以期为读者提升开发效率和应用质量提供技术支持。

近年来，在复杂多变的国际形势和国家对高等教育的战略部署及对人才培养质量高度重视的背景下，提升学生的综合素质和创新能力，以及培养社会责任感和开阔国际视野等方面的重要性日益突出。本版教材融入了作者近年来在课程教学方面的探索成果： 一是在相关章节有机融入Web前端开发职业素养内容，如职业道德、合作意识、质量意识、服务意识和学习意识； 二是结合教学实践新增防诈骗主题和传统文化主题的综合案例制作，并贯穿到PC端布局、移动端布局和JS交互开发等多个章节中。

主要内容

本书主要围绕Web标准的三大关键技术（HTML5、CSS3和JavaScript）介绍网页设计与Web前端开发的必备知识及相关应用。其中，HTML5负责网页结构； CSS3负责网页样式及表现； JavaScript负责网页行为和功能。

网页设计与Web前端开发案例教程——HTML5、CSS3、JavaScript（第2版·微课视频版）

前言

全书共10章，分为理论篇和应用篇两大部分。其中，第1~8章为理论篇，从技术的角度重点介绍Web前端开发的基础概念及相关技术，第9、10章为应用篇，从实用的角度补充介绍了综合实践指导及课业拓展知识。

在第一部分——理论篇的编写上，编者全面、系统地介绍了当前最新的Web前端知识体系，以一个综合案例网站的实际开发为主线，采用知识点结合典型实例、重难点结合案例实践、阶段性复习结合综合案例实战的多层次、全方位的配套实践案例体系，使读者既能真正从网站建设的全局把握Web标准各个部分的语法、联系和应用，又能结合不同阶段、不同层次的案例实践学以致用，扎实掌握相关的理论和实践应用技能。

第1、2章为基础知识和HTML入门，为后续知识的学习打下初步的基础。其中，第1章介绍网页设计与Web前端基础中相关的概念、网站开发的工作流程和开发工具，在网站开发的工作流程部分列举了网站架构与内容、素材收集实用技能、案例网站的首页设计草图和实体模型等实用的案例和技能，使得读者对网站开发的流程有一个初步而又清晰和具体的印象； 第2章介绍HTML的语言基础、常用标签和相关的典型实例。

第3、4章主要涉及PC端的主流前端布局技术。其中，第3章详细介绍CSS3样式表的基本概念、使用方法和常用的CSS3属性，以及相关的实例； 第4章重点介绍HTML+CSS的相关布局技术及各种应用，这一部分是全书的重点和Web前端技术的基础。

第5章重点介绍HTML5+CSS3的移动网站布局技术，这一章体现了较多的HTML5和CSS3的新技术和新应用，同时也有一些难点。

第6章详细介绍JavaScript（包括ES5和ES6）的两种主流语法和基于对象的编程技术，重点介绍JavaScript在操作HTML页面、响应用户操作及验证数据等方面的应用。另外，结合移动端应用开发的需求，本版教材新增了移动端触屏事件的介绍。

第7、8章介绍jQuery和Vue这两个目前普遍应用的JavaScript库和框架技术。其中，第7 章介绍jQuery这一简洁、快速的JavaScript库，主要包括选择器和事件、内容处理、样式处理及一系列实用的进阶应用，并提供了拓展资源； 第8章介绍前端三大主流框架中最年轻和热门的Vue框架，主要包括环境搭建、基础语法、组件和生命周期等相关知识和应用。

第3~8章的共同的特点是，除了通过列举大量的典型实例来介绍基本的概念和语法以外，还结合了案例网站的首页及相关页面的实例，配以大量的案例实践加以巩固。

从第4章开始各章都有1~2个综合案例实战，其中，第4、5两章在第1版的基础上分别增加了一个PC端和一个移动端布局的案例，第6章在这两个案例布局的基础上分别完成相应的前端交互功能，第7章对第一个案例进行了jQuery语法改写和简化，第8章则对第4章原来的华为商城首页布局综合案例进行了局部改造，以实现代码精简和方便后期修改页面数据。

在理论部分，各章把Web标准三大部分的分工及合作一步一步地展现在读者面前，使读者在学习了这一部分内容以后，能够对Web标准及其内涵有更具体和深入的了解，并能在实际的网站开发中加以运用。本版教材中各章的综合案例更是体现了案例的丰富性和递进关系。

在第二部分——应用篇的编写上，主要是考虑从综合实践的角度为读者提供实用性的指导。其中，第9章结合两个商业网站案例项目书的目录结构及课程网站的开发过程，全面介绍网站设计综合实训的完整流程，并提供相关课程设计的要求及指导； 第10章则从读者后续的自我提升角度出发，指出一些课业拓展的方向和参考，并为使用本教材进行授课的教师提供一些建立学生实践环境的建议。另外，将第1版教材中的第7章（Canvas图形绘制）调整到10.2节，同时更新了10.4节中域名服务的内容。

以上的编写方法不仅符合理论和实践相结合的学习规律，而且为读者后续学习动态数据库网站的制作打下了坚实的基础。

本书特点

（1） 前沿性、系统性和实用性相结合： 本书结合当前新兴的企业前端工程师的必备知识体系和技能要求，系统、全面覆盖时下网页设计与Web前端开发的知识体系和实践技巧，在原有的基础知识体系的基础上引入了HTML5、CSS3，以及JavaScript中ES6的新特性和应用案例，囊括了传统HTML+CSS布局、新兴的HTML5+CSS3移动端布局、JavaScript基于对象的编程和交互应用，以及jQuery和Vue这两个目前普遍应用的JavaScript库和框架技术。

（2） 以项目带动全局： 本书除了保留第1版教材中的环保小站以项目带动全局的综合性案例教学特点，即在从第1章的设计草图和实体模型到Web标准三大技术学习的过程中贯穿始终的特点，以及课后的实践练习所采用的相似思路，还补充了两个综合案例，分别对应PC端和移动端布局，并在JS部分分别完成交互功能，在jQuery部分进行举例简化，另外在Vue部分也采用了第4章综合案例中的案例改造，既丰富了综合案例的类型，又体现了本书相关知识体系在实践应用中的连贯性和递进效果。

（3） 基础实例与综合案例相结合，典型案例实践与综合案例实战相结合： 本书在保留已有教材中基础实例与项目案例相结合的基础上，进一步对主要章节的重点和难点配备了典型的案例实践，以帮助读者加强理解和运用，此外在第4~7章的最后一节通过规模性和复杂度更强的综合案例实战提供阶段性的综合实训案例和方法，使读者能够循序渐进地在不同的层面扎实掌握相关理论和综合实践技能。

（4） 实用知识和配套资源与时俱进： 本版教材在第1版教材的基础上，结合当前的技术发展进行合理增删，即删除部分过时的知识点，增加新的知识和框架，如在第二部分应用篇的综合实训中全面介绍了当前主流的网页布局方案； 综合实训中的案例首页布局也由早期的表格式布局升级为综合运用理论篇所介绍的HTML5结构标签、弹性布局、怪异盒模型等最新的实用布局技术； 课业拓展部分删除了部分过时的内容，并引入了大量实用、前沿的拓展知识和技能。本书除了配备相应的教学课件以外，还录制了主要综合案例的教学视频，以便读者学习使用和任课教师教学使用。

教学资源

为了使读者和任课教师更好地使用本书，编者特意准备了一些配套资源，具体如下： 

（1） 教学大纲。

（2） 教学课件（PPT）。

（3） 电子教案。

（4） 习题解答。

（5） 各章实例（含基础实例、案例网站、案例实践和实战）程序源代码。

（6） 主要综合案例的配套教学视频，共计1000分钟。

资源下载提示

课件等资源： 扫描封底的“图书资源”二维码，在公众号“书圈”下载。

素材（源码）等资源： 扫描目录上方的二维码下载。

在线自测题： 扫描封底的作业系统二维码，再扫描自测题二维码，可以在线做题及查看答案。

微课视频： 扫描封底的文泉云盘防盗码，再扫描书中相应章节的视频讲解二维码，可以在线学习。

本书编者

本书的几位编者都是工作在教学和科研第一线的骨干教师，具有丰富的教学实践经验。全书由莫小梅负责规划和统稿。

本书的第1章由莫小梅和毛卫英共同编写，第2章、第3章、第4章的4.8节~4.9节、第5章、第6章，以及第9章的大部分（除9.7节）由莫小梅编写，第4章的大部分（除4.8节~4.9节）由毛卫英编写，第7章、第9章9.7节和第10章（除10.2节）由张浩斌编写，第8章和第10章10.2节由隋慧芸编写。

配套案例教学视频的录制工作中，毛卫英负责第4章案例的视频录制，王华琼负责第3、5、6章案例的视频录制。

衷心感谢参与第1版教材编写的浙江财经大学东方学院的应可珍老师，其虽然未参与本次教材的改版编写，但其相关思路仍对本版教材的编写有重大参考价值。另外，特别感谢浙江传媒学院的陈思宁、李灿、睢瑶、羊可、张珂、牛丽娜6位优秀学生，本版教材中“谁的来电——防范电信诈骗”和“宋韵卿裳”两个案例的布局和交互功能原型均来自这几位学生的短学期作品。其中，陈思宁同学提供了“宋韵卿裳”案例的布局和交互功能初始代码，并参与了主要开发过程的初稿编写，对此特别感谢。

由于编者水平有限，书中难免出现不足之处，敬请广大读者批评指正。

编者2025年5月