使用VsCode自帶的Emmet語法

shanzm-2019-02-07 15:48

---

1. 新建html文件，保存之后，輸入“！”，按Tap(或Enter）鍵，自動生成HTML結構

2. 標簽只要直接輸入標簽名（不要輸入<>），按Tap(或Enter）鍵自動生成完整的標簽

3. 輸入標簽和id:標簽名#id名

   輸入“span#sp",Tap(或Enter）鍵，

   =>

   <span id="sp"></span>
   

4. 輸入標簽和class值:標簽名.class 名

   輸入"span.Sp",Tap(或Enter）鍵

   =>

   <span class="Sp"></span>
   

• 【其中】：元素綁定多個類名:標簽名.class名1.class名2。。。

  輸入"span.Sp1.Sp2",Tap鍵（或Enter）鍵

  =>

  <span class="Sp1 Sp2"></span>
  

5. 輸入標簽和標簽中的值:標簽名｛標簽內容｝

   輸入“span{test}",Tap(或Enter）鍵，

   =>

   <span>test</span>
   

6. 同時輸入多個同級標簽:標簽名+標簽名+標簽名。。。

   輸入"li+li+li" , Tap(或Enter）鍵，

   =>

   <li></li>
   <li></li>
   <li></li>
   

7. 同時輸入父級標簽和子標簽:父級標簽名>子級標簽名。。。

   輸入“table>ul>li+li ",Tap(或Enter）鍵，

   =>

   <table>
       <ul>
           <li></li>
           <li></li>
       </ul>
   </table>
   

8. 輸入子級元素的父級元素的同級元素

   輸入" div>p>span^ul>li "

   【注意】“^”之后的ul標簽是和span的父級標簽 p 同級的

   =>

   <div>
       <p><span></span></p>
       <ul>
           <li></li>
       </ul>
   </div>
   

9. 輸入超鏈接的鏈接href值

   輸入“a:mail ”
   =>

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

   輸入“a:link ”
   =>

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

10. 輸入標簽的某個屬性值
    輸入“span[style=color:red]”
    =>

    <span style="color:red"></span>
    

    輸入“span[style=color:red].Sp#sp"

    =>

    <span style="color:red" class="Sp" id="sp"></span>
    

11. 同級標簽輸入多個使用乘法
    輸入“li*3"
    =>

    <li></li>
    <li></li>
    <li></li>
    

參考文章：

VsCode中使用Emmet神器快速編寫HTML代碼