一、什么是前端？什么是后端？
前端和后端，通俗的说法就是：在手机（电脑）上跑的代码是前端，在机房里跑的代码是后端。
用专业术语来说就是，现在的网站都是MVC（Model View Controller）架构，就是业务模型(model)－用户界面(view)－控制器(controller)。这三个层次共同组建了一个网站。
MVC（业务模型-用户界面-控制器）
业务模型（model）指的是数据和业务规则，就是在数据库中存储这些数据，并处理这些数据间的逻辑。
用户界面（view）指的是呈现在用户眼前的这些界面，标题在什么位置，用什么字体，右下角要放个什么图片之类的。
控制器（controller）指的是处理用户交互，从界面（view）读取数据，向业务模（model）发送数据。
前端工程师，一般负责VC的部分；后端工程师，则负责M的部分。但各个公司对前端和后端的工作划分并不完全一致，有些工作前后端都可以做。
二、前端
1.WEB前端的运行逻辑
假设我们要访问 Google，从我们在浏览器输入 Google.com 到最后这个页面出现在眼前，这其中涉及许多前端的技术反应和代码组合，总体而言可以简化为两步：
1）浏览器向 Google 的服务器发送了一个请求。
2）服务器收到了一个 HTTP 响应，这个响应中就包含了执行这个命令所需要的所有资源（注：可以通过 Chrome 浏览器的开发者工具来进一步观察 HTTP 协议的运行情况；下图为 Google 的 HTTP 协议运行情况）。
上图这个界面看起来很复杂，但对于非程序员而言，HTTP 协议运行情况只要关注其中的几个关键部分：
第一列，即资源的URL；第四列是这个资源的类型。在第一个请求和后续的请求之间有一根蓝线，即进度条。而 HTTP 协议中运行的项目越少，浏览器加载的速度越快。图中Google 就处理得很好，只有 10 个左右的请求。
2. 前端使用的主要语言
1）HTML 和带样式的 HTML ：全称Hyper Text Markup Language，搭建网页的基础语言。就是一组标签和文本的组合，是一个最基本的网页。它已经包含了网页常见的元素，实际上在 Web早期的很长一段时期内，网页都是这个样子。后来随着使用网络的人群越来越广泛，在HTML3.0中引入了对网页样式的定义，某种程度上可以说，也是从这个时候开始产生了网页设计师的角色。
2）CSS：想要网页更精美更酷炫，就需要用到CSS语言了。CSS能够对网页中对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。由于带样式的 HTML 拥有一个缺点，它需要为每个标题和文字都设定样式，工作量非常庞大。 CSS 就是在这样的情况下诞生了。CSS，又称叠层样式表，简言之是一种用来表现 HTML 文件样式的样式设计语言。CSS 目前的最新版本 CSS3 能够真正做到网页表现与内容分离。
3）Java Script（JS）：差 不多在 CSS诞生的同一时间，大家开始觉得这样静态的网页似乎略显无聊，能不能给网页加入一些可以动起来的元素？比如点击一个按钮之后变个颜色。当时网景公司的工程师Brendan Eich 就给他们自家的浏览器引入了这种实现动态效果的脚本语言，这就是 Javascript（简称JS）的诞生。所以通俗来说，Javascript 就是用来给 HTML 网页增加动态功能，实现更炫酷的交互。提 到 Javascript ，就得提一下 jQuery 。 jQuery 是一个优秀的Javascript 库。jQuery使用户能更方便地处理 HTML ，它能够使用户的 HTML 页面保持代码和 HTML 内容分离,通过 jQuery ，可以不用在 HTML里面插入一堆 JS 来调用命令，只需要定义 ID 即可。此外，由 Twitter 设计师 Mark Otto 和 Jacob Thornton合作开发的 Bootstrap 也是一个受欢迎的前端框架。
如果想要网页有更酷炫的交互，就要用到Javascript。它是通过嵌入到html中来实现自身功能，主要用于添加交互行为，可以在多平台下运行（如Windows、Linux、Mac、Android、iOS等）,还可以控制cookies。
4）jQuery：这是一个时下最流行的Javascript库，主要面向查询（Query）。简单理解，就是javascript里面那些需要用一行行代码实现的体力活，在jQuery里面可以直接打包成模块，调取对应的接口使用，解放了开发者更多的时间。这种模块化的使用方式让开发者可以很快就开发出酷炫的页面。
5）Bootstrap：Bootstrap也是对Javascript进行封装，它在jQuery的基础上进行更加人性化的完善，其实就是更方便了。它有很多现成的组件，比如导航栏、下拉菜单、按钮，都定义好了样式和交互，直接成套拿来用就行了。
这么看上去，前端语言的内在关系就比较好理解了，举个栗子：好比一个互联网产品就是一个妹纸，html是搭建了她的身体，这个是基础（要先有个妹纸）；CSS是给她穿上漂亮衣服；Javascript是教会她化妆，先隔离后粉底，先眼线后睫毛；jQuery是把化妆进行整合，主要负责实现“一个步骤无瑕底妆”；Bootstrap也是对化妆进行整合，主要负责实现“一个步骤清纯大眼妆”和“一个步骤性感唇妆”，渐渐地，html搭建出来的妹纸就变成女神了……
3.HTML简史及响应式设计
HTML 在刚诞生的前 10 年发展是非常迅速的，在 1999 年，我们现在常说的 HTML5 的上一个版本 HTML4.0.1 就已经发布了，那么为什么从 4.0 到 5.0 会拖了 15 年之久？
首 先，HTML4 的发布时间和门户时代（即 Web 1.0 时代）是基本吻合的，也就是说 HTML4实际上是为门户型网站设计的。在门户网站经历的 4，5 的年发展之后，大家开始觉得只是单一接受信息的互联网太过无聊枯燥了，差不多2004、2005 年开始，大家希望在网页中加入更多的互动元素，也就是我们常说的 Web 2.0。
但是这个时候大家就发现，为 Web 1.0 设计的 HTML4 无法胜任这个工作，但是有另外一个技术却非常适合，那就是 Flash。所以在Web 2.0 的早期，当时最炫酷的网站有很多是完全用 Flash 开发的，在以后的很长一段时间里，有很多网站都是 HTML 和 Flash的混合式网站。所以在 2005 – 2010 年这段时间，HTML5 中的新标准主要是为了取代 Flash。
刚刚搞定了 Flash，又进入了移动开发时代，所以 HTML5 又花了 5 年时间制定各种针对移动平台的标准。但是到目前为止，虽然HTML5 已定定稿，但是对移动平台的适应其实还在进行中，所以在未来很长一段时间内，就像当初的 Flash一样，我们会看到越来越多的混合式应用。
在 iPhone 出现之前，大家访问 Web 的主要方式还是通过桌面浏览器，所以设计网页时只要考虑桌面浏览器的显示效果就足够了。但是在iPhone 和 iPad出现之后，就需要考虑同一个网页在不同设备上的显示效果，第一个问题的答案就是响应式，响应式的核心就是让同一个网页可以在不同设备上呈现出不同的显示效果，主要是通过CSS来实现的。
除了响应式设计，HTML 在移动端遇到的另外两个问题就是如何利用移动设备的各种传感器，比如GPS，摄像头等等；以及性能问题。为了解决这些问题，HTML5中添加了地理位置，拍照，3D 动画加速等等API，可以部分的利用手机设备的一些新硬件，并且新的 API 还在不断的加入进来，这也是为什么现在的 HTML5应用可以越来越炫酷的原因。但是，HTML5 并不是专为移动设备设计的，它是由 HTML5，CSS3 以及大量的 Javascript API共同组成的一个标准合集，微信中的 HTML5 应用只是 HTML5 应用场景中的很小一部分。
4.如何评估前端工程师的能力？
前端从初阶到高阶分别为：
•只会基本的HTML/CSS, 可以将设计图转化为HTML/CSS, 俗称切图；
•懂一些Javascript，主要是使用现成的框架，jQuery，Bootstrap等等；
•知道jQuery，Bootstrap的局限，在需要时可以直接编写原生JS/CSS；
•对JS/CSS非常了解，热衷于利用浏览器的各种最新特性实现各种炫酷效果；
•可以根据需要写出封装良好的JS类库或者开发框架；
5.前端学习资料
http://www.w3school.com.cn/html/
https://github.com/alex/what-happens-when
https://qdan.me/list/VNBugw7ObupFRdlE
大 家可能比较关心如果我要开发一个网站需要多少时间？这个问题虽然很难回答，元一还是来试着回答了。现在前端有了jQuery，bootstrap 这样的框架，后端又有了 Ruby on Rails 这样的快速 Web开发框架，如果从头学的话，像是一个简易的 Pinterest，大概一个月就可以了。如果是一个有经验的程序员，可能 1个星期就可以开发出一个大概的原型出来。
三、后端
1.后端服务器
后端的任务实际上就是向前端提供需要显示网页和 APP 内容的数据，可能是 HTML，也可能是JSON 数据，也可以是音视频或者 PDF 文件。简单的来划分，一个服务器包含3个部分：
1) HTTP 服务器
2)应用服务器
3 ）数据库
HTTP 服务器的唯一任务就是把需要返回给客户端的资源文件封装在 HTTP数据包里，这个资源有可能是它后面的应用服务器动态生成的，也有可能是保存在硬盘上的静态文件。这是所有后端程序都必须有的，也是直接和我们的浏览器通信，返回给我们数据的程序。它的作用就是把它后面的编程语言生成的各种 HTML/CSS/Javascript，打包成一个 HTTP请求，然后再封装到一个 TCP/IP 的数据包里发回给我们。而最常用的两个 HTTP 服务器叫做 Apach 和 Nginx。
应用服务器就是通常意义上所说的码农负责的部分。他们的职责就是生成前端需要HTML/CSS/JS 交给浏览器。
2.后端语言
1） C#/Java：这两者都是名声显赫的程序设计语言，功能强大且完善。但入门难度也比较高，复杂。 Java 的优点就是适合处理特别大的数据量，如果你的项目会很快实现大爆发，需要处理海量的请求，那么 Java 是一个不错的选择。
2）PHP：PHP最早是Personal Home Page的缩写（就是这么直白！任性！），后来更名为Hypertext Preprocessor，就是超文本预处理器。PHP的优势是可以被嵌入html语言，所以实用性强、入门简单、容易上手，但缺点同样很多，因为是开源没有标准框架，等等吧。
3）Ruby：Ruby是一种面向开发者的语言，语法简单（“懂英语的人都能学会”——张元一），注重人性化，而不是一味从机器的角度着想。所以Ruby的优点就是易懂易上手，开发效率高，但数据量大时性能不足。
04 年出现了一个用 Ruby 编写的 Web 开发框架 Ruby onRails，当时的效果是非常震撼的，以前需要一个团队才能搞定的事情，使用 Ruby on Rails 后 1 个人就可以胜任了，所以 Rubyon Rails 在极短的时间内就成为了 Ruby 的代名词，也成为了新手学习 Web 开发的不二选择，但是 Ruby语言也并非十全十美，快的同时，他的最大短板就是性能。Twitter 最早就是使用 Ruby on Rails开发的，但是随着用户数的逐步增长，Twitter 的宕机开始变得非常频繁，后来他们迫不得已将整个系统从 Ruby 迁移到到了一个从 Java派生出来的语言 Scala。
4）Node.js：这是基于Javascript的一种语言，适合有前端基础的人进入后端使用；采用异步编程模型，处理高并发时有性能优势。简单来说，可以把 node.js 理解为跑在服务器上的 javascript，再直白一点，就是一个跑在服务器上的浏览器，因为 node.js最早就是从 chrome 浏览器的Javascript 引擎 V8 中剥离出来的。相比 Ruby，Node.js程序可以获得更高的并发性能，这在一些高并发的场景下（比如群聊，多人协作等）会很有优势。
5）Lisp：号称业界最强的编程语言没有之一，更多是Geek和科学家们的钟爱。Lisp 的作者在很早以前就从数学的层面总结了一个完美的编程语言应该具备的 9 种能力，而 Lisp就是为了配合他的这个理论而产生出来的语言。Hacker News 是由 YC 的创始人 Paul Graham 开发的，而 PaulGraham 本身就是一个 Lisp 程序员，他为了开发 Hacker News，专门发明了一种新语言叫做 Arc，但因为它是基于 Lisp的，所以也被归为了 Lisp 的方言之一。
6）无后端：一些移动应用初期可以没有后端，实现项目的快速启动。无后端（noBackend）致力于让构建一个应用的过程变得更简单，实际上是通过前端代码抽象成后端接口。可用的工具有FacebookParse, Google Firebase以及国内的LeanCloud。
无后端编程是最近的一个新趋势，但她并非说是真的没有后端，而只是把后端交给一些第三方的云平台，比如 Leancloud，Firebase等。如果你开发一个手机 App，这样的好处就是你可以在早期没有后端程序员的情况下快速开工，像Leancloud这样的云平台已经可以胜任大部分的应用场景，如果后期业务逻辑复杂之后再寻找合适的后端工程师迁移也不迟。
7）其他（python，closure 等）
2.数据库
数据库是按照数据结构对数据进行存储、组织和管理的库。你可以简单地把数据库想象成公司的文件柜，每个柜子里放不同的文件，通过柜子编号可以找到你要的资料；把资料放进去时，也放到对应编号的柜子里去。而在数据库中，还涉及到数据的不同类型、数据间的映射关系等等的信息。
数据库有很多种类型，常见的有ORACLE、DB2、SQL Server、Sybase、Informix、MySQL、VF、Access等等（是的，这些都是不同类型的数据库），这里主要介绍的时MySQL和MongoDB。
1）MySQL：MySQL是一个关系型数据库管理系统。什么是关系型？就是说有关联的数据是保存在同一个表内，而不是把所有数据堆在一起，这样查起来就很方便。MySQL的优点是体积小、速度快、成本低，是很多中小型网站的首选。但是，关系型数据库的缺点是在海量访问并发和海量数据管理时的力不从心，而且对数据库的升级和扩展很麻烦，往往需要停机维护和数据迁移。这是令人难以忍受的。
MySQL 是最常用的结构化数据库，也是大多数创业公司的选择。为什么是结构化的？就是说它的表的结构是固定的，比如我们常见的 User 表在 MySQL 中就是这样的：
如果我们需要取得一条用户记录来检查他输入的密码是否正确，这时我们就需要使用 SQL，SQL 就是结构化查询语言。
简单来说，SQL 数据库保存的是结构化数据，NOSQL数据库则可以保存非结构化数据。举个例子，还拿上面的用户表来举例，如果我们现在想要给产品小妹增加一些额外的属性，比如她给某个产品点赞可以效果x2，那么如果是 SQL 数据库，我们就需要给数据库增加一个新的字段来保存这个属性：
但是如果是 MongoDB 这样的 NOSQL 数据库，我们就不需要给所有用户都增加一个x2的属性，只需要给产品集小妹单独增加就可以了，NOSQL 中保存到数据是如下这个样子的：
2）MongoDB：MongoDB是一个基于分布式文档存储的数据库，介于关系型数据库和非关系型数据库之间，他可以支持很松散的数据结构，所以能够支持较复杂的数据类型；同时又能支持关系型数据库表单查询的大部分功能，所以在一定程度上集成了两者的优点。
3.服务器如何辨别用户是谁？
服务器辨别用户是通过Cookie和Session实现的。
1）Cookie：Cookie是一种数据，它由服务器生成，发送到你的浏览器，然后由浏览器保存到本地的某个文件夹里，等你下次再登陆这个网站时，浏览器就会把你的Cookie发送给服务器，这时服务器就知道了“啊原来又是你丫”。一条Cookie的生命一般是一个轮回，就是当你第二次登录网站时，第一次登陆的那条Cookie会被覆盖；但也可以指定周期，比如“一个月内自动登陆”这种情况……
2）Session：Session实际上是一种时间的概念，就是你打开一个网站到关闭这个网站之间的时间。这段时间里，你在网站上的动作都被当做Session保存在服务器中，比如说“返回上一个浏览页面”这种动作，就是由Session实现的。Session保存在服务器上，关闭了网站怎么办？你的Session会被编上号，以SessionID的形式发送到浏览器，以Cookie的形式保存在本地，这就是Cookie和Session的亲密合作。
当然各个网站的策略不太一致，下次浏览某网站时，可以留意下自己的操作行为是如何被记录的。
4.移动开发
开发移动应用程序主要分为以下三种情况：
1）原生：指的是完全基于移动平台写代码（比如iOS平台支持Xcode和Objective-C，安卓平台支持Eclipse和Java），看上去外观最好，用起来性能最佳，实现的功能最多，当然也就比较费工夫。适合对速度、性能特别敏感的应用，如拍照、视频类，通常开发周期为4-6周；
2）HTML5：使用标准的Web技术（通常是HTML5、JavaScript和CSS），可以只编写一次就跨平台运行，更快做跨屏适配，效果很酷炫，但也有一些功能的局限，通常开发周期为1-2周；
3）混合式：就是将HTML5嵌入到原生器中，集成了以上两者的优点和缺点。适合已有web端产品，想以最低成本迁移到移动端，通常开发周期为3-4周。
四、web建站技术
1. 首先网站访问是一个什么过程？
假设你在浏览器地址栏输入这个问题的地址
http://www.zhihu.com/question/22689579 访问过程和下图差不多。
2.HTML与CSS
你家电脑拿到一个 html （就是上图 HTTP 响应的 body 里的内容）之后，就会对它进行解析渲染。HTML 就是一种标记语言。类比一下，大家在论坛上经常会用一些代码来添加富文本内容，举一些栗子：
[img]图片地址[/img] 用来贴图
[url]超链接[/url] 用来贴地址
[del]呵呵[/del] 表示标签里的文字应该被删掉（默认添加删除线效果）
这种论坛代码也是一种标记语言，HTML 的作用就和它差不多。服务器返回给你的html文件里面，写的是一些代码，大概是这样的：
浏览器拿到这些代码之后，分析一下给你渲染好页面显示出来，如果不用css，效果是这样的，按照浏览器默认的样式显示出列表、图片、超链接、输入框、按钮等等：
是不是觉得默认样式有点看瞎狗眼呢……所以很多时候我们需要自定义样式，现行通用的规定样式的语言是CSS，我们可以用它写一些定义样式的代码，然后在html 文件里用一个标签把这些规定样式的 CSS 代码与表达内容语义的 HTML代码关联起来，然后你就能看到一个符合人类正常审美的页面了:
CSS 代码的格式基本是：
第一个属性对应的代码翻译成人话，就是它的位置（position）应该是不动（fixed）的，浏览器会兢兢业业地去实现这段代码要求实现的效果， 所以你在页面上翻来翻去顶上那个导航条都会死死地黏在窗口顶部不跟着滚动。
再拿里面的其他几个属性做例子解释一下就是：
left 和 top 为零指明这个导航条要紧贴着窗口的左上角；
width 和 height 指定这个导航条的宽和高；
background 指明这个导航条的背景是一种渐变的蓝色；
浏览器就会根据这些 CSS 代码，“画”出对应的样式。
3.hHTML5与XHTML
像人的语言一样，网络上的网页里的 HTML代码也不一定是标准的，好比有时候你发音不太标准，别人会去猜测你说的到底是什么一样，有些时候前端程序猿不小心写错了
HTML，浏览器也会试图猜测他们原来想写的是什么，做对应的渲染，而猜是要有一个常识做依据的。加上有些浏览器支持一些标签，有一些又不支持，以及其他混乱的情况，为了防止大家鸡同鸭讲，我们需要对HTML 代码里能有什么标签，标签怎么写，标签可以有什么属性这些东西有一定的共识，建立一个通行的标准，HTML5就是其中一个比较新的标准。这个标准新加了很多可以用的标签和属性，然后各大浏览器也吭哧吭哧按这个标准去实现了很多这些新加的标签和属性，本来前端程序员要写一堆代码去实现的效果，现在浏览器都给你实现好了，只要写两三行，调用一下浏览器给你实现的部分就能搞定，简单愉快，所以很多人都在热情地推广这个标准~（当然新标准也不可能是完美的，总会有一些问题，怕跑题这里按下不表~）
至于 XHTML，就是 HTML 的近亲 XML 和 HTML 自己的杂交品种，对语法要求比较严格，并且为了兼容 XML，在语法上与 HTML 有一些不同~
4.JavaScript与浏览器脚本
有了表示内容和语义的 HTML，规定样式的 CSS，得到的是一个静态的页面，没什么动画（其实用 CSS还是可以有一些动画的，不过这个跑题了），按 F5 才会刷新数据，都21世纪了，这么呆板单调的网页怎么能展现我大智人种族的创造性口胡！于是我们有了 Javascript（JS）来给页面添加一些动态的效果，比如知乎问题的标签，鼠标移上去会弹出一个小窗口，这个就是 JS 实现的效果啦。
浏览器都会帮你实现一些 JS 可以用的工具（函数，对象什么的），你只要写一些 JS 的代码，保存在 xxx.js 里，在 html 文件中用 关联进来就可以用了，像上图这个效果应该就包括了鼠标悬停到标签上时创建一个新的小窗口用 JS 向知乎服务器发送一个请求，得到这个小窗口应该显示的数据，放在这个小窗口里（这就是所谓的AJAX，不用刷新就能与服务器进行交互，更新页面的一小部分~）
浏览器拿到这样的代码，就会解析并实现出相应的效果，楼主问的浏览器脚本，指的就是这样子的代码。其实用来写浏览器脚本的，也不是非得JavaScript 不可，当年还为到底用什么语言写这种代码有过一段战火纷飞的时期，但现在尘埃落定，各大浏览器都默认了：请用 JS 写这些动态效果的代码给我解析~
5.Web Server与Web Services
浏览器给服务器发一个请求，服务器不是一看就知道怎么响应的。首先这些请求和响应要有一个通用的写法，也就是要有一个协议，常用的是 HTTP 协议。
像最前面的图，服务器的响应写了一个状态码 200 OK ，是 HTTP 协议里约定俗成的一个东西，服务器写 200 OK 在响应里，表示“你请求的这个东西我有”，如果是404 Not Found，就是“你请求的这个东西我这里没有”。
HTTP 响应里还包括很多东西，比如 Content-type表示服务器发过来的文件类型是什么（文本？动画？图片？音频？），这样发过去了人家浏览器好知道怎么展示给用户看。人家服务器怎么知道按协议要写什么东西进去呢，这就是Web Server 干活的时候了。
形象化一下HTTP响应，大概就长这样：
再上个锤子，浏览器和服务器之间请求响应的过程大致是长这样的，右下角的那些东西就是由 Web Server 生成的（服务器脚本可以做一些改动，但这些一般是 Web Server 的份内活）：
再比如说很多时候你访问一个网站，浏览器里输的地址并没有写明你请求的文件，比如这个问题的地址是：http://www.zhihu.com/question/2268957
但知乎的服务器其实返回了一个html给你，服务器怎么知道这个地址对应要返回什么样的 html 代码给你的？也是 Web Server 干的活。除了浏览器输地址敲回车这种赤裸裸的访问，客户端与服务器的交互还有很多种，比如：前面提到的用 JS 完成的 AJAX，有点像浏览器和服务器之间的悄悄话~还有其他应用软件与服务器的交互，比如：
微信、QQ 与腾讯的服务器的交互
网游客户端与网游公司服务器的交互
搜索引擎用来搜集网页信息的程序（爬虫）与各种各样的网站服务器的交互
只要你知道用什么地址访问、怎样访问人家的服务器，并且有相应权限，你也可以自己写一些程序去和他们的服务器交互（比如用微博API – 新浪微博API获取微博，开发第三方应用或者做数据分析）。
从这些栗子里可以看出，客户端与服务器的交互的主体、客体、载体是五花八门的：
服务器可以是大型机也可以是个人电脑，只要能跑相应的程序就行.
客户端像前面举的栗子里一样，可以是各种软件，而且这些软件不一定运行在个人电脑上，也可以是手机、平板、智能穿戴设备等等。
有时候不是传生成好的 HTML 或者其他服务器上已经有的文件，而是传输经过一定逻辑处理后生成的字符串或者其他各种封装好的数据。
像前面提到的 HTML需要有一定标准一样，为了防止混乱和鸡同鸭讲，我们又需要先对这些机器需要怎么交互达成一定共识，再让它们进行交流。人与人之间通信，需要先有一种大家都认识的写法（比如简体字/繁体字）和一种彼此都懂的语言（比如普通话/广东话）。要让这些形形色色的机器能够通过网络进行交互，我们就需要指明一种协议（比如HTTP/HTTPS）和一种数据封装格式（比如 HTML/XML），Web Server 提供的 WebService，指的就是这种协议+格式的交流体系。不过 Web Service 的生态系统和 HTML的标准不一样，用户可以选择的协议和数据封装格式更多，普通的网站访问用的 HTTP + HTML只是其中一种，一些封闭系统内的交流还可以自己定义一个协议和格式来用（比如 QQ）。
Web Service 传输的数据再经由本地客户端（浏览器、QQ/微信，网游客户端等）的分析渲染，就能够以普通人能够理解的形式展现出来。此外还有一些 Web Service 并不是为普通用户设计的，像前面提到的微博API，是用来给程序猿进行二次开发的~
除了提供 Web Service， Web Server还会兼顾很多功能，包括提供缓存，平衡负载，这样在访问量比较大的时候能有有条不紊地接客。常见的现成的 Web Server 有开源的Apache、Nginx和微软的IIS，你也可以用一些工具（比如 Node.js ）自己定制一个。因为 Web Server需要比较好的性能，所以投产时用的 Web Server通常是C/C++/Java写的，但是其实很多语言都可以写，而且配合上语言底层的优化和好的模型，其他语言写的 WebServer也可以有不错的表现。
6.PHP,服务器脚本，Web Framework
开头那张图里服务器接到请求之后可以给访客发送对应的文件，但21世纪的服务器怎么可能只会“接请求-发文件”这么弱智的一招呢，人家还可以处理你上传来的文件的！还可以接受你发过来的各种请求，去操作服务器本地的文件or数据库的！要干这些事，自然服务器那边也少不了要有代码了，这些代码就是服务器脚本。前面说的Web Service 传输的数据，主要也是由服务器脚本生成，再交由 Web Server ，按照某种协议套好整个响应的格式，返回给客户端的。
同一个网址，每个人看到的页面不一定是一样的，比如知乎首页的网址都是：http://www.zhihu.com/，但是没登陆和登陆之后看到的东西不一样，登陆之后每个人看到的导航栏的用户信息，关注的动态，都不一样。服务器脚本可以对这些不同的状态，生成不同的页面，交给 Web Server 返回给浏览器。
知乎的主页给大家看到的 html 整体来说是差不多的，都有导航栏，左边是关注的动态，右边是广告和边栏，每一块的整体构造大同小异，只是一些地方内容有所区别。服务器脚本就是利用已知的数据，在这些因人而异的地方填入相应的内容，生成给每个人看的页面。
PHP就是一种常见的用来写服务器脚本的语言，其实只要是能拿来写大家传输数据的通用接口（CGI）的语言都可以用来写服务器脚本（也就是说几乎所有编程语言都可以写= =b），只是因为现成工具的丰富程度和专攻程度不一样，所以有一些语言在写服务器端脚本的时候会比较热门。
为了方便，我们在写服务器脚本的时候，通常还会用个同语言写的WebFramework来处理各种细节，防御一些常见的攻击，提供跨站认证（比如用已有的微博账号注册其他网站）的接口，利用cookie处理登陆状态和用户设置，生成网页模版之类的。如果你用C# 或者 Visual Basic 写服务器脚本，就可以用 ASP.NET这个框架实现这些功能，帮你省点麻烦。不过现在不少人是反过来为了一个好用的 Web Framework 去选择它对应的服务器脚本语言的。
7.一个普通网站的访问过程
简单概括一下，对于我们普通的网站访问，涉及到的技术就是：
用户操作浏览器访问，浏览器向服务器发出一个 HTTP 请求；
服务器接收到 HTTP 请求，Web Server 进行相应的初步处理，使用服务器脚本生成页面；
服务器脚本（利用Web Framework）调用本地和客户端传来的数据，生成页面；
Web Server 将生成的页面作为 HTTP 响应的 body，根据不同的处理结果生成 HTTP header，发回给客户端；
客户端（浏览器）接收到 HTTP 响应，通常第一个请求得到的 HTTP 响应的 body 里是 HTML 代码，于是对 HTML 代码开始解析；
解析过程中遇到引用的服务器上的资源（额外的 CSS、JS代码，图片、音视频，附件等），再向 Web Server 发送请求，Web Server 找到对应的文件，发送回来；
浏览器解析 HTML 包含的内容，用得到的 CSS 代码进行外观上的进一步渲染，JS 代码也可能会对外观进行一定的处理；
用户与页面交互（点击，悬停等等）时，JS 代码对此作出一定的反应，添加特效与动画；
交互的过程中可能需要向服务器索取或提交额外的数据（局部的刷新，类似微博的新消息通知），一般不是跳转就是通过 JS代码（响应某个动作或者定时）向 Web Server 发送请求，Web Server再用服务器脚本进行处理（生成资源or写入数据之类的），把资源返回给客户端，客户端用得到的资源来实现动态效果或其他改变。
注意这只是小网站里比较常见的模型，大网站为了解决规模问题还会有很多处理，每个环节都会有一些细微的差异，中间还会使用各种各样的工具减轻服务器的压力，提高效率，方便日常维护~
8.常见的几种架构
LAMP = Linux + Apache + MySQL +PHP（P还可能是Python或Perl。有时候L会改成W=Windows。），也就是服务器上的操作系统是 Linux，Web Server 用Apache，数据库用 MySQL，服务器脚本用PHP，这些都是开源技术，网站起步时用起来的成本会比较低，所以是普通网站里非常常见的架构（虽然对于发展得很大的网站会遇到很多瓶颈），Facebook就是这种，淘宝也曾经是。
J2EE，Java 世界的架构，通常是企业用的（银行、大型公司,.etc），比较常见地还会搭配一种 UNIX 做操作系统，Apache 做Web Server，Tomcat 转换 JSP 到 Java 给服务器程序用（其实它也自带 Web Server），Oracle数据库等等。不一定拿来建站，常常用来提供企业里的各种需要用到网络的业务。我们学校教务系统就是用J2EE做的=。=淘宝现在也是从LAMP转型到了这个。
http://ASP.NET，微软家的架构，通常会搭配 Windows Server 操作系统，SQL Server 数据库，IIS 做 Web Server。StackOverflow和京东（曾经）就是这个架构。
神奇的MEAN架构，MongoDB做数据库，Express做 Web Framework，Angular 做前端的 JavaScript框架，Node.js 用于编写 Web Server。神奇之处在于这几个东西的语言都是 JavaScript（MongoDB的实现不是，但与外界沟通用的语言是）。因为是比较新的架构，还有待时间的考验，不过被很多人（尤其是靠 JavaScript吃饭的前端程序猿们）热切关注。
一般来说重点不在技术而且在乎成本的新网站比较喜欢用 LAMP，重视安全稳定和速度的企业和机构喜欢 J2EE，想省事的网站喜欢ASP.NET，比较 Geek 的网站和创业公司喜欢折腾各种 Python、Ruby、Node.js世界的东西，Google这样现成的技术都解决不了需求的超大型网站就自己折腾解决方案。
