Emmet ['ɛmɪt] 是一个插件。可以快速的编写 HTML、CSS 以及实现其他的功能。很多文本编辑器都支持。
VScode 中已内置了Emmet，所有不用额外安装插件
1. 语法基本规则
E 代表HTML标签。
E#id 代表id属性。
E.class 代表class属性。
E[attr=foo] 代表某一个特定属性。
E{foo} 代表标签包含的内容是foo。
E>N 代表N是E的子元素。
E+N 代表N是E的同级元素。
E^N 代表N是E的上级元素，其实是叔叔元素，如果没有上级元素，那么效果和E+N一样,E^^N是爷爷元素，以此类推。
2. 基本案例
div => <div> </div>
foo => <foo> </foo>
html:5 => 将生成html5标准的包含body为空基本dom
a:link => <a href="http://"></a>
br => <br>
link => <link rel="stylesheet" href="">
script:src => <script src=""></script>
form:get => <form action="" method="get"></form>
label => <label for=""></label>
input => <input type="text">
inp => <input type="text" name="" id="">
input:hidden => <input type="hidden" name=""> input:h亦可
input:email => <input type="email" name="" id="">
input:password => <input type="password" name="" id="">
input:checkbox => <input type="checkbox" name="" id="">
input:radio => <input type="radio" name="" id="">
select => <select name="" id=""></select>
option => <option value=""></option>
btn => <button></button>
btn:s => <button type="submit"></button>
btn:r => <button type="reset"></button>
3. 分组操作符(Grouping)
分组使用()来实现缩写的分离.比如这个例子,如果不加括号那么a将作为span的子级元素生成.加上括号a将于()内的元素同级.
div>(ul>li+span)>a
=>
<div>
<ul>
<li></li>
<span></span>
</ul>
<a href=""></a>
</div>
4. 乘法
ul>li*3
=>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
5. 自动计数
- 对于生成重复项时增加一个序号,只需要加上$符号即可.
- 如果生成两位数则使用两个连续的$$,更多位数以此类推...
ul>li.item${item number:$}*3
=>
<ul>
<li class="item1">item number:1</li>
<li class="item2">item number:2</li>
<li class="item3">item number:3</li>
</ul>
使用@修饰符，可以更改编号方向（升序或降序）和基数（例如起始值）.注意这个操作符在$之后添加
@-表示降序,@+表示升序,默认使用升序.
@N可以改变起始值.需要注意的是如果配合升降序使用的话N是放到+-符后.
ul>li.item$@-*3
=>
<ul>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
ul>li.item$@-10*3
=>
<ul>
<li class="item12"></li>
<li class="item11"></li>
<li class="item10"></li>
</ul>
6. 随机文本
在开发时经常要填充一些文本内容占位,Emmet内置了Lorem Ipsum功能来实现.loremN或者lipsumN,N表示生成的单词数,正整数.可以不填.
lorem
=>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit quia commodi vero sint omnis fugiat excepturi reiciendis necessitatibus totam asperiores, delectus saepe nulla consequuntur nostrum! Saepe suscipit recusandae repellendus assumenda.
p>lorem4
=>
<p>Lorem ipsum dolor sit.</p>
(p>lorem4)*3
=>
<p>Lorem ipsum dolor sit.</p>
<p>Labore aperiam, consequuntur architecto.</p>
<p>Quidem nisi, cum odio!</p>
7. 两个复杂的案例
table.table-row[role='table']>(thead>tr>td{item $@120}*5)+(tbody>tr>(td.item$$@->lorem10)*5)
=>
<table class="table-row" role="table">
<thead>
<tr>
<td>item 120</td>
<td>item 121</td>
<td>item 122</td>
<td>item 123</td>
<td>item 124</td>
</tr>
</thead>
<tbody>
<tr>
<td class="item05">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, assumenda.</td>
<td class="item04">Magnam possimus molestias ipsum animi rem placeat, ut obcaecati laudantium.</td>
<td class="item03">Consequuntur, labore ad optio cupiditate iusto dolores fugit quidem officiis.</td>
<td class="item02">Veniam, explicabo consequuntur blanditiis at dicta fuga ratione eos beatae.</td>
<td class="item01">Fuga voluptatum illo quis ducimus ad eveniet non. Saepe, eveniet.</td>
</tr>
</tbody>
</table>
div.nav>(nav#navbar>(ul>(li>a[href="/xxx/product/$" data-index=$]>lorem4)*5))+div.btn[type='button']>span{--}^^div#main
=>
<div class="nav">
<nav id="navbar">
<ul>
<li><a href="/xxx/product/1" data-index="1">Lorem ipsum dolor sit.</a></li>
<li><a href="/xxx/product/2" data-index="2">Culpa iste dolor cumque.</a></li>
<li><a href="/xxx/product/3" data-index="3">Corrupti qui consectetur eveniet!</a></li>
<li><a href="/xxx/product/4" data-index="4">Explicabo voluptas ipsam totam!</a></li>
<li><a href="/xxx/product/5" data-index="5">Dignissimos quibusdam vel illum.</a></li>
</ul>
</nav>
<div class="btn" type="button"><span>--</span></div>
</div>
<div id="main"></div>
俗话说好记性不如烂笔头，做个笔记，有空时候翻一翻。
在做笔记的时候，发现有篇文章记录得很齐全，偷个懒，上链接
