刷新你的技能树（二）HTML5与CSS3

发表于 | 更新于: | 分类于 | | 阅读次数:

之所以把这两部分放在一起说，是因为这两部分和JavaScript相比来说要相对简单，而且也没有太多需要特殊理解的部分。另外，网上的这两部分教程特别丰富，学习成本相对较低。

HTML5

其实HTML5就是在之前的HTML之上扩充了一系列标签、属性、Canvas绘图能力、设备访问以及多媒体等先进技术，同时配合CSS3，可以实现很多过去难以实现的功能。
由于HTML5向下兼容HTML4.0，因此，学习起来相对比较简单。

CSS3

CSS3是CSS的升级版本，且仍然在不断完善的过程中。与原有CSS技术的最主要区别就在于其模块化的特点，各个标准制定组织可以快速的迭代其负责的模块，从而推动整个技术的不断进步。
学习CSS3的主要困难在于难以掌握众多的模块更新进度，但只要随时关注其版本更新情况及浏览器支持现状，问题同样不大。
因为CSS3本身并没有什么逻辑性，因此编写CSS是一个很容易出现错误的过程。有鉴于此，目前比较流行的方式为通过预编译方式生成CSS文件。CSS编译器一般采用LESS(Leaner Style Sheets)或者Sass (Syntactically Awesome Style Sheets)编译器进行编写，并通过编译得到最终的CSS文件。两者相差不大，任意选择一种进行学习即可。

LESS语法示例
1
2
3
4
5
6
7
@width: 10px;
@height: @width + 10px;

nav {
  width: @width;
  height: @height;
}
LESS编译结果
1
2
3
4
nav {
  width: 10px;
  height: 20px;
}
Sass语法示例
1
2
3
4
5
6
$width: 10px
$height: $widht + 10px

nav
    width: $width
    height: $height
Sass编译结果
1
2
3
4
nav {
  width: 10px;
  height: 20px;
}

可见，其实两者基本上都比较类似，选择哪个，需要根据采用的框架和个人喜好确定。