一、开发环境：

采用Sublime Text &＃43; Emmet插件。

官方文档：http://docs.emmet.io/cheat-sheet/

二、基本语法快速入门：

1. 嵌套操作----------
子操作： >
div>ul>li

并列：&＃43;
div&＃43;ul>li

上级：^
ul>li^div

ul>li>a^^div 上级多层

重复：*
ul>li*3

分组：()
div>(p>span)*2

2. 属性操作----------
id和类
div#header&＃43;div.main&＃43;div#footer

属性&＃20540;
a[title=test target=_self]

数列&＃20540;：$
p.item$*3

p.item$$*3

数列操作符：@
p.item$@-*3 @- = -1

p.item$@3*3 @3 = 从3开始3次

p.item$@-3*3 @-3 = 3次后到3结束

3. 字符操作----------
字符操作：{}
a{click}
click
a>{click}&＃43;span{me}
clickme
4. 缺省元素----------
.header&＃43;.footer --------------- div.header&＃43;div.footer
ul>.item*3 -------------- ul>li.item*3
table>.row*4>.cell*3 -------------- table>tr.row*4>td.cell*3
最后注意：如果搞不清楚顺序了，多用()。就像1&＃43;2×3，实际上是(1&＃43;2)×3

 三、缩写

简介：

缩写：!

        

缩写：a

缩写：a:link

缩写：a:mail

缩写：br

缩写：frame

缩写：hr

缩写：link

缩写：link:css

缩写：link:favicon

缩写：meta

缩写：meta:utf

缩写：style

缩写：script

缩写：script:src

缩写：img

缩写：form

缩写：form:get

缩写：form:post

缩写：label

缩写：input

缩写：input:password

别名：inp[type=password]

缩写：input:p

别名：input:password

缩写：select

缩写：option

缩写：textarea

缩写：menu:c

别名：menu:context

缩写：video

缩写：audio

缩写：bq

别名：blockquote

缩写：emb

别名：embed

缩写：obj

别名：object

缩写：fst, fset

别名：fieldset

缩写：btn

别名：button

缩写：btn:b

别名：button[type=button]

缩写：btn:r

别名：button[type=reset]

缩写：btn:s

别名：button[type=submit]

 我的小站原文

参考：

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

Emmet基本语法学习及HTML缩写加速,布布扣,bubuko.com