快速输入
一、 !或 html:5 按tab : html5文档结构 ;
html:xt :用于XHTML过渡文档;
html:4s :HTML4严格文档
二、p.myclass、p#myid
三、标签中的内容
h1{内容} -->
<h1>内容</h1>
四、属性
a[href="index"] -->
<a href="index"></a>
五、 嵌套
// > 表示子元素
p>span -->
<p><span></span></p>
// + 表示同级元素
p+span -->
<p></p><span></span>
// ^在b前面,可以吧b提高一级 (或理解为^前面的代码提升一行)
p>span^b -->
<p><span></span></p><b></b> ;
六、 分组
(.fl>p)+(.fr>span) -->
<div class="fl"> <p></p></div>
<div class="fr"> <span></span> </div>
七、隐式标签
声明一个带类的标签,只需输入div.item,就会生成<div class="item"></div>。
在过去版本中,可以省略掉div,即输入.item即可生成<div class="item"></div>。
现在如果只输入.item,则Emmet会根据父标签进行判定。
比如在<ul>中输入.item,就会生成<li class="item"></li>。
一些隐式标签:
li:用于ul和ol中
tr:用于table、tbody、thead和tfoot中
td:用于tr中
option:用于select和optgroup中
八、 定义多个元素 号
ul>li3 -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
九、定义多个相同属性
ul>li.item*3 -->
<ul>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
十、定义多个属性(有数字递增)
ul>li.item$*3 -->
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
十一、css缩写
w100 -->width:100px;
w100p -->width:100%;
p 表示% e 表示 em x 表示 ex
十二、模糊匹配
bac --> background-color
fz16 --> font-size:16px;
等等...
十三、供应商前缀
如果输入非W3C标准的CSS属性,Emmet会自动加上供应商前缀,比如输入trs,则会生成:
-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;
你也可以在任意属性前加上“-”符号,也可以为该属性加上前缀。比如输入-super-foo:
-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;
如果不希望加上所有前缀,可以使用缩写来指定,比如-wm-trf表示只加上-webkit和-moz前缀:
-webkit-transform: ;
-moz-transform: ;
transform: ;
w 表示 -webkit
m 表示 -moz
s 表示 -ms
o 表示 -o-
十四、 一些组合
缩写:h$[title=item$]{Header $}*3
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>
缩写 ul>li.item$@-*5>a[href="index$"]{内容 $}
<ul>
<li class="item5"><a href="index1">内容 1</a></li>
<li class="item4"><a href="index2">内容 2</a></li>
<li class="item3"><a href="index3">内容 3</a></li>
<li class="item2"><a href="index4">内容 4</a></li>
<li class="item1"><a href="index5">内容 5</a></li>
</ul>
缩写:ul>li.item$$$*5
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
缩写:ul>li.item$@-*5
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
缩写:ul>li.item$@3*5
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
暂时总结到此,本文非原创,是因某次需要,而查找的,感觉不太好找,就搬砖过来,方便大家查看,有用的话点个赞吧!推荐一下!