Emmet插件的使用

Emmet的使用（HTML/CSS）

1. ！或者html:5快速生成h5。

2. p.p1#p1生成class与id

       <p class="p1" id="p1"></p>
   

3. a[href="www.baidu.com"]{我是a标签},生成结果

   {}是添加内容[]是设置属性

       <a href="www.baidu.com">我是a标签</a>
   

4. div>div>div+div^span，生成结果

       <div>
           <div>
               <div></div>
               <div></div>
           </div>
           <span></span>
       </div>
   

   • >是子集
   • +是兄弟
   • ^是将后面的标签提升一级（以同等级计算提升）
   • ^^表示升两级

5. 分组，用()将命令分组(我试了很多次，我的编译器不识别分组语法，所以我就把语法放上去，自己尝试吧)(.div1>.div2)+(.div3>.div4^.div5)。

6. div*4生成多份

   <div></div>
   <div></div>
   <div></div>
   <div></div>
   

7. 编号

   • .div$*3

     <div class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
     

     如果生成class或者id的时候，未指定标签，默认为div

   • .div1$@-*3倒序生成

         <div class="div13"></div>
         <div class="div12"></div>
         <div class="div11"></div>
     

   • .div$@3*3指定开始编号的起始号码

         <div class="div3"></div>
         <div class="div4"></div>
         <div class="div5"></div>
     

   • .div$@-3*3倒序生成到制定编号

         <div class="div5"></div>
         <div class="div4"></div>
         <div class="div3"></div>
     

8. script:src生成带src的script标签

   <script src=""></script>
   

9. inp生成input

10. a:link

    <a href="http://"></a>
    

11. a:mail

      <a href="mailto:"></a>
    

12. input:p生成：

        <input type="password" name="" id="">
    

13. input:f

        <input type="file" name="" id="">
    

14. btn按钮

15. btn:s subimt类型按钮

16. btn:r reset类型按钮

17. h100,宽w100

     height: 100px;
    

18. h100p宽w100p

      height: 100%;
    

19. h100x宽w100x

     height: 100ex;
    

20. h100e宽w100e

      height: 100em;
    

21. h100r宽同上

     height: 100rem;
    

22. c#0颜色

    	color: #000;
    

23. c#e0

       color: #e0e0e0;
    

24. c#cd1

      color: #f02;
    /* 也就是#ff0022  */
    

25. h100+m30或者h100+mt30

    • p
    • m
    • bd

                height: 100px;
                margin: 30px;
    /*  mt代表margin-top，其他方向类似 */
                margin-top: 20px;
    

26. ovh

      overflow: hidden;
    

28. css3前缀

    • w 表示 -webkit-
    • m 表示 -moz-
    • s 表示 -ms-
    • o 表示 -o-

    命令：-wmso-transform

    结果：

    -webkit-transform: ;
    -moz-transform: ;
    -ms-transform: ;
    -o-transform: ;
    transform: ;

上述文章部分借鉴：

作者：Kevin_土豆

地址：https://blog.csdn.net/comphoner/article/details/79670148