VSCode中有一些快捷编辑HTML的方法，能大大提高工作效率，在这里分享给大家，权当抛砖引玉，欢迎有更多的朋友分享更多的技术知识。
1.输入html:5，然后按tab键或回车（Enter）键，效果如下：
注：输入感叹号"!"，然后按Tab键或者回车（Enter）键也可以生成html骨架。
2.输入link:css引入css样式文件，link:favicon引入网站logo，输入script:src引入js
3.输入标签名自动补齐
直接输入标签名后回车
4.使用"#“输入id，”.“输入class，”[]"输入属性
<!-- 输入div#main回车 -->
<div id="main"></div>
<!-- 输入div.content回车 -->
<div class="content"></div>
<!-- 输入div#main.content回车 -->
<div id="main" class="content"></div>
<!-- img[src=1.jpg][alt=pic1] -->
<img src="1.jpg" alt="pic1">5.使用">“输入嵌套标签，”+" 输入并列的兄弟标签，"^"上级元素
<!-- 输入div#parent>div#child回车 -->
<div id="parent">
<div id="child"></div>
</div><!-- 输入div#bro1+div#bro2回车 -->
<div id="bro1"></div>
<div id="bro2"></div><!-- 输入div#sup>div#child+div#bro^div#sub回车 -->
<div id="sup">
<div id="child"></div>
<div id="bro"></div>
</div>
<div id="sub"></div>6.使用{}输入标签中的文本
<!-- div#main{input sth here} -->
<div id="main">input sth here</div>7.使用"()"对标签分组及使用"*"生成多个相同的标签
<!-- (div#list1>ul>li*2)+(div#list2>ul>li*3) -->
<div id="list1">
<ul>
<li></li>
<li></li>
</ul>
</div>
<div id="list2">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>8.使用自增符号$
<!-- $ 自增符号 -->
<!-- ul>li*3>img[src=./imgs/$.jpg][alt=img$] -->
<ul>
<li><img src="./imgs/1.jpg" alt="img1"></li>
<li><img src="./imgs/2.jpg" alt="img2"></li>
<li><img src="./imgs/3.jpg" alt="img3"></li>
</ul>
<!-- ul>li*3>img[src=./imgs/$.jpg][alt=img$] -->
<ul>
<li><img src="./imgs/01.jpg" alt="img01"></li>
<li><img src="./imgs/02.jpg" alt="img02"></li>
<li><img src="./imgs/03.jpg" alt="img 03"></li>
</ul>
<!-- ul>li*3>img[src=./imgs/$$.jpg][alt=img$$] -->
<ul>
<li><img src="./imgs/001.jpg" alt="img001"></li>
<li><img src="./imgs/002.jpg" alt="img002"></li>
<li><img src="./imgs/003.jpg" alt="img003"></li>
</ul>
<!-- ul>li*3>img[src=./imgs/$@4.jpg][alt=img$@4] -->
<ul>
<li><img src="./imgs/04.jpg" alt="img04"></li>
<li><img src="./imgs/05.jpg" alt="img05"></li>
<li><img src="./imgs/06.jpg" alt="img06"></li>
</ul>依此类推……
以上这些快捷操作是因为VS Code自带有Emmet插件。
Emmet插件非常强大，还有很多用法，大家还知道哪些呢，期待大家的分享。