致新手：如何形象的理解HTML、CSS、javascript及后台语言和数据库的概念

从去年开始，一直在自学H5的基础知识，虽然从事WEB开发已经15年了（天哪，这么久了？这些年我都做了些什么！），但基础一直不牢固，于是有了重新学习基础的想法。可是通过一段时间的学习，发现自学的话，如果没有及时的反馈和一种有效的奖励机制，很难坚持下去，即使硬着头皮坚持下去，也是没了多达的兴致。于是年前一直想开始写教程，有一种强烈的想要将自己的知识分享出去，并通过分享来进一步提高自己的能力。可是经过了若干天的思索，仍然没能找到从哪里入手，索性我从自己最熟悉的几个地方，随意说起吧。

本文面向对象为零基础的WEB开发人员。

接触WEB开发的朋友，最常遇到的几个概念，就是HTML、CSS、javascript以及各种后端语言，如PHP、JSP、.NET等等，还有MYSQL、SQLSERVER、ORACLE等数据库。那么这些语言和数据库都是起什么作用的，又是如何协作，构成一个动态网站（或系统）的呢？

一、我们先说最简单的，由HTML、CSS和JavaScript构成的静态页面说起。

所谓静态页面，并不是说页面不会动，而是由是否调用数据库来确定的，用到数据库了，就是动态网站，没用到数据库，就是静态的。可能有前辈指出，文本文档（txt）也可以存储数据形成动态网站啊，这时候我觉得将文本文档归结为简单的小型数据库更确切一些。

静态页面就像一间客栈，如果我们盖一个房子，需要什么？需要搭建房屋的框架，需要装修，需要有门锁窗户。

在搭建静态页面时，HTML就是一个房屋框架，他搭建了一个基本的网页框架，CSS负责装修，他把房子弄的好看些，当然有时候你可能想让电视背景墙有个好看的图案，CSS可以调用图片文件来解决，HTML也可以叫它的小弟IMG标签来办。
房子装修完了，要安装门窗，这时候我们就不得不去找JavaScript先生帮忙了，他会让你的门窗可以打开，可以限制门的高度，个子太高的不让进来，太胖的不能进来，甚至还能装个简单的密码锁，虽然这个密码锁非常容易被破解。
这种互动的部分，一般都依靠JavaScript先生来帮忙，当然你有时候也能让CSS的孙子CSS3来完成，不过这孙子脾气有点怪，和很多浏览器都不和（兼容性不太好，尤其是和老一辈的浏览器们），不过最近听说现在随着年纪增长，已经越来越被浏览器们接受了。

说的稍微细致点，HTML是一对一对诸如：

<div>Hello</div>

的标签，他们就相当于组成了一面墙，你除了能在这面墙上写上“欠债还钱”的字，还可以挂点照片：

<div><img src="img.jpg"></div>

当然除了放图片，你还可以放表格，放音频，放电影，放电视，放鸡蛋灌饼，放葱花，什么都可以放进去。
可是放进去是一回事，他们都是那么堆在一起的，要想好看，还必须靠CSS来设置，CSS可以控制图片大小、可以控制边框和背景颜色，可以控制边距（这是它最擅长的，如果没有它的控制边距的功能，你这所房子的电视机将会被安装工人默认挂载墙的最左上角）。
这是一句简单的CSS代码：

.wall{
    background-color:#000;
}

这句从字面意思看，就是所有的墙的背景颜色都是黑色的。嗯，CSS刷墙的速度的确是很快。

那么JavaScript具体能干点什么呢？比如，如果你要把所有身高超过2米的人拦在门外，不让进来，就交给JavaScript来办吧。
他是这么干的：

var obj = document.getElementById(door);
if(obj.value < 2){ // 如果值小于2，就让进来
    alert("欢迎光临！");
}else{
    alert("这扇门不让身高超过2米的人进，请出去！");
}

稍微复杂了一点，但其实也不难理解，第一句的意思是，找到这段代码要控制那一扇门（哪一个输入框），然后进行一个简单的判断，如果输入的值小于2，就提示“欢迎光临”，如果不小于2，就让他滚出去。

当然，JavaScript很能干，他的亲戚AJAX更聪明，不过我们今天只说最基础的，JavaScript除了能判断大小，还能用正则做手机号码的验证啊，页面内容的变更啊等很多东西，许多的网页游戏，都可以用H5+JS的方式开发出来，就知道这货多牛叉了。

如果我们理解了静态页面的构造，下面的概念应该更好理解了。
若干个静态页面，构建成了一个静态网站，就像许多个房子，组成了一个村落一样。

但是，我们发现，目前建立的这个静态的房子，里边一切都是设定好的，如果你住在里边，想看看电视，对不起，一个台也没有，为什么？因为还没接好后台部分。

二、动态网站，让你每顿迟到不一样的包子

我们前面说过，动态网站其实就是静态页面，加了个数据库，但是，静态页面是如何去连接数据库的呢？
由于数据库这个东西，相对是个比较复杂的概念，我们先不说那些表和字段神马的概念，先把数据库想象成村口的一个包子铺，你把钱给了老板（发起请求），老板给你包子（获取数据），这样就完成了数据读取操作。但你有没有想过，在这个过程中，如果没有“你”这个角色，拿着钱，跑到包子铺，买包子，然后拿回来，这个过程就完不成，所以“你”，其实扮演了后端语言如最流行的PHP的角色，后端语言就是干这个用的。

说白了，房子盖好后，如果想能随时吃到热包子，就需要用后端语言，不断的去包子铺（数据库）买包子（读取数据），如果你不计较是什么馅的，那么你房间的桌子上的包子，就会随着包子铺老板给你的包子发生变化，今天是韭菜的，明天是茴香的，后天是面馅的（也叫馒头）。

这是我写的第一篇教程，写的很烂，很啰嗦，所以再总结一下：

如果我们将一个网站（或系统）想象成一个房子的话，HTML就是泥瓦匠，负责将房子盖起来（构建基础页面框架），CSS是装修公司，负责房子墙面的装修，JavaScript是一个管家，负责对进出房子的人进行验证，后端语言（如PHP）就像一个仆人，负责去包子铺（数据库）买包子（读取数据）。
这样，当有客人来你的房间做客时，客人会看到你每天吃的都是不同的馅的包子。这类似于我们打开一个新闻网站，页面会动态的更新为当天的新闻一样，每顿饭都可以不一样。