使用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>
  

1. 输入标签和标签中的值:标签名｛标签内容｝

   输入“span{test}",Tap(或Enter）键，

   =>

   <span>test</span>
   

2. 同时输入多个同级标签:标签名+标签名+标签名。。。

   输入"li+li+li" , Tap(或Enter）键，

   =>

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

3. 同时输入父级标签和子标签:父级标签名>子级标签名。。。

   输入“table>ul>li+li ",Tap(或Enter）键，

   =>

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

4. 输入子级元素的父级元素的同级元素

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

   【注意】“^”之后的ul标签是和span的父级标签 p 同级的

   =>

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

5. 输入超链接的链接href值

   输入“a:mail ”
   
   =>

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

   输入“a:link ”
   
   =>

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

6. 输入标签的某个属性值
   
   输入“span[style=color:red]”
   
   =>

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

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

   =>

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

7. 同级标签输入多个使用乘法
   
   输入“li*3"
   
   =>

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

参考文章：

VsCode中使用Emmet神器快速编写HTML代码