Emmet基本使用

一、生成HTML文档初始结构：！

• html:5 或者!： 生成HTML5结构
• html:xt：生成HTML4过渡型
• html:4s： 生成HTML4严格型

二、生成带有id、class的HTML标签：#、.

• div.aaa： 生成一个class为aaa的div标签
• div#aaa： 生成一个id为aaa的div标签

三、生成后代：>

div.aaa>ul>li

<div class="aaa">
	<ul>
		<li></li>
	</ul>
</div>

四、生成兄弟：+

div+p+bq

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

五、生成上级元素：^

div>ul>li^span

<div>
	<ul>
		<li></li>
	</ul>
	<span></span>
</div>

六、重复生成多份：*

ul>li*5： 生成5个li

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

七、生成分组：()

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>

八、生成自定义属性：[attr]

a[href="https://blog.csdn.net/" title="CSDN"]

<a href="https://blog.csdn.net/" title="CSDN"></a>

九、生成内容编号：$

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

• 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$@3*5

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

• ul>li.item$@-3*5

<ul>
	<li class="item7"></li>
	<li class="item6"></li>
	<li class="item5"></li>
	<li class="item4"></li>
	<li class="item3"></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>

十、生成文本内容：{}

a[href="https://blog.csdn.net/"]{CSDN}

<a href="https://blog.csdn.net/">CSDN</a>