编程不难，人人都是“程序猿”-2从框框开始的编程

我在第一篇文章里曾经说过，我做了一家互联网公司。所以，我主要接触的代码是网站类的。

在我看来：

网建类代码就是最适合入门的一种编程方式。

为什么这么说？因为人的热情其实是建立在成就感之上的。网建类代码初学时没有复杂的编译工具，没有繁多的编译环境，很容易能看到的结果给人带来的成就感爆棚，更有让人进一步入坑的动力。从傻瓜式的框框开始（HTML），到涉及美观的样式表（CSS），再到特效（CSS、Flash、AS、JS），到需要互联网通信基础的Ajax（JS），甚至到复杂计算的后端代码（ASP、.net、PHP、JSP、Python、JS、Perl、Go等等）。对没错，JS不单单可以做前端，后端一样可以，因为我们有一个强大的东西叫Node。

如果你想深入，协议、漏洞、端口、策略、服务器、Apache、SSL……各位大神在向你招手示意，如同古代的烟花之地，呼喊着你：“大爷来玩儿呀！”。一旦你入了坑，保证你欲仙欲死，欲罢不能。

今天开始，我就从网建类代码开始给各位谈谈怎么入坑编程，怎么培养兴趣。我会在其中穿插部分代码的解析，但是不会做代码教程，那是另一个系列的事情了，并且网上的教程那么多，如果有兴趣，大家也可以自行寻找。同时我也准备花上一些时间（三个月到半年），做一个稳定的网站、空间开放给大家，随时可以让大家一起学习交流。

一、今天开始画框框

HTML，一种超文本标记语言。或许从严格意义上来讲，不应该算是一个完整的编程语言。因为它并不涉及到变量和计算，有的仅仅是一些约定俗成的显示方法。从某种意义上讲，我更喜欢叫它“积木”。

为什么叫它积木？因为HTML只是把内容放在了约定好的位置发给浏览器，然后浏览器通过解析，显示出来。并且在没有样式表的帮助下，积木的形状只能是方的。你仿佛会听到CSS的嘲讽：“想要圆的，来求我啊。”

记得刚开始做网页的时候，那个时候H5和CSS3还没流行起来，当时的网站上的活泼形状，大都以PNG图片的形式展现出来。这就造成了一个网页数据量巨大的问题。所以那时候的网站，很少有图片、多媒体的内容在。并且为了方便，那个时候做网站基本上是表格的嵌套。结构是规整了，但是太过死板，解析力也较差，每次回想当时的情况。我总觉得，我的命是DW给的。因为当时很少有所见即所得的工具。给你一个记事本做一个网站，说起来很牛，但是，要死人的。

后来随着CSS的逐步兴起，div被广泛使用。可以看看现在的网站，div就像一个个的小积木（当然还包括了诸如img、p、video等等元素），逐渐堆积起来。

来看一下html的基本结构。每一个标签，我们认为它为一个节点。那么整个Html代码都是被html节点包含在内的。在下面一般有两个节点：head和body。head里面包含着一堆奇奇怪怪的东西，初学者或许不用太多了解，只需要知道网站的标题要改title就可以了。而浏览器最大的面积，都留给了body，在body节点里，你可以写入各种各样的积木。剩下的任务就是浏览器的事情了。具体怎么写，网上搜html，多的是。百度还是很强大的。

二、我的框框要美观

如果大家尝试了html的编写，尤其是使用了div之后，你会发现所有你想展示的内容，全部堆在一起，毫无美观可言。想要美观怎么办？CSS就能解决你的问题。我们可以从内联式的代码做起。写在标签里，但是很直观，添加上浮动（float），限定宽（width）高（height），做好定位方式（position），摆好位置（top、left、right、bottom），加上背景（background），改改字体颜色（color），换换字体（font-family），字体大小（font-size），调整一下边框（border），间距（margin），内间距（padding）。看看，整体是不是顺眼了许多？

如果想了解更多，可以研究一下CSS的参考手册，这种东西，百度会提供很多给你。

当然，有个很好玩的东西，如果我们在CSS里加入如下代码：

*

你就会发现你的网页出现了很多奇奇怪怪的东西（默认隐藏的所有信息全部被显示出来，包括并不限于head节、link节、script节）。

三、让框框动起来

就算加入了样式信息，我们总会觉得网页太过死板了，不活泼。所有东西都死死地呆在那里，死气沉沉。

我们总想加入一些效果，比如点击弹出，比如指上去变色，比如下拉菜单。

ok，CSS可以帮你完成一些，各式各样的伪类选择器会满足你，或许animate和transition也是一种不错的方案。当然你也可以尝试一下“~”。

但是最好的效果，还是JS来完成。JS这个东西，从万人嫌弃到众人追捧，从单单的前端代码到辐射到服务器端，鬼知道它经历了什么。

但是JS着玩意儿，的确不太适合初学者。但是没关系，jQuery帮你解决了很多烦恼。好多功能性的东西已经被封装好了。几百行的代码变成了一两行，也就没那么麻烦。刚开始，特效可以研究一些show、hide之类的（包括slide、toggle等等），方法可以有click、hover等等。对于对象的把握，jQuery的选择器和css联合起来，很方便。

四、没有内容的框框是没有灵魂的

当我们积木基本搭好，我们会发现我们的内容盖起来很麻烦，增加内容就要写一个页面，天啊，不会站长都要这样吧？那不是很烦？

当然不是，我们有CMS呀。没有这东西，真的要死人了。CMS（Content Management System，内容管理系统），着玩意说来就厉害了，我们可以管理我们的图片、文字、上传的文件等等。就是管理员和数据库的桥。

数据库怎么选？Access、MySQL、SQLserver、SQLite等等各有优缺点。最好要配合后端代码选择。

但是数据库和前端的桥在哪里？我们就要选择一个服务端代码了，ASP、.net、PHP、JSP、Python、JS、Perl、Go等等。乱七八糟的看起来很烦，但是主流的还是集中在ASP、.net、PHP、JSP这四个。个人建议，如果做小规模的部署，可以考虑ASP+Access，简单快速，但是技术略显陈旧。如果做一些规模大一点的，还是建议PHP+MySql，可以做到费用最低，服务器系统，可以用linux，发布用Apache，代码PHP，数据库MySQL，全部是免费。同时PHP和MySQL总在更新，安全方面，都是可以保证的。

五、怎么让乱七八糟的代码好看

当我们对代码的了解差不多以后，看着手上的乱七八糟的代码，总会感觉到头疼。尤其是写下了各种内联样式，JS代码以及加上了混编的服务器代码。天知道要怎么办。

这个时候我们就要做代码的整理和注释了。同时，还要有MVC（Model View Controller，是模型－视图－控制器），讲内联样式表整理归纳，做成类、ID等等。JS代码检出做成单个文件并压缩。限制文件数量，MVC模型引入。这时候，你就已经彻底入坑了。

代码的坑很大，进来，不好出去。 网建，成就感随时随地会出现，如果你愿意，学习一下，经常给自己一点小惊喜。