emmet快速缩写展开的基本写法与心得

Posted 2020-11-22 baimeishaoxia

emmet的基本写法：

• .ct 点是class

   <div class="ct"></div>

• ＃ct 井号是id

    <div id="ct"></div>

• .ct>.ct 加号表示两个div并列

   <div class="ct"></div>
   <div class="ct"></div>

• .ct>ct1 ">"表示其子元素

   <div class="ct">
       <div class="ct1"></div>
   </div>

• .ct*6 乘号后面加个数表示该元素的展开个数

   <div class="ct"></div>
   <div class="ct"></div>
   <div class="ct"></div>
   <div class="ct"></div>
   <div class="ct"></div>
   <div class="ct"></div>

• .ct$*6 $符号表示数字标号

    <div class="ct1"></div>
    <div class="ct2"></div>
    <div class="ct3"></div>
    <div class="ct4"></div>
    <div class="ct5"></div>
    <div class="ct6"></div>

以上的基本方法排列组合，再用（）来决定展开顺序即可；

心得

一直以来emmet使得html标签和css标签的书写速度加快，减少了许多不必要浪费的时间，学会使用emmet是每一个前端开发人员应该具有的基本技能。