使用VsCode自带的Emmet语法

使用VsCode自带的Emmet语法：

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代码