html文档——Tab组合键快速生成代码

快速输入
一、 ！或 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 表示 -webkitm 表示 -mozs 表示 -mso 表示 -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> 

暂时总结到此，本文非原创，是因某次需要，而查找的，感觉不太好找,就搬砖过来，方便大家查看，有用的话点个赞吧！推荐一下！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！