Emmet语法写HTML和CSS可以快到飞起

Emmet插件语法写HTML可以很快。

Emmet语法 + Tab键

HTML部分

html初始结构

# HTML5文档类型
!
html:5

# XHTML过渡文档类型
html:xt

# XHTML严格文档类型
html:xs

# HTML4严格文档类型
html:4s

 

 id（#），class（.）

div#test
div.test

子节点（>），兄弟节点（+），上级节点（^）

div>ul>li>p
div+ul+p
div>ul>li^div

重复（*）

div*5

分组（()）

div>(ul>li>a)+div>p

属性（[attr]）

a[href='#' name='test'] 

编号（$）

ul>li.item$*5
ul>li.item$$$*5
ul>li.item$@-*5
ul>li.item$@3*5
ul>li.item$@-3*5

文本（{}）

a{Click me}
ul>li.test$*3{测试$}

隐式标签

.test
<div class="test"></div>

ul>.test
<ul>
    <li class="test"></li>
</ul>

li：用于 ul 和 ol 中
tr：用于 table、tbody、thead 和 tfoot 中
td：用于 tr 中
option：用于 select 和 optgroup 中

CSS部分

m-10--20 to margin: -10px -20px;
m10 → margin: 10px;
m1.5 → margin: 1.5em;
m1.5ex → margin: 1.5ex;
m10foo → margin: 10foo;
m10ex20em → margin: 10ex 20em;
m10ex-5 → margin: 10ex -5px;
p → %
e → em
x → ex
#1 → #111111
#e0 → #e0e0e0
#fc0 → #ffcc00
lh2 → line-height: 2;
fw400 → font-weight: 400;

p!+m10e!
padding:  !important;
margin: 10em !important;

-bdrs
-webkit-border-radius: ;
-moz-border-radius: ;
-ms-border-radius: ;
-o-border-radius: ;
border-radius: ;

-super-foo
-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;

-wm-trf
-webkit-transform: ;
-moz-transform: ;
transform: ;

w: webkit
m: moz
s: ms
o: o