Web 建站技术中，HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么？

建站有很多技术，如 HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、http://ASP.NET、Web Services、浏览器脚本、服务器脚本等。它们的区别是什么？新手一点不懂，想理清所有这些技术之间的关系和应用范围。

回复内容：

一个学期前我也和楼主差不多不知道这些都是啥，一个学期之后差不多都弄懂了，来讲讲自己的理解吧 >
首先要知道网站访问大概是什么个过程：
假设你在浏览器地址栏输入这个问题的地址

<code class="language-text">http://www.zhihu.com/question/22689579
</code>

不妨把你提到的技术都揉进Web发展的历程中，从技术和历史的视角来一起看，你就知道这些技术诞生的背景以及解决的问题了。参考曾经写过的一篇文章：Web开发技术发展历史。

1、Web的诞生

提到Web，不得不提一个词就是“互联网”。Web是World Wide Web的简称，中文译为万维网。“万维网”和我们经常说的“互联网”是两个联系极其紧密但却不尽相同的概念。今天“互联网”三个字已经承载了太多的内涵，提到互联网，我们通常想到的一种战略思维，或者是一种颠覆传统的商业模式。抛开那些纷繁凌乱的商业化概念，回归技术本身，互联网就是指通过TCP/IP协议族互相连接在一起的计算机网络。而Web是运行在互联网上的一个超大规模的分布式系统。Web设计初衷是一个静态信息资源发布媒介，通过超文本标记语言（HTML）描述信息资源，通过统一资源标识符（URI）定位信息资源，通过超文本转移协议（HTTP）请求信息资源。HTML、URL和HTTP三个规范构成了Web的核心体系结构，是支撑着Web运行的基石。用通俗的一点的话来说，客户端（一般为浏览器）通过URL找到网站(如http://www.google.com)，发出HTTP请求，服务器收到请求后返回HTML页面。可见，Web是基于TCP/IP协议的，TCP/IP协议把计算机连接在一起，而Web在这个协议族之上，进一步将计算机的信息资源连接在一起，形成我们说的万维网。大家开发的Web应用本质上就是可以提供信息或者功能的Web资源，成为Web这个全球超大规模分布式系统中的一部分。在技术层面进一步理解Web和互联网，建议找一本计算机网络的书去看看，了解一下计算机网络的分层结构和发展历史。

1991年8月6日，Tim Berners Lee在alt.hypertext新闻组贴出了一份关于World Wide Web的简单摘要，标志了Web页面在Internet上的首次登场。最早Web主要被一帮科学家们用来共享和传递信息，全世界的Web服务器也就几十台。第一个Web浏览器是Berners Lee在NeXT机器上实现，也只能跑在NeXT机器上，苹果和乔布斯的粉丝对NeXT的历史肯定耳熟能详。真正使得Web开始流行起来的是Mosaic浏览器，这便是曾经大名鼎鼎的Netscape Navigator的前身。Berners Lee在1993年建立了万维网联盟（World Wide Web Consortium，W3C），负责Web相关标准的制定。浏览器的普及和W3C的推动，使得Web上可以访问的资源逐渐丰富起来。这个时候Web的主要功能就是浏览器向服务器请求静态HTML信息。95年的时候马云在美国看到了互联网，更准确的说他其实看到的就是Web，阿里早先做的黄页也就是把企业信息通过进行HTML展示的Web应用。

2、动态内容的出现：CGI

最初在浏览器中主要展现的是静态的文本或图像信息，GIF图片则第一次为HTML页面引入了动态元素。不过人们已经不仅仅满足于访问放在Web服务器上的静态文件，1993年CGI（Common Gateway Interface）出现了，Web上的动态信息服务开始蓬勃兴起。CGI定义了Web服务器与外部应用程序之间的通信接口标准，因此Web服务器可以通过CGI执行外部程序，让外部程序根据Web请求内容生成动态的内容。Perl因为跨操作系统和易于修改的特性成为CGI的主要编写语言。当然，CGI可以用任何支持标准输入输出和环境变量的语言编写，比如Shell脚本,C/C++语言，只要符合接口标准即可。比如你用C语言编写CGI程序，你把希望返回的HTML内容通过printf输出就可以发送给Web服务器，进而返回给用户。

3、Web编程脚本语言：PHP/ASP/JSP

这个时候我们已经可以在Web上提供动态功能了，比如网站访问的计数，表单的处理。CGI对每个请求都会启动一个进程来处理，因此性能上的扩展性不高。另外，想象一下用在Perl和C语言中的程序中去输出一大堆复杂的HTML字符串，是不是有点蛋疼，可读性和维护性是个大问题。为了处理更复杂的应用，一种方法是把HTML返回中固定的部分存起来（我们称之为模版），把动态的部分标记出来，Web请求处理的时候，你的程序先生成那部分动态的内容，再把模版读入进来，把动态内容填充进去，形成最终返回。举个例子，搜索一个关键词，搜索引擎的Web服务器可以先从后台索引服务器里拿到数据，然后把这些数据填充到返回结果的HTML模版中，返回给浏览器。但是这件事情自己来做显然太繁琐而且是重复劳动。于是1994年的时候，PHP诞生了，PHP可以把程序（动态内容）嵌入到HTML（模版）中去执行，不仅能更好的组织Web应用的内容，而且执行效率比CGI还更高。之后96年出现的ASP和98年出现的JSP本质上也都可以看成是一种支持某种脚本语言编程（分别是VB和Java）的模版引擎。96年W3C发布了CSS1.0规范。CSS允许开发者用外联的样式表来取代难以维护的内嵌样式，而不需要逐个去修改HTML元素，这让HTML页面更加容易创建和维护。此时，有了这些脚本语言，搭配上后端的数据库技术，Web更是开始大杀四方了，像电子商务这样的应用系统也可以通过Web技术来构建。Web已经从一个静态资源分享媒介真正变为了一个分布式的计算平台了。反过来看，你也应该知道，不是只有当今这些流行脚本语言可以写Web应用，C语言一样可以做这件事情。前面举的搜索引擎通过C语言来获取数据和渲染Web页面的例子在追求极致访问速度的互联网公司是非常常见的，但是脚本语言在开发效率上更胜一筹。

4、分布式企业计算平台：J2EE/.Net

Web开始广泛用于构建大型应用时，在分布式、安全性、事务性等方面的要求催生了J2EE(现在已更名为Java EE)平台在1999年的诞生，从那时开始为企业应用提供支撑平台的各种应用服务器也开始大行其道。Java Servlet、Java Server Pages (JSP)和Enterprise Java Bean (EJB )是Java EE中的核心规范，Servlet和JSP是运行在服务器端的Web组件，EJB运行在服务器端的业务组件，是一种分布式组件技术。2000年随之而来的.net平台，其http://ASP.net构件化的Web开发方式以及Visual http://Stidio.net开发环境的强大支持，大大降低了开发企业应用的复杂度。http://ASP.Net第一次让程序员可以像拖拽组件来创建Windows Form程序那样来组件化地创建Web页面，Java平台后来出现的JSF也承袭了这一思想。两大平台在相互竞争和模仿中不断向前发展。

5、框架横飞的年代：MVC，ORM

两大平台诞生之后，组件化编程技术盛极一时，Web技术的发展开始了一段框架横飞的年代，各种辅助Web开发的技术框架层出不穷。虽然脚本语言大大提高了应用开发效率，但是试想一个复杂的大型Web应用，访问各种功能的URL地址纷繁复杂，涉及到的Web页面多种多样，同时还管理着大量的后台数据，因此我们需要在架构层面上解决维护性和扩展性等问题。这个时候，MVC的概念被引入到Web开发中来了。2004年出现的Struts就是当时非常流行的Java Web开发的MVC框架。MVC早在1978年就作为Smalltalk的一种设计模式被提出来了，应用到Web应用上，模型Model用于封装与业务逻辑相关的数据和数据处理方法，视图View是数据的HTML展现，控制器Controller负责响应请求，协调Model和View。Model，View和Controller的分开，是一种典型的关注点分离的思想，不仅使得代码复用性和组织性更好，使得Web应用的配置性和灵活性更好。这是Spring MVC的示意图，典型的MVC架构。

此外，数据访问也逐渐通过面向对象的方式来替代直接的SQL访问，出现了ORM（Object Relation Mapping）的概念，2001年出现的Hibernate就是其中的佼佼者，已经成为Java持久层的规范JPA的主要参考和实现。更多的全栈框架开始出现，比如2003年出现的Java开发框架Spring，同时更多的动态语言也被加入到Web编程语言的阵营中，2004年出现的Ruby开发框架Rails，2005出现的Python开发框架Django，都提供了全栈开发框架，或者自身提供Web开发的各种组件，或者可以方便的集成各种组件。比如Spring基于IoC和AOP思想可以方便得整合出全套Web开发组件，SSH（Struts+Spring+Hibernate）一度成为Java Web开发的标配。值得一提的时Rails这个MVC框架，26岁的丹麦大神David Heinemeier Hansson在开发著名项目管理软件BaseCamp的过程中形成，Ruby语言本身在快速开发上的优势，加上Rails诸如崇尚DRY（Don't）Repeat Yourself)原则, 约定优于配置，拥抱REST等特性，使其迅速成为一个极其流行的Web开发框架。

6、回归Web本质：REST

注意，看到这里的时候，你会发现Web开发的重点已经不在于HTTP/HTML/URL这样的Web基础架构了，而是各种平台下的各种框架和组件技术（MVC/ORM/分布式组件技术等等）。所以今天很多人可能会用一个MVC框架构建Web网站，但是可能并不了解Web本身。2000年的时候，Roy Fielding在他的博士论文中从构架风格的角度来剖析了Web本身，将Web内在的设计原则和思路系统得论述出来。Roy Fielding是HTTP协议的主要设计者，也是Apache服务器项目的联合创始人，他的这篇博士论文提出来的REST（Representation State Transformation）也成为一种流行的Web架构风格。REST鼓励基于URL来组织系统功能，充分利用HTTP本身的语义，而不是仅仅将HTTP作为一种远程数据传输协议。Web应用的开发应该回归Web的本质特征。Rails在发展过程中也完全拥抱REST，成为REST的坚定支持者。有些人认为REST和MVC是两种对立的风格，其实不尽然，两者是互为补充的，从Rails是一个全面支持REST的MVC框架这一点就可窥见。

7、浏览器端的魔术：AJAX

Web应用同时涉及到浏览器端和服务器端，之前的介绍除了简单提到了CSS规范之外，主要关注的是服务器端的技术发展。在客户端，1995年NetScape公司设计的JavaScript被用作浏览器上运行脚本语言为网页增加动态性。微软随后推出类似JScript，但是缺乏统一的语言规范，使得浏览器兼容性成为一个程序员的梦魇。JavaScript最终被提交到欧洲计算机制造商协会(ECMA)，做为中立的ECMA开始了标准化脚本语言之路，并将其命名为ECMAScript。JavaScript可以响应浏览器端的用户事件，检测表单的正确性，动态修改HTML页面结构DOM，因此可以减少与服务器端的通信开销，并且做出很酷的页面动态效果。​2005年出现的AJAX这个概念使得JavaScript再次大放异彩​。AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术，可以基于JavaScript的XmlHttpRequest的用于创建交互性更强​的Web应用。AJAX是一种已有技术的mashup，多种技术组合在一起形成了其特色和优势，早在1998年就已经开始有人使用。Google在地图和Gmail等产品中对这项技术的深入应用，以及AJAX这个吸引眼球的名字的提出，使其正式站在了聚光灯下，开始吸引无数人的目光。我们知道Web应用中用户提交表单时就向Web服务器发送一个请求，服务器接收并处理传来的表单，并返回一个新的网页。而前后两个页面中的往往大部分HTML代码是一样的，每次都返回整个页面内容是一种带宽资源的浪费。而AJAX应用仅向服务器发送并取回必须的数据，并在客户端采用JavaScript处理来自服务器响应，更新页面的局部信息。这样不仅浏览器和服务器的数据交换大大减少，而且客户端也可以更加快速地响应用户操作。如果你用Gmail就应该知道，Gmail从来都不刷新页面，所有的请求都是通过AJAX获取数据进行局部更新。AJAX的出现，以及诸如EXTJS、DOJO等一些前端开发框架的出现，也使得单页应用（Single Page Application）在这个时候流行起来。

8、前端MVC：Angular/Backbone

这种模式下，前后端的分工非常清晰，前后端的关键协作点是 Ajax 接口，规定好交互接口后，前后端工程师就可以根据约定，分头开工，开发环境中通过Mock等方式进行测试，同时在特定时间节点进行前后端集成测试。但是，随着业务功能的愈发复杂（看看现在的Gmail），这种模式本质上和JSP时代的Web开发并无本质区别，只不过是将复杂的业务逻辑从JSP文件转移到了JavaScript文件中而已。现在，对于一个前端功能、交互复杂的SPA，JavaScript代码很容易膨胀（超过10万行）。很自然地，像服务端从JSP向MVC框架转换的过程一样，前端开发也出现了大量的MVC框架，比较典型的包括BackboneJS, AngularJS, EmberJS, KnockoutJS。总的来说，MV*框架的提出是为了解决前端开发的复杂度，提供一套规则组织代码、分层（MVC），通过合理的组织和分层，前端的代码职责明确、清晰，便于开发与测试。

9、JavaScript在服务器端的逆袭：Node

各大浏览器的竞争，使其引擎的性能不断提升，至今Google V8引擎的性能已经足以运行大型Javascript程序。在V8之上加以网络、文件系统等内置模块，形成了如今的Node.js。

随着Node.js的出现，JavaScript开始拥有在服务端运行的能力，它的异步本质使得Node.js在处理I/O密集型业务中优势凸显，而大多Web业务中I/O性能都是瓶颈。eBay、Yahoo、甚至Microsoft Azure纷纷引入Node.js以提升性能。Node.js的package每天都有几千万的下载量。这对前端工程师来说可是一个好消息，精通JavaScript的他们也能够做服务端开发了！虽然现实中并不是这样美好（服务端开发涉及的不仅仅是语言层面），但一种新的开发模式也因此兴起：浏览器端处理展现层逻辑、而服务端Controller这一层以及相关的模板渲染、路由、数据接口以及Session/Cookie先关处理实际上交给了Nodejs来做。通过Nodejs, 意味着前后端很多代码可以复用（例如数据验证逻辑），在需要SEO的场景下也可以选择服务端模板渲染。

但另一方面，JavaScript刚被引入到服务器端开发，其生态环境还未成熟，甚至大量的常用package主版本号都是0。长期用来实现页面逻辑，天生自由的JavaScript，在服务器端开发中，仍未形成统一的开发范型。不同开发原则和编码风格的应用，都将对Node.js项目的性能、可维护性产生重大影响。现在而言，服务器端javascript开发究竟是魔鬼还是天使，仍取决于团队中的开发者。

10、小节

Web技术依然在快速发展，Web本身的基础规范也在不断完善，HTML5和CSS3引入了更多激动人心的特性。回顾Web的发展历史，从某个角度看，就是抽象层次不断提高的一个过程，更高的抽象层次屏蔽更低层的复杂性，从而提高开发效率。每当技术发展到一定程度，出现某些局限性的时候，就会有更优秀的技术出现来突破这些局限性。其实这是计算机技术发展的一个普遍规律，比如高级语言的出现屏蔽了汇编语言的复杂性，帮助我们更快速的编程；数据库技术的出现使得我们无需关心物理存储和访问细节，写简单的SQL语句就能搞定，更进一步，ORM框架使得我们通过一条语句调用一个类的一个方法就能方便就行数据操作。我们应该让自己的技术视野具备一定的高度和广度，看到一门技术的发展规律和发展历程，这是一种技术修养的体现，其实跟人文修养是一样的。同时也应该具有一定的深度，因为我们往往站在比较高的抽象层次，比如今天你写几行代码就能把数据库创建好，增删改查的功能也自动生成好了，但是成为高手需要你对底层的原理机制有更透彻的理解，真正遇到问题的时候才能抽丝剥茧迎刃而解。

就说下前台这三个，html是名词，css是形容词，javascript是动词。三个互相配合才是一句句子

先普及用户通过 浏览器 访问网页 的过程：

网页内容是通过服务器运算得出的结果，将结果(网页代码)传输给浏览器，网页代码再通过浏览器运算(计算、渲染)，最终展示在用户的眼前的。

至此，我们知道了有2个运算过程：
1、服务器运算
2、浏览器运算

而让电脑(网站服务器、你的个人电脑)乖乖执行运算，就需要编写程序脚本即程序代码。
而编写代码的过程就叫做：编程。编写代码的人叫做：程序员(又戏称：程序猿、攻城狮)。

所以，由运算演变出：

1、服务器运算 -> 服务器脚本
2、浏览器运算 -> 浏览器脚本

在行业内，将 服务器运算 称为 后端；将浏览器运算 称为 前端；

后端更靠近服务器，前段更靠近用户，这样比较好记忆。

--------------------------------------------------------------------------------

然后我们再来按照上述两个类别，对其他的东西分类：

1、服务器脚本(后端)：

<code class="language-text">PHP、ASP.NET
</code>

以下是个人当时了解网站开发结构时的一份记录，看到本题就想贴出来，供大家一起参考和纠错，至于文笔和格式就不要苛刻了...毕竟只是一份简单的记录。

文字最后有一张整体结构图，如果没时间看字，希望这张图能有所帮助。
本文完整原文链接：网站开发从陌生到了解

正文：
内容说明

本记录描述本人了解网站开发的心路历程。

只记录个人对于网站知识结构的理解认知，还未涉及开发的具体知识。

本记录无法告诉你如何去做网站开发，但是或许可以告诉你要做网站开发都需要做什么事。

适合的读者

本记录适合对网站开发一窍不通的初学者认知网站基本结构和概念、学习网站开发如何入门，不适合追求技术深度的大神。

网站基本结构

首先，我们来认识一下网站的结构，看看自己在什么位置，看看我们还不知道的冰山下层有什么景象。

以上是一个最简单的概念，用户、前端和网站服务器三大部分，构成的网站最基本结构。
其中开发人员要关心的就是前端和网站服务器的相关开发。

当然，对用户而言，其脑海中对前端的概念通常简单的理解为浏览器...

网站前端

接下来，我们来拆解一下前端开发的结构。前端常用的开发语言和运行环境如下表所示。

要知道前端是网站和用户交互的主要接口，用户不需要管服务器是否靠谱，只需要任性的要求前端给自己展示自己要的东西就行了。这些用户要的东西就是有这几种开发语言写出来的。

• HTML 超文本标记语言 1989

一种文本、图片、链接等多元素编辑语言。

通过这种语言以网站页面为编辑区域，任意指定页面具有哪些元素，包括文字、图片、多媒体等。

并任意指定不同元素在页面的基本格式。如文字字体、大小、位置，图片大小、位置，链接颜色、状态变化等等。

这种语言利用标签标记，将多种不同类别的元素、甚至不同位置的文件关联在一起，因此叫做超文本标记语言。

并且通过定义元素的属性，设置元素的格式，最终形成整体页面效果，这种语言可以利用多种文本编辑工具编辑，例如记事本。只需扩展名修改为.html或.htm即可（这两种扩展名不是简单的缩写关系，详细本文不讨论）形成HTML文件。

HTML5就是HTML语言的最新标准，这种标准制定使页面可以表现的内容更加强大（至于具体如何强大，我不知道，目前我只知道HTML5是用来定义页面内容的就足够了）。

好像HTML5标准相关的两大的权威机构W3C和WHATWG之间对这个标准的细节确定存在巨大分歧，W3C背后有微软支持，而WHATWG背后有Mozilla、apple等公司的支持，这部分会涉及到网页程序和原生APP之间的纠缠，太过复杂，本文就不细说了。

最初的HTML只含有较少的元素属性，只能简单规定元素的基本格式，随着网站开发的发展，前端可以展现的元素格式越来越丰富，代码也越来越臃肿。因此逐渐形成了另一种新的语言CSS，将HTML语言中描述各元素属性的代码从HTML文件中抽离出来，使HTML专门描述前端页面具有什么内容，CSS语言编写的CSS文件专门描述HTML中的每个元素以什么格式在页面展示。

• css 层叠样式表 1996

CSS专门用于描述HTML中各元素用什么样式展示。HTML+CSS组合完成页面内容和格式的设计。

很多人喜欢使用HTML中的一种标签格式

来规定页面内容，再利用CSS规定DIV标签在页面摆放格式形成页面布局，因此很多网站会提到DIV+CSS前端开发这个概念。

CSS主要实现了页面内容的静态布局效果。虽然目前的CSS3标准的出现，使CSS强大到可以实现很多元素动态变化效果。

但是，更复杂的动态变化还是需要另一种专门的语言来实现，这就是JS语言。

• JavaScript 脚本语言 简称JS

js语言当前普遍被用于网站开发前端编程，在html提供的内容和css提供的格式之外，由js提供更复杂的界面展示效果和逻辑处理。在此存在很多可以直接使用的代码库，如jQuery等。

js语言可以实现对页面元素的复杂功能编程，例如页面的时钟数字变化效果，图片的走马灯轮换效果，粒子动画效果等。

也就是我们经常看到的炫目的页面动画基本都是js语言编写的。

除了可以看到的动态效果之外，js还可以实现用户看不到页面数据处理工作。例如数据加解密、文字过滤分析等。

这些内容都需要编码实现。

以上的html、css、js文件都会下载到用户的终端设备（计算机、手机、平板）上，在用户设备上被执行，因此，我们称它们在前端运行，这里的“前”是与后台服务器的“后”相对而言的。

• 脚本语言

上文提到js是一种脚本语言，此处插播一下脚本语言的概念。

脚本语言是一种逐句执行的直译语言，也就是这种语言不需要提前编译，直接由终端（如浏览器）解释运行即可。

脚本语言与其他编程语言的关键区别在于是否需要经过编译链接形成二进制机器语言。

我们知道，其他编程语言完成程序编写后，需要通过编译器的工作，将程序代码转变成二进制形式，windows系统中通常是.exe文件，这种文件可以直接在相应的操作系统中运行。

而脚本语言不需要编译,写完代码保存文件之后，即可立即运行。要实现这种效果需要提前在需要运行该脚本文件的系统中安装相应的脚本软件。

以JS为例,其脚本文件后缀为.js，要运行该脚本文件，需要运行环境中安装js软件。

通常我们的浏览器中已经集成了js解析标准，直接可以解析js脚本文件，因此，js脚本语言通常被用作前端页面特殊效果的编程语言。

当然,只要具有js的解释环境(js软件)就可以运行js文件，因此js并不是局限于前端开发。随着node.js等运行环境的出现，js语言逐渐适用于服务器端、客户端等多种场景。

关于一种语言是否适合某种场景,这取决于这种语言的最主要的特性是否适合该场景最需要功能,属于技术细节,本文不做分析.

同属于脚本语言的还有,PHP/ASP/JSP/python/ruby/VBScript/Perl等.

<code class="language-text">--------------------------------迷茫的分割线--------------------------------------
</code>

Web建站最核心最基础的还是HTML，CSS和JS。针对完全零基础的新手简单地说的话

• HTML 即网页元素的标签
• CSS 负责网页元素的外观呈现
• JavaScript 负责网页上的一些交互效果（如登录验证,弹出对话框等）

如果把网页比做成一张美女脸的话，那么HTML就是美女的整个脸部。包括头，脸，头发，眉毛，眼睛，耳，鼻子,嘴巴等。 CSS是美女的化妆品，可以让美女看起来更漂亮。JavaScript就是美女的眼睛耳朵和嘴巴用来跟人互动的。


所有网页都是用HTML呈现的

用Chrome浏览器打开任何一个网页，点击右键“查看网页源代码” 可以看到当前正在浏览的网页源码。点击右键“审查元素”可以看到当前页面的HTML结构及对应的的CSS定义

HTML的基本结构

几乎每个页面的HTML源码都包含了以下HTML标签。就好比美女的脸上都有两个眼睛一个嘴巴，至于脸上有没有涂眼影(CSS)，有没有戴假睫毛(其他HTML标签，比如图片标签)就因人而异了。

<code class="language-text">
  
     <title>这里是网页的标题,一般显示在浏览器的Tab上，不在页面里面显示</title>
  
  
     这里是网页的主体内容
  

</code>

海德格尔在《存在与时间》一书中指出，回答问题有三个层次。比如，对于昂贵的电报，
“你有xxx地址吗？”
“有。”（问题本身）
“出门右拐。”（所问之物）
“他不是个好男人！”（问题来历）

——

搜“怎么样培训前端工程师”，下面有个12周的培训方案。权益地讲，

给人阅读理解的叫文章（语境高于语法），给机器阅读执行的叫码（10010111101010010101），而双方都能读的，叫代码（语法高于语境），是人类控制机器做事情的直观方式。

上网就是服务器上的Web Service软件给用户电脑上的浏览器软件发了一个文件，文件格式是HTML，用记事本打开会看到“

文章

”，而浏览器则会把尖括号中的视为代码而非内容，从而看到粗体红色的“文章”二字和插入的图片。而font-weight:bold;color:red;就是CSS。

XHTML是某个历史阶段人们用来清理思路的，原因是早先的HTML(1-4)被杂乱地壮大了，于是把所有能让CSS分担的部分全都剥离出来。后来发现一是做的太过头了，很多纯形式的规范最终并没有实际意义，二是HTML本身并没有增进任何功能，于是应运而生了HTML5，语法上回归早先的HTML，又加了一堆功能。类似于把抽屉里的东西全倒出来再一件一件捡回去地打扫卫生，XHTML看似毫无意义的中间步骤，实际上一前一后人们的思路清楚不少。

然而无论用HTML+CSS进行浏览器展示，还是Web Service根据浏览器提交的网址发送这些.html和.css的文件，都需要一个必要的补充：脚本语言编写的程序。前文书提到了代码，而代码在这里主要有两种，一种是以ML结尾的标记语言，它是树状的数据结构标记语言，而另一种以Script结尾的脚本程序则利用这些标记对数据进行操作，是线性逐句执行的。在服务器端它可以是Perl/PHP/Python/Ruby/Node（多用于Linux，推荐）、JSP（Java）、http://ASP.NET（配合C#，Windows推荐），可用于权限验证等，而在浏览器端它只能是JavaScript，可用于优化交互效果等。

而这些脚本如果想保存所处理的数据，如果不想存在记事本里，那就只能用数据库了。开始人们为了偷懒发明了SQL（丰富而华丽的数据库操作语法，堪比操作它本身的脚本语言）这种查询数据库的方式，后来人们为了防止机器自作聪明/嫌机器太笨发明了NoSQL（从纯技术角度只是退步、只保留了很有限的增删查改等语法，但实际上是编程控制权的回收），包括但不限于K/V数据库如Berkeley DB（嵌入式文件数据库）/Memcache（服务式内存数据库）、文档数据库如MongoDB（服务式文件数据库）等。

——

有趣的是，零基础学习编程并不需要学过编程，但是需要用过别人编程的成果，即用过电脑、上过网，否则解释得再清楚，都其实根本不知道所讨论的东西是什么。 mark下 下班来答

--------------------------------下班啦，话说双十一之后还真是一点没感觉到闲啊----------------------
最好理解的，左边红框里面的是HTML，右边红框里面的是CSS

HTML，网页的基本组成，就是一系列标签，网页的结构层
CSS，网页的样式属性，网页的样式层，
JavaScript，能和编程沾点关系的编程语言，网页的逻辑层。

所以，HTML+CSS+JavaScript=一张完整的前端页面，额，之前有人说js不属于编程语言的，可以让他搞搞前端试试，要不然真以为自己本事多大呢#摔

HTML5里面的5应该只是HTML的一个标准版本，目前说的HTML应该版本号是4.x，估计是太长，所以直接简称HTML了，HTML5里面增加了新的标签，新的属性，也增加了一些对native的调用，所以现在用HTML5的页面更多一点。

比如你现在查看网页源代码,最上面一行是这个就是HTML5的简写方式，之前的HTML版本这个上面可是要写很多的#当时我还背过那一段代码#

XHTML，简单理解应该是HTML的一种比较严格的版本。
从继承关系上讲，HTML是一种基于标准通用置标语言的应用，是一种非常灵活的置标语言，而XHTML则基于可扩展标记语言，可扩展标记语言是标准通用置标语言的一个子集。#来自百度#

SQL，简单来讲就是一种数据库语言，structed query language，用来在大量的数据中根据相关条件进行查询，筛选。常见的数据库有mysql,sql server2000

PHP就简单啦，就是拍huang片嘛，当然拍huang片也是讲究技巧的，因此诞生了PHP，不过目前因为岛国势力的进一步强大，个人感觉国内拍huang片的工作不是很多啊，出了某度，我还真没见过有那个公司招PHP的人。
------------------------------------------编不下去了----------------------------------
PHP，和前端相对来讲，PHP就是一种后端语言，用来运行在服务器上面，接受网络请求，并分析请求中的request内容，执行相对应的代码，返回相对应的数据片段，一般来讲，PHP中可以嵌套SQL语句，也可以嵌套HTML代码，然后用SQL进行数据查询之后，PHP再将数据用HTML进行渲染成完整的HTML页面，返回给浏览器，即可完成一次网络请求，将结果展现在用户面前。

http://ASP.NET，这两个应该分开吧，ASP是一种编程语言，.NET应该是一个框架，是微软公开的一种编程语言，提起ASP就不得不将IIS了，是针对ASP微软开发的一款服务器软件，和Apache,Ngnix都是服务器的一种。

关于.NET,有时候有些人分不清一大堆代码，到底应该称作“库”还是应该称作“框架”，最简单的，库其实是一些方法的一个集合，将一些方法整理之后放在一起，供其他用户使用，这样子的代码片段叫做库，框架相比库来讲，就是提供了一套完成的工作流程，用户只需要在他的框架上面进行代码添加，即可让整个项目跑起来，而不是提供了简单的方法，就前端而言，MVC,MVVM之类的框架有：Angular.js，backbon.js，avalon.js，react.js，代码库比较有代表性的就是：jQuery，Prototype....

Web Services这个还真不清楚，难道不是提供web服务的一系列组件？
--------------------------------------------------------------------
我次奥，感觉又下雨了，赶紧回~ 其实被折叠的 @贺师俊 说的对，你需要的是基本概念模型
所以我想你真正想要的是这个
20 Things I Learned About Browsers and the Web
Google Chrome 浏览器小组的《关于浏览器和网络的20项需知》
和这个
网站构建 初级教程
w3cschool的标准教程 第一张图简明扼要回答前三个~ html css javascript一个网站的门面组成



来源：headfirst javascript P6
headfirst 系列书籍真是入门利器
Head First HTML and CSS (豆瓣) 亚马逊有中文版