这就是前端不得不说的那些玩意呀，设计师们碰上这些语言总是很不给力，也挺多程序员们对这些东西嗤之以鼻。但孤独的前端们坚信，这些东西是多么地重要而有深度。随着近年来 GOOGLE 在前端上的一个又一个神话，人们也终于开始正视起这些东西：HTML/CSS/JS。

这篇讲的是前端的知识架构，但基本也就只讲了HTML/CSS/JS。许多学习方法上的东西，还有与其它领域的关系，准备之后再讲，这篇东西感觉越写越是不给力，像是篇入门教程，水平不够大家请谅解下哈……

下一篇预计是：前端的学习方法及经验

【分离分工的思想】

程序设计上有MVC这么一说，没听过的童鞋们可以谷歌下，其核心就是逻辑与内容分离。同样的，前端上面，也会把不太一样性质的工作给分离开来，所以，我们的工作看起来就有这三块：

• 文档：内容，注意，内容为王。HTML（超文本标记语言）。
• 交互：人与机器之前的交流。Java Script（爪哇脚本？呵呵，其实他基本没有什么通用的翻译）。
• 样式：内容的视觉展现的实现。CSS（层叠样式表）。

【后端与设计师们】

这也是不得不提的，前端跟这两类人打的交道最频繁，也经常兼掉了一部分他们的工作。没办法，前端就是如此命苦。

后端：在后端程序员看来，浏览器能看到的一切一切，都是内容，而逻辑，是用户、浏览器、搜索引擎都看不到的东西，是那一个又一个的流程、计算与结构。所以，在与前端的合作中，后端程序员更多负责的是内容，如何将内容更加高效地提供与处理，就是他们研究的核心。

界面：作为夹心饼干的另一片，她们做的就是界面设计的那些事儿，去注重怎么样的视觉设计与信息组织方式能更符合网站的定位与用户的品味，用线框图画出基本原型，跟产品策划的童鞋们PK一下，一致通过的话把PSD图搞出来，然后让咱前端慢慢去捣鼓，把图片给漂漂亮亮地弄成真正的网页应用出来。

【文档】

是的，你所看到的一个个标准的“网站”、“页面”、“网页程序”，等等，只要是标准的，他就是个文档，就是个页面。而上面会有一个又一个的链接，有可能会跳到任何你想得到的地方去。所以，HTML的中文译意就是：超文本标记语言。

• 其实他描述的是文本，所以他是文本语言。
• 他上面可以有跳到其它地方的链接，所以他是“超文本”。
• 他的结构单元是标记，比如：一个一号标题 <h1>标题内容</h1> ，就有一个标签的开与闭，所以，他是标记语言。

每个标签都只有两样东西：一是内容，一是属性。比如超链接：

 <a href="www.qq.com"> 腾讯首页 </a>

a是标签名，“腾讯首页”是标签内容，而 href=”www.qq.com”就是标签的属性。

标准的（非标准的就不管啦）网页的内容，就是这样的超文本。非常的简单直接，于是，搜索引擎和浏览器们就不用去困惑这个色彩是什么玩意，要怎么使用它。他们会知道，哦，这是一个一号标题，估计是整个文档的标题。

而标签的嵌套（标签里的标签），则可以很好地表达出整个文档的层次结构，无论是人还是机器，都能很好地识别。

HTML头上的阴影

但是，也因此衍生出来了一些黑暗面：很多人只顾人看到的，却不管机器看到的。于是，表格布局与泛滥的DIV/CSS，把许多页面弄得文档不像文档、应用不像应用、图片不像图片，加载速度慢又耗资源……

怪胎！

于是，网页重构开始重新被审视，HTML不应该只为了样式而存，更应该能够为电脑认可，于是，计算机与互联网才能更好地改善我们的生活。

所以，请用<p>来表示段落，用<em>来表示强调，用<h1>~<h6>来表示标题，用<ul>或<ol>来表示列表，等等等等。

所以，世上开始有了XHTML，与HTML5规范等等，要求我们严格地遵循HTML的语义与语法规范，做出真正能让搜索引擎、浏览器与用户都感到舒服、满意的作品。

所以，页面重构领域有了页面重构师，尽管前端也常常兼职了这事儿。

【样式】

CSS管的就是页面的样式，她叫“层叠样式表”。早些年头，人们会直接在html上写样式，但却发现这么做不太好维护，而且会造成关注内容的机器们的困惑。于是，样式被独立了出来。
如果我想让贴子的内容的一号标题改变背景颜色，就可以这么写：

#post .content h1{background:green;}

花括号之前的一串字符是CSS中的“选择器”，用于向浏览器说明需要对什么标签使用这个样式。比如上面的选择器，就是选择了“ID为post的元素里的，class为.content的元素里的，h1标签”。

这就是这么一个更改样式的层叠样式表的代码。他没有逻辑，只有纯粹的说明。所以，认为CSS很难的设计师们，你们只是对文字的恐惧，压过了你们的求知欲罢了。

而一大把的样式写在一起，是很难管理的。于是，各位受尽折磨的页面重构师们将样式分为了以下几类：

• RESET 重设：将各浏览器的默认样式调成一致的，比如最经典的这句：

   * { margin:0; padding:0; }

  ，就是把页面里所有的标签，外边距与内边距都设为零。

• Typography 布局：也可以理解成WORD里的“段落格式”，但又不太一样。他管的都是位置，包括偏移、间距、布局方式、字体、行距等等的事。
• Image & Color 视觉：管的就是图片与颜色的事

个人看来，模板化的开发，视觉与布局分离开来，才能承受不断更改的主题。

本来来说，CSS并不是什么难的东西，难是难在浏览器们对同样的样式表却有着不同的表现，尤其是IE！万恶的IE总是不依常理出招，于是前端与重构们总是在这里苦不堪言哪苦不堪言。

IE下有着诸多著名的BUG，如：hasLayout问题，双外边距浮动，重复字符，躲猫猫，相对定位中的绝对定位，等等等等的BUG。这些BUG，让CSS入门的人们是多么痛不欲生！

于是，对于IE，衍生出了条件注释、与一堆类似!important、子选择符、* html等等的hack方法，专门用于治理IE下的不同表现。何其蛋疼！

【交互编程】

其实，这才是“前端”的最最核心：Java Script。也正是这玩意，使得我们更多像个开发人员，而不是设计师。注意，javascript 跟 java 没有任何联系，除了语法上有点点像。

有了javascript，整个页面开始灵活起来，可以有流畅的有如影片般的特效，可以有像桌面应用那样的操作界面，弹窗、标签页、日历、拖曳、渐变，只有想不到的没有实现不了的。

这里的内容，可能没语言基础的人会比较郁闷：里面有挺多编程的概念，比如事件、函数什么的。

用John Resig《精通JS》里的第一章里的一句代码来开始：

window.onload = function(){
	alert("hello world");
}

这段代码，是给浏览器的window对象的onload事件绑定了一个弹窗，弹窗内容是hello world :)。

C语言学得比较好的人可能会比较郁闷，怎么可以把一个没有定义的函数赋值给了一个结构体里的变量？？

但这段代码里说明了很多东西。比如，JS的事件编程，JS里有像Window这样的原生浏览器对象，JS是个弱类型语言，函数可以当成对象或变量随意地赋值与传递，等等。

而且，JS是脚本语言，这就意味着代码是跑到哪里才是执行哪里的，所以有可能你写了好几天的代码在页面里根本没有机会运行，因而也压根不会报错。说不定，哪个函数在执行的时候，才发现这个函数根本不存在，等等。

这就是面向函数编程的性质，她使得JS的编程极其灵活也相对地容易上手，也不需要什么环境上的准备。但，却会因而产生很多很多的糟糕的代码，让整个页面疲于奔命，却事倍功半。

然而，JS的语言特性，并不是最核心需要注意的东西。我们应该注意的，是DOM，与AJAX。