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

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>

新建html文件，保存之后，输入“！”，按Tap(或Enter）键，自动生成HTML结构 标签只要直接输入标签名（不要输入<>），按Tap(或Enter）键自动生成完整的标签 输入标签和id:标签名#id名 输入“span#sp",Tap(或Enter）键， => 输入标签和class值:标签名.class 名 输入"span.Sp",Tap(或Enter）键 => 【其中】：元素绑定多个类名:标签名.class名1.class名2。。。 输入"span.Sp1.Sp2",Tap键（或Enter）键 => 输入标签和标签中的值:标签名｛标签内容｝ 输入“span{test}",Tap(或Enter）键， => test 同时输入多个同级标签:标签名+标签名+标签名。。。 输入"li+li+li" , Tap(或Enter）键， =>

同时输入父级标签和子标签:父级标签名>子级标签名。。。 输入“table>ul>li+li ",Tap(或Enter）键， =>

输入子级元素的父级元素的同级元素 输入" div>p>span^ul>li " 【注意】“^”之后的ul标签是和span的父级标签 p 同级的 =>

输入超链接的链接href值 输入“a:mail ” => 输入“a:link ” => 输入标签的某个属性值 输入“span[style=color:red]” => 输入“span[style=color:red].Sp#sp" => 同级标签输入多个使用乘法 输入“li*3" =>