网页前端的相关技术整理

When it comes to 网页前端，我们的第一反应应该是HTML/CSS/JS三个大的方面，作为一名技术小白，正朝向全栈工程师的方向努力，在这里安利一下这三个技术的基础知识吧。

---

HTML

超文本标记语言（英文：HyperText Markup Language，HTML），also known as ‘How to make love’。讲到这门高深的技术首先要从它的历史谈起。

大概我小的时候，主流的HTML版本是HTML4，这个版本的标签实在是很古老了。后来大神们研究出来了XML，这个技术相比HTML，它的语法更加规范，过于规范。另外一群人研究出了XHTML，XHTML在HTML的基础上增加了一些标签，完善了HTML的内容。至今为止，XML和XHTML的发展趋势都是HTML5，HTML5在前辈的基础上增加了很多多媒体的标签，例如nav、video等，据说做出来的效果更炫更酷。

HTML在网页前端所做的贡献是“内容”，它通过标签及其层级关系定义了网页应该显示什么内容，这些内容互相之间是什么关系，除此之外，无它。

由HTML衍生出来的一些更加方便工程师编码的技术包括HAML，个人认为HAML的语法简直比它爸爸精简了很多。例如，在HTML中，我们需要这样写：

<h1>Hello world</h1>
<p>What's this?</p>
<h2>PHP is a good language</h2>
<p>This is an example of HTML</p>

在HAML中，我们则可以这样：

%h1 Hello world!
  %p What's this?
%h2 PHP is a good language.
  %p This is an example of HAML.

看起来没差什么，不过朋友，代码量多起来就知道不用写闭合的好处了。

---

CSS

层叠样式表（英文：Cascading Style Sheets，CSS），目前主流的版本是CSS2.1，更多的tutorial有CSS3，这是趋势，但是由于浏览器兼容以及各种问题，似乎完全步入CSS3的时代还需要3-5年。

CSS在网页前端定义了“样式”，这包括文字的样式、图片的样式、边框、间距、blah blah…（能说一天，自己去找教程）。传统使用HTML在做网页的时候，人们发现，这就是一张白纸上面有些黑色的文字，浏览器图标都有颜色，为什么网页的阅读体验这么差？于是乎，CSS应运而生。通过CSS的帮助，可以将文字设置成各种样式——红色的绿色的、加粗的倾斜的。甚至可以将整个页面重新排版，这一类的可以在这个模块，那一类的可以扔在网页最下面，等等。今天看来这是司空见惯的事情，但是当初那个年代，无疑是一场革命。

个人认为CSS的精髓在于它的选择器，那么何谓选择器？顾名思义就是你想修改网页的哪个部分，通过选择器选中它，并且做修改，就完成了对这个部分样式的定义。选择器对于id、class等都有约定的语法，例如：通过id选择#demo {} ，通过class选择.demo {} ，具体的去看tutorial吧，这里不赘述了。

由CSS衍生出来的样式技术同样也有很多，例如SASS、LESS，但是我只用过前者。

SASS在CSS的基础上支持定义变量，变量以美元符号($)作为开头，用冒号(:)赋值：$blue: #3bbfce; 。想象一下，我们可以通过对blue赋值，然后在下面都读取这个变量blue的变量，那么修改颜色的时候只需要修改一行代码就可以了，似乎传统的CSS需要查找所有的blue，这会让我发疯的。

SASS还支持Mixin，Mixin包含一段合法Sass代码，类似于C语言的宏定义。调用Mixin时，解释器会将Mixin扩展成它所包含的完整的Sass代码，因此可以有效地减少代码重复，从而写出更加干净的代码。传统CSS不支持Mixin，因此重复和类似的代码必须挨个书写。

@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {padding: 2px}
}

#data {
  @include table-base;
}

上面的代码会被解释成：

#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

---

JAVASCRIPT

看起来这是JAVA的远房亲戚，不过朋友，JAVA和JS完全是巴基斯坦和卡巴斯基的关系。

JS在网页前端定义了“行为”，或者叫“动作”、“表现”，你可以控制你的网页在用户触发各类动作的时候的表现，例如：在你的网站上显示一个sohu的链接，当用户单击这个链接的时候，网页跳转到sina（哈哈…）；或者让用户在关闭你的blog的时候，自动弹出来一个新的blog网页，让他永远都关不掉（这样很不道德）。看起来确实是很酷的。

但是不多说，让我演示一下如何使用JS输出“hello world”：

<script>
document.getElementById("demo").innerHTML = "Hello world";
</script>

。。。你这是在逗我？我只想puts "hello world" 而已！！需要写这么多东西？

确实，连他的developer都在说，“javascript是一门一夜之间写出来的语言”，本身并没有什么规范性，如果不是有两个“儿子”争气，恐怕也离死不远了： node.js 和 AJAX 。关于 node.js 和 javascript 的关系，你可以理解成 ruby 和 rails 的关系，我一个朋友CK说过，会了 node.js 你就是一名全栈工程师了。关于AJAX，我在另外一篇文章中有介绍，请点击上面的link。

这里还想说一下JQUERY ，这是一个JavaScript的Library，由于原生的JS语法过于繁琐，可读性也很差，JQUERY逐渐有取代原生JS的趋势。甚至没有JS基础的人，直接去看JQUERY也可以hold住。JQUERY的选择器沿用了CSS的选择器，这使得网页前端开发技术的学习更加简单，我们来看一个JQUERY 的例子：

$().ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
});

简单解释一下：当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。接下来选择所有的p（段落）标签，当鼠标发生click（点击）动作时，会触发一个方法，这个方法通过一个匿名函数来定义：当鼠标点击这个段落的时候，会触发hide()方法，使段落隐藏。

---

很浅显的网页前端的介绍，需要熟练掌握还真是需要熟练的过程，个人认为这三个技术中的小细节太多太杂，目前我也是处于现用现查的阶段，写出来算是mark一下并将所知share给大家。