本教材精心编排为四个主要部分，每部分针对特定技术进行深入探讨，确保读者能够系统地掌握前端开发的核心技能：
基础 HTML（第1-3章及第7章）： 开始于网页设计的基础，本部分详细介绍 HTML 的基本概念和特性。从简单的标签使用到高级标签的应用，逐步引导读者全面了解 HTML，为复杂的网页布局和功能打下坚实基础。
CSS 美化与布局（第4-6章及第8章）： 基于 HTML 的结构，本部分重点介绍如何通过 CSS 增强网页的视觉效果和布局。内容包括基本选择器和复合选择器的使用，以及字体、文本、背景的样式设置。此外，深入讲解 CSS 的盒子模型、浮动和定位技术，为创建响应式和动态布局提供技术支持。
JavaScript 动态交互（第9-13章）： 作为前端开发中的核心，JavaScript 部分涵盖了从基础语法到高级功能的全方位知识。详细探讨 DOM 和 BOM 的操作，使开发者能够实现复杂的网页交互和动画效果，大大提升用户体验。
jQuery 快速开发（第14章）： 尽管只包含一章，但此部分集中讲解 jQuery 的高效应用。在快速开发中，jQuery 仍然是一个不可或缺的工具，通过它，开发者可以简化代码编写过程，并有效地实现功能复杂的动态网页。
通过本教材，读者将获得从网页结构到动态交互的全面技能，为成为前端开发专家奠定坚实的基础。
本书适合作为高等学校相关专业的教材，也可供前端开发初学者参考。

随着互联网的高速发展和移动设备的快速普及，移动端呈现指数式增长，“触网”几乎成为全民时代的一个共性。而在网络世界中，网页（PC端和移动端）的所见即所得影响着用户的浏览选择，甚至决定了网站在用户中的喜爱度，可见网页的重要性。与网页关系最密切的是前端开发，前端开发人员以及前端教材就显得尤为重要，其中前端开发教材起着桥梁作用，是准前端开发人员学习的重要渠道。

目前有关前端开发的学习资料，包括纸质书籍和电子资料随处可见，其中大部分一味追求强大开发的特点，让读者很难扎实地掌握所学内容。编写一本能让读者真正学到东西，并且可运用到日后实际开发工作中的前端教材非常必要。

本书是编写团队结合多年教学反馈、网络最新前端知识和实际开发需求等方面的内容编写而成。全书从零开始讲解前端开发，在列举知识点时，几乎都有相对应的案例做进一步阐述，让读者尽可能掌握每个知识点，打好学习基础。

作为入门级的前端开发教材，本书涵盖HTML、CSS、JavaScript和jQuery等知识点，共分为14章，按四部分来编写。第一部分由第1~3章和第7章组成，从最基本的网站网页，到HTML简介特点，再到常用标签和高级标签，从而达到对HTML的基本认识；第二部分由第4~6章和第8章组成，是在HTML基础上介绍CSS，从通过CSS美化HTML标签开始学习，列举基本和复合选择器，以及网页中的字体、文本和背景等基础设置，最后讲解CSS三大核心盒子模型、浮动和定位；第三部分由第9~13章组成，是前端开发中最关键的一部分，在前面HTML和CSS的基础上，JavaScript可实现网页的功能，本书从基础简介和使用开始讲解，到命名规则、变量使用、数据类型、条件语句和函数对象，再到后面高阶的DOM和BOM，利用这两个对象模型能帮助开发人员实现更多、更复杂的功能，特别是网页动画特效；第四部分是第14章jQuery，尽管篇幅和章节都很少，却是实际开发过程中用得最多，也是一定要学会的，jQuery是JavaScript库，能把大部分用户想实现的功能封装起来，以便直接调用。

本书由浙江理工大学科技与艺术学院鲍小忠任主编，主要负责组织编制教材编写大纲、统稿和定稿。陈晖、单圣琦任副主编，三人共同完成全书各章节的编写工作。本书的编写工作在浙江理工大学科技与艺术学院计算机科学与技术学科（一流学科B）建设经费资助下得以顺利完成，在此，深表谢意!

本书主要面向前端初学者，尤其是刚开始接触前端的入门者，也适合为前端夯实基础的学者。如在学习过程中有任何关于前端的问题，或者想和我们交流有关前端的知识点，都可以通过邮箱b_xzh@163.com联系我们。

由于编者水平和能力有限，在编写过程中难免存在疏漏和不足之处恳请读者批评指正。

 

 

 

                                                                                                  编？者 

2021年5月

第1章  HTML基础........................................................................................................ 1

1.1  网站和网页... 1

1.2  HTML简介... 2

1.3  HTML注释... 4

第2章  HTML标签........................................................................................................ 5

2.1  常用开发工具... 5

2.2  HTML常用标签... 6

2.3  HTML特殊字符... 14

第3章  HTML高级标签............................................................................................... 15

3.1  HTML列表... 15

3.2  HTML表格... 18

3.3  HTML表单... 25

第4章  CSS基础.......................................................................................................... 30

4.1  CSS简介... 30

4.2  CSS基础选择器... 32

4.3  CSS复合选择器... 37

4.4  CSS显示模式... 41

4.5  元素显示与隐藏... 42

第5章  CSS字体、文本和背景.................................................................................... 45

5.1  CSS字体属性... 45

5.2  CSS文本属性... 48

5.3  CSS背景属性... 53

5.4  CSS三大特性... 55

第6章  CSS盒子模型、浮动和定位............................................................................ 58

6.1  盒子模型... 58

6.2  CSS浮动... 62

6.3  CSS定位... 70

第7章  HTML5新特性................................................................................................ 79

7.1  HTML发展历程... 79

7.2  HTML 5新增标签... 79

7.3  新增表单类型和属性... 83

第8章  CSS 3新特性................................................................................................... 86

8.1  CSS发展历程... 86

8.2  新增选择器... 86

8.3  新增特性... 91

第9章  JavaScript基础............................................................................................... 94

9.1  JavaScript简介... 94

9.2  JavaScript使用... 95

9.3  变量... 97

9.4  运算符... 99

9.5  数据类型... 105

第10章  JavaScript语句和数组............................................................................... 112

10.1  条件语句... 112

10.2  循环语句... 117

10.3  数组... 121

第11章  JavaScript函数和对象............................................................................... 126

11.1  函数... 126

11.2  对象... 130

第12章  DOM.......................................................................................................... 140

12.1  DOM基础... 140

12.2  DOM事件... 149

12.3  事件对象... 152

第13章  BOM.......................................................................................................... 158

13.1  BOM基础... 158

13.2  网页特效... 166

第14章  jQuery........................................................................................................ 174

14.1  jQuery简介... 174

14.2  jQuery选择器... 177

14.3  jQuery动画... 184

14.4  jQuery属性和方法... 189

14.5  jQuery事件... 191

？

鲍小忠 男，高级实验师，浙江理工大学科技与艺术学院信息技术中心主任，研究方向Web开发技术。
从事一线教学工作15年余，主要承担《Web前端开发实践》《网页设计入门》等课程教学任务。
主持浙江省普通本科高校“十四五”第二批“四新”重点教材建设项目《Java程序设计》。主持教育部产学合作育人项目《基于SPOC的翻转课堂教学模式研究——以大前端开发技术为例》等4项。主持浙江省高教学会2024年“人工智能赋能教育教学应用研究”专项重点课题《基于知识图谱技术的新型教材建设与应用研究》。
主编出版《Web前端开发基础：HTML+CSS+JavaScript》，《Java程序设计》。副主编出版《Python程序设计》获浙江省计算机学会、浙江省计算机行业协会“2023年度优秀专著与教材奖”，《Python编程基础(第2版)(微课版)》获评“十四五”职业教育国家规划教材。
主持制作课件获全国多媒体课件大赛一、三等奖各1项。指导学生获中国大学生计算机设计大赛二、三等奖各1项。

本教材的特色与创新点集中体现在以下五大方面，旨在提供一个全面、多元、实践、实用且紧贴需求的学习体验，具体如下：
1.从零开始，系统全面
教材从零基础出发，全面系统地涵盖HTML、CSS、JavaScript和jQuery等前端开发核心内容。共分为四个部分、14章，每个章节都配备了详尽的实例分析，确保内容由浅入深，助力初学者扎实掌握每项基础知识。这种严谨的知识结构不仅帮助读者建立坚实的前端开发基础，还能有效地应用于复杂的实际开发任务。
2.与时俱进，资源丰富
教材紧跟前端技术最新发展，整合最前沿的技术与实践。通过出版社的配套资源网站，提供14章教学课件、16份知识（能力）图谱、166个代码实例、178幅图示、14套习题及答案、15个教学案例和14份教学设计等丰富资源。这些材料涵盖各个学习阶段，满足不同需求，帮助读者构建全面的知识体系，熟悉最新技术，有效应对技术环境的快速变化。
3.实例驱动，实践导向
教材采用实例驱动的教学策略，通过具体的编程实例直观地展示每个知识点，使理论与实践紧密结合。这种方法不仅让学习过程更加生动有趣，还显著提高了学习的效果与效率，使学生能够迅速将所学知识应用于实际项目。
4.强调基础，注重实用
教材特别强调基础知识的扎实掌握和实际应用技能的培养。深入基础知识的同时，引导学生学会在实际开发中灵活应用这些技能，确保教学内容的实用性和应用性。这种双重强调的教学理念既为初学者打下坚实的基础，也为有经验的开发者提供了提升专业技能的机会。
5.反馈导向，紧贴需求
结合超过十年的Web前端开发教学经验，教材内容通过持续的教学实践和反馈不断优化，确保教材既符合教学目标，又切合实际应用场景。以反馈为导向的优化策略，使教材更贴近实际开发需求，有效解决学习者在开发过程中遇到的具体问题。同时，灵活的教材设计支持多种教学模式，适应混合式、自适应及项目驱动等多样的教学环境。
这些创新点使得本教材不仅是一个教学工具，而是一个全方位的学习平台，适应当代前端开发教育的需求。