Emmet操作指南
HTML篇
生成带有内容的标签
标签名{内容}可以生成带有内容的标签
div{abc}
<div>abc</div>
生成带有属性的标签
生成带有class属性的标签
.属性值可以直接生成div标签
标签名加上.属性值可以生成带有class属性标签
.abc
div[class="abc"]
p.abc
p[class="abc"]
a.abc
a[class="abc"]
生成带有id属性的标签
标签名.属性值可以生成带有id属性的标签
div#abc
<div id="abc"></div>
p#abc
<p id='abc'></p>
生成同时具有id属性和class属性的标签
同时使用以上两种方式即可，即：
div.abc#cde
<div class="abc" id="cde"></div>
生成带有自定义属性的标签
标签名[属性名=属性值]可以生成具有目标属性的标签
a[href='xxx']
<a href='xxx'></a>
结合以上内容，可以得到同时具有多个属性值的标签
a.abc#cde[href='xxx' name='link']
<a href="xxx" class="abc" id="cde" name="link"></a>
生成后代、上级标签
生成后代标签
使用标签>子标签可以生成子标签
<!-- 生成一级后代标签（子标签） -->
ul>li
<ul>
<li></li>
</ul>
<!-- 生成二级后代标签 -->
div>ul>li
<div>
<ul>
<li></li>
</ul>
</div>
生成上级标签
```html
<!-- 生成一级上级标签 -->
div>ul>li^span
<div>
<ul>
<li></li>
</ul>
<span></span>
</div>
<!-- 生成二级上级标签 -->
div>ul>li^^span
<div>
<ul>
<li></li>
</ul>
</div>
<span></span>
```
生成多个标签
生成多个重复标签
在标签后加上*并跟上想要的个数即可生成重复标签
ul>li*5
<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>
生成多个重复的标签结构
根据以上两点，就可以生成多个重复的结构
div>(ul>li)*3
<div>
<!-- 1 -->
<ul>
<li></li>
</ul>
<!-- 2 -->
<ul>
<li></li>
</ul>
<!-- 3 -->
<ul>
<li></li>
</ul>
</div>
生成带有编号的标签
使用$符号代替数字可以自增地生成数字并放入标签
.abc
<div class="abc"></div>
.abc$
<div class="abc1"></div>
.abc$*3
<div class="abc1"></div>
<div class="abc2"></div>
<div class="abc3"></div>
ul>li{$}*3
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!-- 把符号放在十位即可在十位进行自增 -->
ul>li{$5}*3
<ul>
<li>15</li>
<li>25</li>
<li>35</li>
</ul>
生成多位数的标签使用多个$即可
ul>li{$$}*3
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
</ul>
排序生成编号
使用$@进行正序排列
ul>li{$@}*3
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
看起来和$没什么区别
在$@后加上数字看看
ul>li{$@3}*3
<ul>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
使用$@数字可以生成从指定数字开始生成的正序数列
使用$@-进行到倒序排列
和正序使用方法如出一辙,不过不同的是，$@-可以生成从指定数字开始的数列并从大到小、自上而下进行排列
ul>li{$@-3}*3
<ul>
<li>5</li>
<li>4</li>
<li>3</li>
</ul>
正序数列**
使用$@-进行到倒序排列
和正序使用方法如出一辙,不过不同的是，$@-可以生成从指定数字开始的数列并从大到小、自上而下进行排列
ul>li{$@-3}*3
<ul>
<li>5</li>
<li>4</li>
<li>3</li>
</ul>
