vscode 快速編寫代碼的整理

1、快速編輯HTML代碼

   一、添加類、id、文本和屬性

     （1）輸入 .box

<div class="box"></div>

　　（2）輸入p#text

<p id="text"></p>

　　（3）類和id一塊兒輸入 .box.text

<div id="box" class="text"></div>

　　（4）元素和內容一塊輸出 p{你好}

<p>你好</p>

　　（5）輸出屬性 a[href=#]

<a href="#"></a>

　  二、嵌套

　　（1）輸入div+p

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

 

　　（2）輸入ul>li*3>a

 <ul>
     <li><a href=""></a></li>
     <li><a href=""></a></li>
     <li><a href=""></a></li>
 </ul>

　  　(3) >：子元素符號，表示嵌套的元素

              +：同級標籤符號

      三、分組 

         能夠經過嵌套和括號來快速生成一些代碼塊(.foo>h1)+(.bar>h2)

<div class="foo">
    <h1></h1>
</div>
<div class="bar">
    <h2></h2>
</div>

　  四、定義多個帶屬性的元素

　　　輸入ul>li.item$*3，代碼輸出

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

2、CSS縮寫 

　　1.  值 
　　　　好比要定義元素的寬度，只需輸入w100，便可生成 　　

width: 100px;  

　　注：除了px，也能夠生成其餘單位

• p 表示%
• e 表示 em
• x 表示 ex

     2. 附加屬性

　　　可能你以前已經瞭解了一些縮寫，好比 @f，能夠生成：

1 @font-face {  
2   font-family:;  
3   src:url();  
4 }  

　　3. 模糊匹配

　　　　若是有些縮寫你拿不許，Emmet會根據你的輸入內容匹配最接近的語法，好比輸入ov:h、ov-h、ovh和oh，生成的代碼是相同的：

overflow: hidden;  

　　四、供應商前綴

　　　　若是輸入非W3C標準的CSS屬性，Emmet會自動加上供應商前綴，好比輸入trs，則會生成：（未實現）

1 -webkit-transform: ;  
2 -moz-transform: ;  
3 -ms-transform: ;  
4 -o-transform: ;  
5 transform: ;  

　　　　你也能夠在任意屬性前加上「-」符號，也能夠爲該屬性加上前綴。好比輸入-super-foo： 

1 -webkit-super-foo: ;  
2 -moz-super-foo: ;  
3 -ms-super-foo: ;  
4 -o-super-foo: ;  
5 super-foo: ;  

若是不但願加上全部前綴，可使用縮寫來指定，好比-wm-trf表示只加上-webkit和-moz前綴： 　　

-webkit-transform: ;  
-moz-transform: ;  
transform: ;  

　　前綴縮寫以下：

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

　　五、漸變

　　輸入lg(left, #fff 50%, #000)，會生成以下代碼：（未實現）

1 background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));  
2 background-image: -webkit-linear-gradient(left, #fff 50%, #000);  
3 background-image: -moz-linear-gradient(left, #fff 50%, #000);  
4 background-image: -o-linear-gradient(left, #fff 50%, #000);  
5 background-image: linear-gradient(left, #fff 50%, #000);  

　　

 有些本身尚未實現，下去找找毛病在哪兒

　文章來源：Jason.Zeng