前言Preface

前端其实是一个很大的范畴，通常只针对Web开发的前端而言，也就是针对浏览器的开发。浏览器呈现出来的页面就是前端。Web前端的本质就是前端代码在浏览器端被编译、运行和渲染。前端代码主要由3个部分构成：HTML（标记语言）、CSS（样式语言）和JavaScript（脚本语言）。前端发展经历了一个比较漫长的过程，大致可以分为以下几个阶段。

1．“上古”时代

世界上第一款浏览器NCSA Mosaic是网景公司（Netscape）在1994年开发出来的，这个时代的每一个交互，如按钮单击、表单提交等，都需要等待浏览器响应很长时间，然后重新下载一个新页面呈现出来。同年，PHP语言被开发出来，开启了数据嵌入模板的MVC模式。这个时期，浏览器的开发者以后台开发人员居多，大部分前后端开发是一体的，大致开发流程是：后端收到浏览器的请求→发送静态页面→发送到浏览器。

2．“铁器”时代（小前端时代）

1995年，网景公司的布兰登·艾奇为浏览器开发出一个类似Java的脚本语言，用来提升浏览器的展示效果，增强动态交互能力。这样就渐渐形成了前端的雏形：HTML负责结构，CSS负责样式，JavaScript负责交互。

1998年，Ajax应用技术开始出现，前端开发从Web 1.0迈向了Web 2.0，前端从纯内容的静态展示，发展到了动态网页、富交互、前端数据处理的新时期。

由于动态交互、数据交互的需求增多，还衍生出了jQuery（2006）这样优秀的跨浏览器的JavaScript工具库，主要用于DOM操作、数据交互。直到现在，很多Web项目，甚至近几年开发的大型项目依然还在使用jQuery。

3．信息时代（大前端时代）

自2003年以后，前端发展经历了一段比较平稳的时期，工业化推动了信息化的快速到来，浏览器呈现的数据量越来越大，网页动态交互的需求越来越多，JavaScript通过操作DOM的弊端和瓶颈越来越明显，仅仅从代码层面去提升页面性能变得越来越难。于是又先后诞生了很多优秀的技术，例如：

2008年，谷歌V8引擎发布，终结微软IE时代。

2009年，Angular.js诞生、Node诞生。

2011年，React.js诞生。

2014年，Vue.js诞生。

其中，V8和Node的出现，使前端开发人员可以用熟悉的语法糖编写后台系统，为前端提供了使用同一语言实现全栈开发的机会，JavaScript也不再是一个弱小的交互式脚本语言。React、Angular、Vue等MVVM前端框架的出现，使前端实现了项目真正的应用化（SPA单页面应用），不再依赖后台开发人员处理页面路由Controller，实现页面跳转的自我管理，同时也推动了前后端的彻底分离（前端项目独立部署）。

4．全能前端时代

2009年起，大屏智能手机开始陆续出现，4G/5G移动网络迅速发展，使得前端从单一的基于PC浏览器展示的Web应用向手机、平板电脑覆盖，此时HTML、CSS和JavaScript也陆续推出了新标准。前端对于跨端浏览的需求越来越大，不再仅仅是针对PC开发，手机配置和App开发也成为常态。后来，微信、支付宝等互联网平台推出小程序，试图整合Web、Native开发。JavaScript在各个终端的运行能力与Native开发（iOS、Android）的差距越来越小，使得用JavaScript开发桌面应用成为可能。随着TypeScript的出现，以及后续ECMA标准的进一步完善，前端将更加全能化，也可能会出现更多的细分工作领域。

本书内容

本书特色

30万+读者体验，畅销丛书新增精品；10年开发教学经验，一线讲师半生心血。

　高效极简

本书面向零基础读者提供Web前端开发一站式学习方案，内容涵盖面广，涉及HTML5、CSS3、JavaScript、jQuery、Ajax、Boostrap、Vue、PHP等Web前端核心技术，但在具体知识配置上追求极简、高效，力求让初学者用最短的时间掌握Web前端开发的技术精髓。

　入门容易

本书遵循学习规律，入门和实战相结合。采用“基础知识+中小案例”的编写模式，内容由浅入深、循序渐进，从入门中学习实战应用，从实战应用中激发学习兴趣。

　案例超多

通过例子学习是最好的学习方式，本书通过一个知识点、一个例子、一个结果、一段评析的模式，系统地讲解了如何使用HTML5、CSS3、JavaScript、jQuery、Bootstrap、Vue、PHP等核心技术快速构建Web前端。实例、案例丰富详尽，跟着大量案例去学习，边学边做，从做中学，学习可以更深入、更高效。

　体验超好

配套同步视频讲解，微信扫一扫，随时随地看视频；配套在线支持，知识拓展，专项练习，更多案例，在线预览网页设计效果，阅读或下载源代码，同样微信扫一扫即可学习。

　栏目贴心

本书根据需要在各章使用了很多“注意”“提示”等小栏目，让读者可以在学习过程中更轻松地理解相关知识点及概念，并轻松地掌握个别技术的应用技巧。

　资源丰富

本书配套Web前端学习人员（尤其是零基础学员）最需要的10大资源库，包括同步讲解视频库、示例源码库、开发参考工具库、案例库、网页素材库、网页配色库、JavaScript分类网页特效库、网页模板库、网页欣赏库、面试题库。这些资源，不仅学习中需要，工作中更有用。

　在线支持

顺应移动互联网时代知识获取途径变化的潮流，本书每一章均配有在线支持，提供与本章知识相关的知识拓展、专项练习、更多案例等优质在线学习资源，并且新知识、新题目、新案例不断更新中。这样一来，在有限的纸质图书中承载了更丰富的学习内容，让读者真实体验到以一倍的价格购买两倍的学习内容，更便捷，更超值。

本书资源

读前须知

本书从初学者的角度出发，通过大量的案例使学习不再枯燥、拘泥、教条，因此要求读者边学习边实践操作，避免学习的知识流于表面、限于理论。

作为入门书籍，本书知识点比较庞杂，所以不可能面面俱到。技术学习的关键是方法，本书在很多实例中体现了方法的重要性，读者只要掌握了各种技术的运用方法，在学习更深入的知识时便可大大提高自学的效率。

本书提供了大量的示例，需要用到Edge、IE、Firefox、Chrome等主流浏览器进行预览。因此，为了方便示例测试，以及做浏览器兼容设计，读者需要安装上述类型的最新版本浏览器，各种浏览器在部分细节的表现上可能会稍有差异。

HTML5中部分API可能需要服务器端测试环境，本书部分章节所用的服务器端测试环境为：Windows操作系统+Apache服务器+PHP开发语言。如果读者的本地系统没有搭建PHP虚拟服务器，建议先搭建该虚拟环境。

限于篇幅，本书示例没有提供完整的HTML代码，测试示例时读者应该先将HTML代码结构补充完整，然后进行测试，或者直接参考本书提供的示例源码库，根据章节编号找到对应示例源文件，边参考边练习，边学习边思考，努力做到举一反三。

为了给读者提供更多的学习资源，本书在配套资源库中提供了很多参考链接，许多本书无法详细介绍的问题都可以通过这些链接找到答案。由于这些链接地址会因时间而有所变动或调整，所以在此说明，这些链接地址仅供参考，本书无法保证所有的这些地址是长期有效的。

本书适用对象

　Web前端开发的初学者。

　Web前端开发初级工程师。

　Web前端设计师和UI设计师。

　Web前端项目管理人员。

　开设Web前端开发等相关专业的院校的师生。

　开设Web前端开发课程的培训机构的讲师及学员。

　Web前端开发爱好者。

关于作者

本书由前端科技团队负责编写，并提供在线支持和技术服务，由于作者水平有限，书中疏漏和不足之处在所难免，欢迎读者朋友不吝赐教。广大读者如有好的建议、意见，或在学习本书时遇到疑难问题，可以联系我们，我们会尽快为您解答，联系方式为css148@163.com。

编　者

2022年8月

清大文森学堂

文森时代（清大文森学堂）是一家20年专注为清华大学出版社提供知识内容生产服务的高新科技企业，依托清华大学科教力量和出版社作者团队，联合行业龙头企业，开发网校课程、学术讲座视频和实训教学方案，为院校科研教学及学生就业提供优质服务。