（1）完善诠释Web应用设计思想和搭建流程；
（2）凝练梳理Web 开发岗位自我提升实践路径。

为帮助读者深入理解Web 开发工程师需要掌握的编程技能，本书凝结作者多年的教学心得与实战经验，旨在从前端、后端和全栈的概念出发，揭示Web 应用的工作原理和设计思想，精心挑选最基本且最重要的编程知识，结合实际案例，详细阐述Web 开发技术和编程设计思想是如何应用于解决实际问题的。本书坚持“带着任务学习”的理念，帮助初学者打牢Web 开发的基础，以理解编程技术是如何落实到具体Web 应用中的。希望读者能从本书获得对Web 开发的基本认识，具备建设全栈网站的能力，并愿意在Web 应用的开发领域继续深耕。

董雪燕，北京联合大学讲师，澳大利亚昆士兰科技大学计算机科学博士，董雪燕，北京联合大学讲师，昆士兰科技大学计算机科学博士，研究领域语音识别，以第一作者身份发表数十篇SCI,EI英文文章，国内核心期刊文章2篇。技术背景：具有10年Web开发经验，包括PC端网站建设和移动端混合App开发经验，获得高级软件测试工程师证书。教学上主要讲授《计算机导论》，《网站建设与开发》，《网站优化与推广》，《移动终端开发技术》，《软件工程》以及各种实践类课程。在实际的教学中，擅长将复杂的理论知识以通俗易懂的方式讲述，表达思路清晰，逻辑严谨。通过与企业长期合作打造出实战案例融入课堂，使学生受益匪浅。

第1章 Web到底是怎么一回事儿
1.1 Web的前世、今生和未来 1
1.2 每一次浏览网页都发生了什么 3
1.3 Web应用开发模式的演变 10
1.4 什么是前端、后端和全栈 11
1.5 本章小结 13
第2章 开发之旅前的准备工作
2.1 代码编辑工具 14
2.2 测试环境——Chrome浏览器 16
2.3 本地服务器的搭建 17
2.4 第一个Web应用——hello，world. 19
2.5 本章小结 20
第3章 构建网页内容——HTML基础
3.1 HTML一门关于标记的语言 21
3.2 超链接标记小案例：做一个个人博客主页 23
3.3 关于路径 26
3.4 列表标签小案例：制作国际新闻页面 28
3.5 表格标签小案例：制作一张财务季度报表 30
3.6 表单小案例：制作求职申请表 32
3.7 一对好兄弟——Get请求和Post请求 34
3.8 本章小结 37
第4章 网页一定要漂亮——CSS入门
4.1 为什么需要CSS. 38
4.2 容器的作用 41
4.3 为什么是层叠样式表 45
4.4 一切都是盒子——盒子模型 48
4.5 选择器让样式的应用更有目标感 54
4.6 元素的浮动 58
4.7 关于伪类 65
4.8 本章小结 67
第5章 网页交互的核心——JavaScript入门
5.1 前端三兄弟：HTML、CSS和JavaScript 69
5.2 JavaScript工作原理大揭秘 73
5.3 像程序员一样思考 77
5.4 JavaScript基础 83
5.5 常用的两个原装对象：String和Array. 102
5.6 本章小结 104
第6章 拜访三大对象：Window、Document和Event
6.1 三大对象概述 107
6.2 认识window 对象 109
6.3 理解document对象 117
6.4 说说Event对象 122
6.5 本章小结 127
第7章 如何让你的页面吸引人——更多CSS样式
7.1 原来字体可以很高级 128
7.2 高大上的按钮 132
7.3 弹性盒子让布局更简单 136
7.4 元素在页面中的定位 143
7.5 让元素动起来 151
7.6 让内容自适应不同尺寸的屏幕：响应式网页 159
7.7 本章小结 167
第8章 一个超级好用的JavaScript库——jQuery
8.1 真正的动态交互应用 169
8.2 DOM元素的选择 173
8.3 jQuery对页面事件的支持 179
8.4 让内容和样式的修改变得简单 188
8.5 客户端和服务器之间传输数据的利器：Ajax. 196
8.6 本章小结 206
第9章 交互式网页的应用案例
9.1 图片轮播 207
9.2 网页内容的动态变化 212
9.3 信息验证大揭秘：正则表达式 218
9.4 Cookie小饼干有大作用 223
9.5 从服务器获取数据给前端 229
9.6 本章小结 232
第10章 终于轮到服务器端了——PHP入门
10.1 动态网页的工作机制 234
10.2 PHP的基本用法 239
10.3 数组的用法 245
10.4 两个超级变量——$_GET和$_POST. 247
10.5 外部文件的引入——include和require 250
10.6 PHP与JavaScript的异同 256
10.7 本章小结 257
第11章 PHP与MySQL的初次合作
11.1 关于表单数据的验证 258
11.2 保存数据到数据库中——MySQL. 262
11.3 PHP为前端页面提供数据接口 271
11.4 服务器端存储少量数据的两种方式：cookie和session. 273
11.5 本章小结 282

第12章 MySQL数据库的神奇之处
12.1 为什么需要数据库 284
12.2 SQL基础 286
12.3 对数据表中的记录排序 292
12.4 关键词搜索 296
12.5 SQL中的统计函数 299
12.6 本章小结 304
第13章 PHP与MySQL的再度合作
13.1 用户上传的图片去哪里了 306
13.2 多条查询结果的分页显示 313
13.3 PHP和MySQL 联手打造个性化Web应用 320
13.4 多表查询 327
13.5 本章小结 331
第14章 综合项目实战：小说阅读网大挑战
14.1 动手前，先分析 333
14.2 静态布局 335
14.3 动态页面 368
14.4 还可以做更多 376
14.5 本章小结 380
致谢. 382

人工智能技术的快速发展，掀起了人们学习编程的浪潮，因为只有通过学习编程，人类才不会被机器取代，并且有可能成为赫拉利眼中的“神人”，成为统治机器的领导者。过去，编程好像只是一些聪明人的跑马场，普通人只能在场外转悠。然而，网络打破了入场的栅栏，借助网络，世界各地的人们频繁且高效地进行思想交流。于是，一个空前的创新时代出现了。近年来，只要几个月就会冒出一门新的编程语言，仿佛人人都能发明一门语言，我们是如此的幸运，赶上了这么好的时代。如果你也想成为一名发明家，那么，请从学习编程开始。

众所周知，学习编程的第一步要学习一门语言，那么该如何选择呢？是基础的C语言，还是高级的Java语言？如果你也有上面的疑惑，请参考一下每年的十大最流行编程语言排行榜。2020年排在第一位是JavaScript，可见它是最受欢迎的语言，原因是JavaScript不仅用途广泛、使用简单，并且具有良好的可移植性；它的应用常见于Web开发，比如网站和App，还可以用于开发游戏。最重要的是，当今是移动互联网的时代，Web开发技术已经成为刚需。如果你想学习Web开发，请从本书开始。

什么是Web全栈开发

Web全栈开发的概念是扎克伯格在2014年第一次提出的，但到目前为止，人们尚未对Web全栈开发给出一致的定义。普遍比较认可的一种观点是，一个Web应用产品（比如网站、App）从技术方面来看，可以分为前端和后端，而全栈就是涵盖了前后端两种技术栈的总称。具体来说，这些技术栈包括前端开发（HTML、CSS和JavaScript）、服务器部署、数据库（比如MySQL和MongoDB）、后端开发（PHP或Nodejs）、性能优化技术（比如缓存）等。如果要全面掌握这些技术至少需要五年，然而这不是本书的意图。本书只是希望从前/后端编程技术出发，带你初步领略一下Web全栈世界。本书的写作目的有以下三个：

第一，对初学者友好，通过揭示Web应用的工作原理和Web开发需要的编程技术，结合大量实例，帮助你轻松打开Web开发世界的大门；

第二，详细地描述搭建完整Web应用的全部流程，便于你快速了解前端工程师需要做什么，后端工程师更看重什么，以及前端工程师与后端工程师之间如何配合；

第三，清晰地展示Web开发岗位的职业晋升路线，先成为一名前端工程师，再转为后端工程师，逐步升级到全栈工程师，最终成为系统架构师。

编程语言只是工具

市面上大多数Web开发书籍都是以编程语言的语法介绍和使用为主线，包括罗列HTML的标记，展示CSS的样式属性和选择器的用法，讲解JavaScript的基本语法等。很多读者表示，这些语言学完后，还是不会做Web开发，也记不住这么多的语法。原因在于，这类“手册式”的书，只是为你提供了一个个独立的知识点，而具体应用时，则需要对这些知识点进行多种组合和不断实践。但是，关于如何去组合和实践，却没有告诉你。

本书想告诉你的是，编程语言只是工具，是帮助你建设一个Web应用的手段而已。所以，你应该有个具体的挑战目标，想要搭建一个什么样的网站或App，然后对应着各个页面的功能，去学习所需的技术就好，没有必要把每一门编程语言的所有语法都学一遍再动手；实话告诉你，很多CSS的样式属性你可能未来十年也用不到。实际上，学习Web开发技术，树立一个明确的目标才是最重要的，而编程语言只是实现目标的手段，千万不要本末倒置。有了目标之后，就要不断尝试与实践，这才是打开Web开发世界大门的正确方式。

主张带着任务主动学习

有效的学习一定是主动的，只有当你为了解决问题而去有意识地学习，才会真正有效果。如果你以前只是一味地跟着作者的思路走，那么大概率是，你以为看完了全书好像什么都会了，实际上，一周过后，你会发现，全书跟你一点关系都没有。因此，本书提倡以任务为主的学习，通过给出若干个任务（示例），让你思考并选择合适的技术去完成任务。要知道，所有技术只是为你建造Web大楼提供水泥和钢筋而已，其设计和实施才是核心，而这两项重要任务的决定权完全在你。

全书内容框架

全书从总体上来看，可以分为4个部分。

第一部分是准备工作。第1章，主要介绍Web的发展历史和规律，重点揭示Web的工作原理。第2章，安装必要的开发工具，为正式的开发做准备。

第二部分是详细阐述前端开发技术。第3～5章，围绕前端的基础技术展开，包括HTML、CSS和JavaScript这三大核心技术，能够实现交互式网页的基本搭建。第6～9章，深入地介绍对象的使用，并重点介绍框架的用法和对于快速开发的意义。

第三部分是关于后端开发技术的介绍。第10～13章，重点介绍服务器端的开发技术，包括PHP脚本的用法，MySQL数据库技术能做什么，以及PHP和MySQL之间的合作。

第四部分（第14章）是一个综合项目。目标是通过一个综合项目实战，展示如何将前端技术和后端技术相结合，实现一个强交互性的全栈。

本书适合哪些读者

本书可以作为想要成为具有竞争力的全栈工程师的入门书籍。其中，前端技术包括HTML、CSS、JavaScript，以及CSS的框架Bootstrap和JavaScript的jQuery；后端技术主要是PHP和MySQL。或许你已经听说过这些技术，但好奇为什么没有提到当下流行的框架，Vue.js和AngularJS，以及后端的代表Node.js，原因是它们并不适合初学者（连全栈是什么都不懂的小白），它们更适用已经练就了基本功并且已经具备实战经验的开发人员，它们是用来提高效率的，而不是领你入门的。如果你现在只是一个程序员小白，恭喜你，你选对了书。因为学完本书，我保证你将对Web全栈开发有一种“原来如此简单”的感觉，因为我不只是手把手教你做Web开发，而是将其中暗藏的玄机（技巧和原理）告诉你，让你不至于为了一个坑而陷进去很久出不来。但同时，我要郑重声明，本书不是手册式教程，所以不会列出Web开发需要的所有语法和用法，而是会挑选出重点且具有启发意义的内容，帮助你尽快上路，从而找到进入Web世界的钥匙。

本书配套资源

对于执着于源代码的读者，我自然不敢怠慢，只要你从正版途径购买了本书，书中所有的源代码会随书附赠；除此之外，为了帮助读者理清图书脉络，也为了便于将本书用作培训教学用书的老师方便讲课，我抽取了全书的框架内容制作了PPT课件。以上内容作为本书的配套资源赠送给读者，读者可以通过封底的二维码和下载链接提取使用。

为了保证读者获取配套资源的顺畅度，还有以下备用链接，以作不时之需。

链接：https://pan.baidu.com/s/1HlP4suKFAVjQ5cu-Xcu-8A

提取码：4m63

感谢与交流

受我自身能力所限，书中难免会有对技术解读的不当和偏颇之处，如果你在阅读本书的过程中发现了类似的错误与不恰当的表述，诚挚地欢迎你在github上写下你的意见和建议（https://github.com/cathydongxueyan/Web-full-stack-develop），我会对你表示极大的感激，并将尽最大努力将其完善。