HTML代码简写法：Emmet和Haml
HTML 代码写起来很费事，因为它的标签多。
一种解决方法是采用模板， 在别人写好的骨架内，填入自己的内容。还有一种就是我今天想要介绍的方法----简写法。
常用的简写法，目前主要是 Emmet 和 Haml 两种，本文都将加以介绍。
这两种简写法，功能相近，各有特点。考虑到 Haml 基于 Ruby 语言，我建议 Ruby/Rails 项目使用 Haml，其他项目使用 Emmet。
一、Emmet 的用法
Emmet 是一个编辑器插件，官方网站提供多编辑器支持。我一般使用 vim，下面就以 vim 插件举例。 首先，按照 vim 插件文档进行安装。然后，新建一个文本文件，键入
html:5
按一下"<Ctr+y>,"（先按 ctrl 键 +y 键，然后再按逗号键，不同的编辑器有不同的转化键），这一行就立刻变成下面的样子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
这就是 Emmet 的基本用法：先写简写形式，然后用"<Ctrl+y>,"将其转成 HTML 代码。
Emmet 支持的简写规则，类似于 CSS 选择器（大写的E代表一个 HTML 标签）：
1. E 代表 HTML 标签。
2. E#id 代表 id 属性。
3. E.class 代表 class 属性。
4. E[attr=foo] 代表某一个特定属性。
5. E{foo} 代表标签包含的内容是 foo。
6. E>N 代表N是E的子元素。
7. E+N 代表N是E的同级元素。
8. E^N 代表N是E的上级元素。
请看下面的例子。
p
p#main.item
a[href=http://wikipedia.org]{维基百科}
div>p
div+p
p>span^div
对应的 HTML 代码为：
<p></p>
<p ></p>
<a href="http://wikipedia.org">维基百科</a>
<div>
<p></p>
</div>
<div></div>
<p></p>
<p><span></span></p>
<div></div>
Emmet 还提供了连写（E*N）和自动编号（E$*N）功能。
li*3>a
div#item$.class$*3
对应的 HTML 代码为
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<div ></div>
<div ></div>
<div ></div>
Emmet 使用按键"<Ctrl+y>/"，让一个代码块变成 HTML 注释。更多功能请参考以下链接：
* Zeno Rocha, Goodbye, Zen Coding. Hello, Emmet!
* Sergey Chikuyonok, Zen Coding: A Speedy Way To Write HTML/CSS Code
* Joshua Johnson, 7 Awesome Emmet HTML Time-Saving Tips
二、Haml 的用法
Haml 不同于 emmet，它是一个命令行工具。需要先安装 Ruby 语言，再安装 Haml。
gem install haml
使用时，用命令行将 haml 文件一次性转为 html 文件。
haml input.haml output.html
haml 的简化规则如下：
1. !!! 5 代表 <!DOCTYPE html>
2. %E 代表 HTML 标签。
3. %E#id 代表 id 属性。
4. %E.class 代表 class 属性
5. %E(attr="xxx") 代表某一个特定属性。
6. %E XXX 代表插入标签的内容。
7. %E %N 代表N是E的子元素。N如果写在第二行，需要缩进。
下面是 Haml 的代码示例，代码块的层级关系用缩进表示。
!!! 5
%html{lang: 'en'}
%head
%title Haml Demo
%body
%h1 Hello World
%a(href="http://wikipedia.org" title="Wikipedia") 维基百科
对应的 HTML 代码为：
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Haml Demo</title>
</head>
<body>
<h1>Hello World</h1>
<a href='http://wikipedia.org' title='Wikipedia'>维基百科</a>
</body>
</html>
在 Haml 中，"/ "起首的行表示 HTML 注释，"-# "起首的行表示 Haml 注释。 更多功能请参考以下链接。
* Nick Walsh, Craft cleaner, more concise HTML with Haml
* Ian Oxley， An Introduction to Haml