VSCode的emmet输入法

Posted 2021-12-23 webcode

emmet输入法可以快速输入批量的html和css

用法为：标签名+tab     ps：+enter也行但不推荐

标签名.xxx 输入一个class包含xxx的标签，如果标签名省略，则默认为div

如：在vscode中输入：p.c1.c2

效果：

<p class="c1 c2"></p>
标签名#xxx  输入一个id为xxx的标签

如：div#box.c3

效果：

<div id="box" class="c3"></div>
标签名[xx=yy]  输入一个包含xx属性且值为yy的元素

如：img[src=bg.jpg]

效果：ps：因为img本就有src属性，所以效果不是很明显，也可用于自定义属性

<img src="bg.jpg" >
标签名xxx  输入一个内容为xxx的标签

如：p这个标签内容

<p>这个标签内容</p>
标签a>标签b，输入一个a标签中包含一个子标签b

如：ul>li

<ul>
<li></li>
</ul>
标签名*n，连续输入n个标签
输入多行时，$可以表示序号

如：ul>li第$$行*10

<ul>
<li>第01行</li>
<li>第02行</li>
<li>第03行</li>
<li>第04行</li>
<li>第05行</li>
<li>第06行</li>
<li>第07行</li>
<li>第08行</li>
<li>第09行</li>
<li>第10行</li>
</ul>