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