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> ；+ 表示同级元素
p>span^b --> <p><span></span></p><b></b> ; ^在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>

暂时总结到此，本文非原创，是因某次需要，而查找的，方便同学们快速掌握！