一、開發環境：
採用Sublime Text + Emmet插件。
官方文檔：http://docs.emmet.io/cheat-sheet/
二、基本語法快速入門：
1. 嵌套操作----------
子操作： >
div>ul>li
<div>
<ul>
<li></li>
</ul>
</div>
並列：+
div+ul>li
<div></div>
<ul>
<li></li>
</ul>
上級：^
ul>li^div
<ul>
<li></li>
</ul>
<div></div>
ul>li>a^^div 上級多層
<ul>
<li><a href=""></a></li>
</ul>
<div></div>
重複：*
ul>li*3
<ul>
<li></li>
<li></li>
<li></li>
</ul>
分組：()
div>(p>span)*2
<div>
<p><span></span></p>
<p><span></span></p>
</div>
2. 屬性操作----------
id和類
div#header+div.main+div#footer
<div id="header"></div>
<div></div>
<div id="footer"></div>
屬性值
a[title=test target=_self]
<a title="test" target="_self" href=""></a>
數列值：$
p.item$*3
<p></p>
<p></p>
<p></p>
p.item$$*3
<p></p>
<p></p>
<p></p>
數列操作符：@
p.item$@-*3 @- = -1
<p></p>
<p></p>
<p></p>
p.item$@3*3 @3 = 從3開始3次
<p></p>
<p></p>
<p></p>
p.item$@-3*3 @-3 = 3次後到3結束
<p></p>
<p></p>
<p></p>
3. 字符操作----------
字符操作：{}
a{click}
<a href="">click</a>
a>{click}+span{me}
<a href="">click<span>me</span></a>
4. 缺省元素----------
.header+.footer --------------- div.header+div.footer
ul>.item*3 -------------- ul>li.item*3
table>.row*4>.cell*3 -------------- table>tr.row*4>td.cell*3
最後注意：如果搞不清楚順序了，多用()。就像1+2×3，實際上是(1+2)×3
三、縮寫
簡介：
縮寫：!
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
縮寫：a
<a href=""></a>
縮寫：a:link
<a href="http://"></a>
縮寫：a:mail
<a href="mailto:"></a>
縮寫：br
<br />
縮寫：frame
<frame />
縮寫：hr
<hr />
縮寫：link
<link rel="stylesheet" href="" />
縮寫：link:css
<link rel="stylesheet" href="style.css" />
縮寫：link:favicon
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
縮寫：meta
<meta />
縮寫：meta:utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
縮寫：style
<style></style>
縮寫：script
<script></script>
縮寫：script:src
<script src=""></script>
縮寫：img
<img src="" alt="" />
縮寫：form
<form action=""></form>
縮寫：form:get
<form action="" method="get"></form>
縮寫：form:post
<form action="" method="post"></form>
縮寫：label
<label for=""></label>
縮寫：input
<input type="text" />
縮寫：input:password
別名：inp[type=password]
<input type="password" name="" id="" />
縮寫：input:p
別名：input:password
<input type="password" name="" id="" />
縮寫：select
<select name="" id=""></select>
縮寫：option
<option value=""></option>
縮寫：textarea
<textarea name="" id="" cols="30" rows="10"></textarea>
縮寫：menu:c
別名：menu:context
<menu type="context"></menu>
縮寫：video
<video src=""></video>
縮寫：audio
<audio src=""></audio>
縮寫：bq
別名：blockquote
<blockquote></blockquote>
縮寫：emb
別名：embed
<embed src="" type="" />
縮寫：obj
別名：object
<object data="" type=""></object>
縮寫：fst, fset
別名：fieldset
<fieldset></fieldset>
縮寫：btn
別名：button
<button></button>
縮寫：btn:b
別名：button[type=button]
<button type="button"></button>
縮寫：btn:r
別名：button[type=reset]
<button type="reset"></button>
縮寫：btn:s
別名：button[type=submit]
<button type="submit"></button>
我的小站原文
參考：
http://www.oschina.net/code/snippet_66036_18625
http://www.cnblogs.com/matchless/archive/2013/04/10/3010628.html
http://docs.emmet.io/cheat-sheet/
http://my.oschina.net/blogshi/blog/212286
