前言

新版本的Vscode自带了Emmet插件，Emmet插件是什么呢？其实它就是一个编写html和css的快捷工具插件。可以通过简单的表示就能完成大量的html编写。例如如果在编辑器下编写如下代码：

<nav class="menu-nav">
    <div class="menuitem"></div>
    <div class="menuitem"></div>
    <div class="menuitem"></div>
</nav>
<div class="block">block</div>
<div class="block">block</div>

在不使用Emmet插件时，当然就手敲代码且复制和粘贴的操作。如果使用Emment插件的只需要在编辑器里面输入下面的代码即可：

(nav.menu-nav>div.menuitem*3)+div.block*2{block}

上面直接输入并不能看到效果，如果是直接粘贴到vscode的话，可以先尝试用键盘删除最后一个字符（大括号）再输入一个大括号，此时vscode会有提示，之后直接点击回车就可以看到效果

是不是很神奇？

具体语法

后代：>

缩写：nav>ul>li

<nav>
    <ul>
        <li></li> 
    </ul>
</nav>

兄弟：+

缩写：div+p+bq

<div></div>
<p></p>
<blockquote></blockquote>

上级：^

缩写：div+div>p>span+em^bq

<div></div>
<div>
	<p>
    	<span></span>
        <em></em>
    </p>
    <blockquote></blockquote>
</div>

缩写：div+div>p>span+em^^bq

<div></div>
<div>
	<p>
    	<span></span>
        <em></em>
    </p>
</div>
<blockquote></blockquote>

分组：() 缩写：div>(header>ul>li*2>a)+footer>p

<div>
    <header>
        <ul>
        	<li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
    	<p></p>
    </footer>
</div>

缩写：(div>dl>(dt+dd)*3)+footer>p

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer> 
	<p></p>
</footer>

乘法：*

缩写：ul>li*5

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

自增符号：$

缩写：ul>li.item$*5

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

缩写：h $[title=item$ ]{Header $}*3

<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

缩写：ul>li.item$$$*5

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

缩写：ul>li.item$@-*5

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

缩写：ul>li.item$@3*5

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

ID和类属性

缩写：#header

<div id="header"></div>

缩写：.title

<div class="title"></div>

缩写：form#search.wide

<form id="search" class="wide"></form>

缩写：p.class1.class2.class3

<p class="class1 class2 class3"></p>

自定义属性

缩写：p[title="Hello world"]

<p title="Hello world"></p>

缩写：[a='value1' b="value2"]

<div a="value1" b="value2"></div>

文本：{}

缩写：a{Click me}

<a href="">Click me</a>

缩写：p>{Click }+a{here}+{ to continue}

<p>Click <a href="">here</a> to continue</p>

VsCode中使用Emmet插件

前言