HTML代码写起来很费事，因为它的标签多。
一种解决方法是采用模板，在别人写好的骨架内，填入自己的内容。还有一种很炫的方法----简写法。
常用的简写法，目前主要是Emmet和Haml两种。这两种简写法，功能相近，各有特点。考虑到Haml基于Ruby语言，建议Ruby/Rails项目使用Haml，其他项目使用Emmet。
本文主要介绍Emmet。
本人使用的编辑器是sublime text，下面就以sublime text举例。
一、安装Emmet插件：
1.安装Package Control组件（之前若安装过，此步骤可以省略）
按Ctrl+`调出console
粘贴以下代码到底部命令行并回车：
import urllib2,os;pf='PackageControl.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp)if not os.path.exists(ipp) else None;open(os.path.join
(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace('','%20')).read())
重启SublimeText 2。
如果在Perferences->packagesettings中看到packagecontrol这一项，则安装成功。
如果这种方法不能安装成功，可以到这里下载文件手动安装：http://wbond.net/sublime_packages/package_control/installation。
2、安装Emmet插件：
按下Ctrl+Shift+P调出命令面板
输入install调出 Install Package 选项并回车，然后在列表中选中Emmet，或直接输入Emmet。
安装成功后，重启Sublime Text 2。
二、Emmet的用法
新建一个文本文件，键入
html:5
按一下"Ctr+E"，这一行就立刻变成下面的样子。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
这就是Emmet的基本用法：先写简写形式，然后用"Ctr+E"将其转成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://daybook.diandian.com/]{水牛儿}
div>p
div+p
p>span^div
对应的HTML代码为：
<p></p>
<p id="main" class="item"></p>
<a href="http://daybook.diandian.com/">水牛儿</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 id="item1" class="class01"></div>
<div id="item2" class="class02"></div>
<div id="item3" class="class03"></div>
参考资料：
http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html
http://www.qianduan.net/essential-to-sublime-the-text-2-plugins.html