http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html?bsh_bid=657901854
HTML代码简写法：Emmet和Haml
作者： 阮一峰
HTML代码写起来很费事，因为它的标签多。
一种解决方法是采用模板， 在别人写好的骨架内，填入自己的内容。还有一种就是我今天想要介绍的方法----简写法。
常用的简写法，目前主要是Emmet和Haml两种，本文都将加以介绍。
这两种简写法，功能相近，各有特点。考虑到Haml基于Ruby语言，我建议Ruby/Rails项目使用Haml，其他项目使用Emmet。
一、Emmet的用法
Emmet是一个编辑器插件，官方网站提供多编辑器支持。我一般使用vim，下面就以vim插件举例。
首先，按照vim插件文档进行安装。然后，新建一个文本文件，键入
按一下"<Ctr+y>,"（先按ctrl键+y键，然后再按逗号键，不同的编辑器有不同的转化键），这一行就立刻变成下面的样子。
这就是Emmet的基本用法：先写简写形式，然后用"<Ctrl+y>,"将其转成HTML代码。
Emmet支持的简写规则，类似于CSS选择器（大写的E代表一个HTML标签）：
请看下面的例子。
对应的HTML代码为：
Emmet还提供了连写（E*N）和自动编号（E$*N）功能。
对应的HTML代码为
下面是另外一些简写的例子，读者可以自行测试，看看它们转化成怎样的HTML代码。
Emmet使用按键"<Ctrl+y>/"，让一个代码块变成HTML注释。更多功能请参考以下链接：
二、Haml的用法
Haml不同于emmet，它是一个命令行工具。需要先安装Ruby语言，再安装Haml。
使用时，用命令行将haml文件一次性转为html文件。
haml的简化规则如下：
下面是Haml的代码示例，代码块的层级关系用缩进表示。
对应的HTML代码为：
在Haml中，"/ "起首的行表示HTML注释，"-# "起首的行表示Haml注释。 更多功能请参考以下链接。
（完）