VSCode中有一些快捷编辑HTML的方法，能大大提高工作效率，在这记录一些。
1.输入html:5，然后按tab键或enter键，效果如下：
<!-- 输入html或者html:5生成页面模板 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html>
其实还有一个更快速的方法，可以有一样的效果。
只需要在第一行输入「！」然后按tab键或enter键，即可快速生成页面模板。
（注意，感叹号要英文输入下的符号，页面要是html格式的才可以）
2.输入link:css引入css样式文件，输入script:src引入js
<!-- 输入link:css引入样式 --> <link rel="stylesheet" href=""> <!-- 输入script:src引入js --> <script src=""></script>
3.输入标签名自动补齐
<!-- 输入标签名 h1 按tab键或Enter键自动补齐 -->
<h1>HTML快捷输入练习</h1>
<!-- {}可输入标签内的文本 如输入：h2{填充文本} -->
<h2>填充文本</h2>
4.随机文本的输入
Lorem自动输入一段随机文本(默认30个单词)，Lorem10 输入10个单词，Lorem*5 输入5遍随机文本。
Lorem ipsum dolor sit amet consectetur adipisicing elit. At illum doloremque accusantium est, expedita tenetur minus nostrum perspiciatis. Repudiandae voluptatum mollitia corrupti adipisci pariatur accusantium praesentium quas, quisquam tempore debitis? <!-- Lorem10 的结果--> Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, dolorem. <!-- Lorem10*10 的结果--> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil, debitis. Sit accusamus nisi mollitia doloremque cumque praesentium quod velit vitae. Quisquam qui ipsam beatae eaque non voluptatibus obcaecati voluptate exercitationem.
5.使用"#“输入id，”.“输入class，”[]"输入属性
<!-- div#main.content 输入id、class -->
<div id="main" class="content"></div>
<div id="foot" class="foot" data="结束"></div>
<!-- div[alt=到底了]{结束} 添加属性及包裹文本 -->
<div alt="到底了">结束</div>
6.使用">“输入嵌套标签，”+" 输入并列的兄弟标签，"^"上级元素
<!-- div>div#imgs{put some imgs here} 标签的嵌套-->
<div>
<div id="imgs">put some imgs here</div>
</div>
<!-- div#left{I am left}+div#right{I am right} 并列标签 -->
<div id="left">I am left</div>
<div id="right">I am right</div>
<!-- div#div1>p^div#div2 把div1提出成一行和div2同级 -->
<div id="div1">
<p></p>
</div>
<div id="div2"></div>
<!-- div>div#div1>p^div#div2 -->
<div>
<div id="div1">
<p></p>
</div>
<div id="div2"></div>
</div>
<!-- div>p>img^div>ul>li -->
<div>
<p><img src="" alt=""></p>
</div>
<div>
<ul>
<li></li>
</ul>
</div>
<!-- div>div>div^div -->
<div>
<div>
<div></div>
</div>
<div></div>
</div>
<!-- div>div^div -->
<div>
<div></div>
</div>
<div></div>
7.使用"{}“对标签分组及使用”*"生成多个相同的标签
<!-- (div#list1>ul>li*2)+(div#list1>ul>li*2) 使用括号分组标签 *生成多个标签--> <div id="list1"> <ul> <li></li> <li></li> </ul> </div> <div id="list1"> <ul> <li></li> <li></li> </ul> </div>
8.包装文本
听起来可能有点绕,通俗点解释就是把一段指定的文本包装成我们想要的结构.注意这个功能需要编辑器的支持,举个大栗子:
比如现在我们有这样一段文本。
首页
产品介绍
相关案例
关于我们
联系我们
而我们预期的效果是这样:
<nav>
<ul>
<li>首页</li>
<li>产品介绍</li>
<li>相关案例</li>
<li>关于我们</li>
<li>联系我们</li>
</ul>
</nav>
该怎么做呢？
首先选中文本,按下ctrl+shift+p打开命令窗口输入ewrap
选择Emmet:使用输入缩写包围个别行(Wrap Individual Lines with Abbreviation)选项
输入缩写字符nav>ul>li*按下回车键即可看到效果。
也可以在菜单=>编辑=>Emmet(M)..然后输入。
（命令行炸年糕不要删除Emmet，不然没有作用）
这里需要的注意的地方是输入的缩写代码中*所在位置不同得到的效果也是不同的。
另外如果给的文本带有序号的情况,我们也是可以通过缩写来处理,而不是手动删除,主要用的是|t来处理.
比如:
1.首页
2.产品介绍
3.相关案例
4.关于我们
5.联系我们
输入包装字符命令
nav>ul>li*|t
即可看到生成的html中自动去掉了序号。
（这里注意|t中的一竖为符号一竖，在回车键上方的那个符号）
利用好Emmet来快速编写html代码,能提升工作效率不用在一个个敲闭合标签,简直是我等偷懒党神器.赶快去耍耍吧.
