产品必懂的Web建站技术！

　　推荐：产品经理到底需不需要懂技术，懂要懂多少？这次小编为您整理详细的的建站技术，让你今后和技术沟通更加顺利。
　　首先要知道网站访问大概是什么个过程：
　　假设你在浏览器地址栏输入这个问题的地址
　　http：www。zhihu。comquestion22689579访问过程和下图差不多
　　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代码，“画”出对应的样式。
　　HTML5与XHTML
　　像人的语言一样，网络上的网页里的HTML代码也不一定是标准的，好比有时候你发音不太标准，别人会去猜测你说的到底是什么一样，有些时候前端程序猿不小心写错了HTML，浏览器也会试图猜测他们原来想写的是什么，做对应的渲染，而猜是要有一个常识做依据的。加上有些浏览器支持一些标签，有一些又不支持，以及其他混乱的情况，为了防止大家鸡同鸭讲，我们需要对HTML代码里能有什么标签，标签怎么写，标签可以有什么属性这些东西有一定的共识，建立一个通行的标准，HTML5就是其中一个比较新的标准。这个标准新加了很多可以用的标签和属性，然后各大浏览器也吭哧吭哧按这个标准去实现了很多这些新加的标签和属性，本来前端程序员要写一堆代码去实现的效果，现在浏览器都给你实现好了，只要写两三行，调用一下浏览器给你实现的部分就能搞定，简单愉快，所以很多人都在热情地推广这个标准（当然新标准也不可能是完美的，总会有一些问题，怕跑题这里按下不表）
　　至于XHTML，就是HTML的近亲XML和HTML自己的杂交品种，对语法要求比较严格，并且为了兼容XML，在语法上与HTML有一些不同
　　JavaScript与浏览器脚本
　　有了表示内容和语义的HTML，规定样式的CSS，得到的是一个静态的页面，没什么动画（其实用CSS还是可以有一些动画的，不过这个跑题了），按F5才会刷新数据，都21世纪了，这么呆板单调的网页怎么能展现我大智人种族的创造性口胡！于是我们有了Javascript（JS）来给页面添加一些动态的效果，比如知乎问题的标签，鼠标移上去会弹出一个小窗口，这个就是JS实现的效果啦。
　　浏览器都会帮你实现一些JS可以用的工具（函数，对象什么的），你只要写一些JS的代码，保存在xxx。js里，在html文件中用
　　关联进来就可以用了，像上图这个效果应该就包括了
　　鼠标悬停到标签上时创建一个新的小窗口
　　用JS向知乎服务器发送一个请求，得到这个小窗口应该显示的数据，放在这个小窗口里（这就是所谓的AJAX，不用刷新就能与服务器进行交互，更新页面的一小部分）
　　浏览器拿到这样的代码，就会解析并实现出相应的效果，楼主问的浏览器脚本，指的就是这样子的代码。其实用来写浏览器脚本的，也不是非得JavaScript不可，当年还为到底用什么语言写这种代码有过一段战火纷飞的时期，但现在尘埃落定，各大浏览器都默认了：请用JS写这些动态效果的代码给我解析
　　以上就是前端部分的内容，下面简述一下后端的东西吧浏览器给服务器发一个请求，服务器不是一看就知道怎么响应的。首先这些请求和响应要有一个通用的写法，也就是要有一个协议，常用的是HTTP协议。
　　像最前面的图，服务器的响应写了一个状态码200OK，是HTTP协议里约定俗成的一个东西，服务器写200OK在响应里，表示“你请求的这个东西我有”，如果是404NotFound，就是“你请求的这个东西我这里没有”。
　　HTTP响应里还包括很多东西，比如Contenttype表示服务器发过来的文件类型是什么（文本？动画？图片？音频？），这样发过去了人家浏览器好知道怎么展示给用户看。人家服务器怎么知道按协议要写什么东西进去呢，这就是WebServer干活的时候了。
　　形象化一下HTTP响应，大概就长这样：
　　再上个锤子，浏览器和服务器之间请求响应的过程大致是长这样的，右下角的那些东西就是由WebServer生成的（服务器脚本可以做一些改动，但这些一般是WebServer的份内活）：
　　再比如说很多时候你访问一个网站，浏览器里输的地址并没有写明你请求的文件，比如这个问题的地址是：
　　http：www。zhihu。comquestion22689579
　　但知乎的服务器其实返回了一个html给你，服务器怎么知道这个地址对应要返回什么样的html代码给你的？也是WebServer干的活。
　　除了浏览器输地址敲回车这种赤裸裸的访问，客户端与服务器的交互还有很多种，比如：
　　前面提到的用JS完成的AJAX，有点像浏览器和服务器之间的悄悄话
　　还有其他应用软件与服务器的交互，比如：
　　微信、QQ与腾讯的服务器的交互
　　网游客户端与网游公司服务器的交互
　　搜索引擎用来搜集网页信息的程序（爬虫）与各种各样的网站服务器的交互
　　只要你知道用什么地址访问、怎样访问人家的服务器，并且有相应权限，你也可以自己写一些程序去和他们的服务器交互（比如用微博API新浪微博API获取微博，开发第三方应用或者做数据分析）。
　　从这些栗子里可以看出，客户端与服务器的交互的主体、客体、载体是五花八门的：
　　服务器可以是大型机也可以是个人电脑，只要能跑相应的程序就行
　　客户端像前面举的栗子里一样，可以是各种软件，而且这些软件不一定运行在个人电脑上，也可以是手机、平板、智能穿戴设备等等
　　有时候不是传生成好的HTML或者其他服务器上已经有的文件，而是传输经过一定逻辑处理后生成的字符串或者其他各种封装好的数据
　　像前面提到的HTML需要有一定标准一样，为了防止混乱和鸡同鸭讲，我们又需要先对这些机器需要怎么交互达成一定共识，再让它们进行交流。人与人之间通信，需要先有一种大家都认识的写法（比如简体字繁体字）和一种彼此都懂的语言（比如普通话广东话）。要让这些形形色色的机器能够通过网络进行交互，我们就需要指明一种协议（比如HTTPHTTPS）和一种数据封装格式（比如HTMLXML），WebServer提供的WebService，指的就是这种协议格式的交流体系。不过WebService的生态系统和HTML的标准不一样，用户可以选择的协议和数据封装格式更多，普通的网站访问用的HTTPHTML只是其中一种，一些封闭系统内的交流还可以自己定义一个协议和格式来用（比如QQ）。
　　WebService传输的数据再经由本地客户端（浏览器、QQ微信，网游客户端等）的分析渲染，就能够以普通人能够理解的形式展现出来。此外还有一些WebService并不是为普通用户设计的，像前面提到的微博API，是用来给程序猿进行二次开发的
　　除了提供WebService，WebServer还会兼顾很多功能，包括提供缓存，平衡负载，这样在访问量比较大的时候能有有条不紊地接客。常见的现成的WebServer有开源的Apache、Nginx和微软的IIS，你也可以用一些工具（比如Node。js）自己定制一个。因为WebServer需要比较好的性能，所以投产时用的WebServer通常是CCJava写的，但是其实很多语言都可以写，而且配合上语言底层的优化和好的模型，其他语言写的WebServer也可以有不错的表现。
　　PHP，服务器脚本，WebFramework
　　开头那张图里服务器接到请求之后可以给访客发送对应的文件，但21世纪的服务器怎么可能只会“接请求发文件”这么弱智的一招呢，人家还可以处理你上传来的文件的！还可以接受你发过来的各种请求，去操作服务器本地的文件or数据库的！要干这些事，自然服务器那边也少不了要有代码了，这些代码就是服务器脚本。前面说的WebService传输的数据，主要也是由服务器脚本生成，再交由WebServer，按照某种协议套好整个响应的格式，返回给客户端的。
　　同一个网址，每个人看到的页面不一定是一样的，比如知乎首页的网址都是：
　　http：www。zhihu。com
　　但是没登陆和登陆之后看到的东西不一样，登陆之后每个人看到的导航栏的用户信息，关注的动态，都不一样。服务器脚本可以对这些不同的状态，生成不同的页面，交给WebServer返回给浏览器。
　　知乎的主页给大家看到的html整体来说是差不多的，都有导航栏，左边是关注的动态，右边是广告和边栏，每一块的整体构造大同小异，只是一些地方内容有所区别。服务器脚本就是利用已知的数据，在这些因人而异的地方填入相应的内容，生成给每个人看的页面。
　　比如我的主页，导航栏右边的头像和名字跟别人看到的不一样，就是因为这块地方有一个放图片的标签和一个写名字的标签，服务器脚本在查询本地的数据之后给我返回的页面里的标签填了我头像的图片链接，标签里填了我的名字，给别人的页面就填其他链接、其他名字，这样每个人看到的页面就不一样了。
　　PHP就是一种常见的用来写服务器脚本的语言，其实只要是能拿来写大家传输数据的通用接口（CGI）的语言都可以用来写服务器脚本（也就是说几乎所有编程语言都可以写b），只是因为现成工具的丰富程度和专攻程度不一样，所以有一些语言在写服务器端脚本的时候会比较热门。
　　为了方便，我们在写服务器脚本的时候，通常还会用个同语言写的WebFramework来处理各种细节，防御一些常见的攻击，提供跨站认证（比如用已有的微博账号注册其他网站）的接口，利用cookie处理登陆状态和用户设置，生成网页模版之类的。如果你用C或者VisualBasic写服务器脚本，就可以用ASP。NET这个框架实现这些功能，帮你省点麻烦。不过现在不少人是反过来为了一个好用的WebFramework去选择它对应的服务器脚本语言的。
　　一个普通网站访问的过程
　　简单概括一下，对于我们普通的网站访问，涉及到的技术就是：
　　用户操作浏览器访问，浏览器向服务器发出一个HTTP请求；
　　服务器接收到HTTP请求，WebServer进行相应的初步处理，使用服务器脚本生成页面；
　　服务器脚本（利用WebFramework）调用本地和客户端传来的数据，生成页面；
　　WebServer将生成的页面作为HTTP响应的body，根据不同的处理结果生成HTTPheader，发回给客户端；
　　客户端（浏览器）接收到HTTP响应，通常第一个请求得到的HTTP响应的body里是HTML代码，于是对HTML代码开始解析；
　　解析过程中遇到引用的服务器上的资源（额外的CSS、JS代码，图片、音视频，附件等），再向WebServer发送请求，WebServer找到对应的文件，发送回来；
　　浏览器解析HTML包含的内容，用得到的CSS代码进行外观上的进一步渲染，JS代码也可能会对外观进行一定的处理；
　　用户与页面交互（点击，悬停等等）时，JS代码对此作出一定的反应，添加特效与动画；
　　交互的过程中可能需要向服务器索取或提交额外的数据（局部的刷新，类似微博的新消息通知），一般不是跳转就是通过JS代码（响应某个动作或者定时）向WebServer发送请求，WebServer再用服务器脚本进行处理（生成资源or写入数据之类的），把资源返回给客户端，客户端用得到的资源来实现动态效果或其他改变。
　　注意这只是小网站里比较常见的模型，大网站为了解决规模问题还会有很多处理，每个环节都会有一些细微的差异，中间还会使用各种各样的工具减轻服务器的压力，提高效率，方便日常维护
　　延伸阅读那些看花眼的名词
　　为了方便调试，很多WebFramework会自带一个简单的WebServer，或者有些WebServer会自带一个简单的WebFramework，实际部署到服务器上开放使用的时候为了性能或者安全等多方面的考虑，可以把内置的WebServer换成其他的，比如Apache或者Nginx（举个栗子，知乎用的是Tornado做Framework，Server换成了Nginx，见知乎使用了哪些框架和开源库？）。如果是开源的东西，还可以在遵守开源协议的前提下自己改一下再用
　　因为后端不像前端已经有HTMLCSSJS这样的既定事实标准，服务器脚本与WebFramework的选择很多，所以新手会听到很多眼花缭乱的技术名词的地方多在这里举一些栗子，早年常见的服务器端语言有：
　　开源的PHP
　　Sun公司的JSP中使用的Java
　　微软的ASP中使用的VBScript
　　现在在这方面的应用热起来的语言有
　　Python，对应常见的Framework包括知乎和Quora有用到的Tornado（其实是自带Framework的WebServer），社区很成熟的Django（用户包括Instagram、Pinterest）等
　　Ruby，一般都用Rails这个Framework，用户包括Github、早期的Twitter等
　　逆天的JavaScript，有了Node。js这个平台，WebServer、服务器脚本和浏览器脚本全都可以用JavaScript来写Node。js上最常用的Framework是Express
　　微软家的则跟着ASP。NET转移到了C或者VisualBasic
　　Erlang，擅长大规模的并发，不少游戏公司拿来写服务器，靠几十个工程师支撑几亿用户的WhatsApp也是用的这个
　　几种常见的架构包括：
　　LAMPLinuxApacheMySQLPHP（P还可能是Python或Perl。有时候L会改成WWindows。），也就是服务器上的操作系统是Linux，WebServer用Apache，数据库用MySQL，服务器脚本用PHP，这些都是开源技术，网站起步时用起来的成本会比较低，所以是普通网站里非常常见的架构（虽然对于发展得很大的网站会遇到很多瓶颈），Facebook就是这种，淘宝也曾经是。
　　J2EE，Java世界的架构，通常是企业用的（银行、大型公司，。etc），比较常见地还会搭配一种UNIX做操作系统，Apache做WebServer，Tomcat转换JSP到Java给服务器程序用（其实它也自带WebServer），Oracle数据库等等。不一定拿来建站，常常用来提供企业里的各种需要用到网络的业务。我们学校教务系统就是用J2EE做的。淘宝现在也是从LAMP转型到了这个。
　　http：ASP。NET，微软家的架构，通常会搭配WindowsServer操作系统，SQLServer数据库，IIS做WebServer。StackOverflow和京东（曾经）就是这个架构。
　　神奇的MEAN架构，MongoDB做数据库，Express做WebFramework，Angular做前端的JavaScript框架，Node。js用于编写WebServer。神奇之处在于这几个东西的语言都是JavaScript（MongoDB的实现不是，但与外界沟通用的语言是）。因为是比较新的架构，还有待时间的考验，不过被很多人（尤其是靠JavaScript吃饭的前端程序猿们）热切关注。
　　一般来说重点不在技术而且在乎成本的新网站比较喜欢用LAMP，重视安全稳定和速度的企业和机构喜欢J2EE，想省事的网站喜欢ASP。NET，比较Geek的网站和创业公司喜欢折腾各种Python、Ruby、Node。js世界的东西，Google这样现成的技术都解决不了需求的超大型网站就自己折腾解决方案。