Emmet语法规则作为一个加快HTML编写方式，只需要一行的代码就能快速的生成HTML的结构。如，在前端相关视频中常见的在编辑器中输入 div#(id名) 就能快速的生成一个带id的div结构，这些都是Emmet语法的一部分。目前Emmet被Atom，Vscode等大多数的编辑器所支持。。
示例
如以下代码：
1
| div.contain#main>div.content>ul>li$*3{列表$}^img[src="img.jpg" alt="test"]+select>.test$$@10*5
|
此段代码包含了Emmet大多数的语法规则。
当在编辑器中桥下tab会生成如下代码(此处用的是Vscode)：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <div class="contain" id="main">
<div class="content">
<ul>
<li1>列表1</li1>
<li2>列表2</li2>
<li3>列表3</li3>
</ul>
<img src="img.jpg" alt="test">
<select name="" id="">
<option class="test10"></option>
<option class="test11"></option>
<option class="test12"></option>
<option class="test13"></option>
<option class="test14"></option>
</select>
</div>
</div>
|
语法
id和类名：.与#
说明：.与#分别对应class名和id名，在标签，如div标签的后面加上.或者#可以指定相应的class名和id名。
示例：
1
2
|
<div id="main" class="contain"></div>
|
节点：>与+与^
说明：>代表当前节点的子节点，+代表当前节点的兄弟节点，^代表当前节点的父节点。如div>div表示div下嵌套了另外一个div。div+div表示两个同层次下的div，div^div表示后者div嵌套在前者div的父层下。
示例：
1
2
3
4
5
6
7
8
9
10
11
|
<ul>
<li></li>
</ul>
<li></li>
<li></li>
<a href=""></a>
<div>
</div>
|
重复：*
说明：*后面加上数字代表标签重复的个数。
示例：
分组：()
说明：不是很好说明，简单理解为括号里的是单独的一块，有点类似敲代码时括号的作用。
示例：
1
2
3
4
5
6
7
8
|
<div>
<ul>
<li></li>
</ul>
</div>
<div>
</div>
|
属性：[]
说明：在标签后面加上[]可以指定相关的属性。使用属性名=属性的形式，多个之间使用空格隔开
示例：
编号：$
说明：$代表一位数，多个$连用可以代表多个数，如$$代表两位数，一般与*连用。$@开始数可以指定开始的数值。$@-可以指定倒序。
1
2
3
4
5
6
7
8
9
10
11
12
|
<li class="test1"></li>
<li class="test2"></li>
<li class="test3"></li>
<li class="test3"></li>
<li class="test4"></li>
<li class="test5"></li>
<li class="test3"></li>
<li class="test2"></li>
<li class="test1"></li>
|
文本内容：{}
说明：通过使用{}来指定标签之间的文本内容。
示例：
自动识别标签
说明：可以直接通过#id名或者.类名来输入标签，会自动识别当前标签类型。默认情况下直接输入为div，ul子节点为li等。
示例：
1
2
3
4
5
6
7
8
9
10
|
<div class="main"></div>
<ul>
<li class="list"></li>
</ul>
<tr>
<td class="list"></td>
</tr>
|
使用习惯后撸HTML的速度能起飞。
