一、Emmet支持的简写规则:
1. E 代表HTML标签。
2. E#id 代表id属性。
3. E.class 代表class属性。
4. E[attr=foo] 代表某一个特定属性。
5. E{foo} 代表标签包含的内容是foo。
6. E>N 代表N是E的子元素。
7. E+N 代表N是E的同级元素。
8. E^N 代表N是E的上级元素。
二、Emmet连写(E*N)和自动编号(E$*N)
li*3>a
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
div#item$.class$$*3
<div id="item1" class="class01"></div>
<div id="item2" class="class02"></div>
<div id="item3" class="class03"></div>
div#item$.class$*3
<div id="item1" class="class1"></div>
<div id="item2" class="class2"></div>
<div id="item3" class="class3"></div>
三、常用简写操作
a)header+main+footer:
<header></header>
<main></main>
<footer></footer>
b)table[width=100%][cellpadding=0][cellspacing=0][border=0](thead>tr>th*5)(tbody>tr*2>td*5)
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
c)nav>ul>(li>a[href=#]{Link$})*5
<nav>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
d)nav>ul>(li>a[href=#]{Link$$})*5
<nav>
<ul>
<li><a href="#">Link01</a></li>
<li><a href="#">Link02</a></li>
<li><a href="#">Link03</a></li>
<li><a href="#">Link04</a></li>
<li><a href="#">Link05</a></li>
</ul>
</nav>
e)nav>ul>(li>a[href=#]{Link$})*5
<nav>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>
</nav>
f)html:5
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
g)div.layout>div.layout_t+(div.layout_c>div.layout_c_l+div.layout_c_r)+div.layout_b
<div class="layout">
<div class="layout_t"></div>
<div class="layout_c">
<div class="layout_c_l"></div>
<div class="layout_c_r"></div>
</div>
<div class="layout_b"></div>
</div>
h)@0 从0开始:(input[type=radio][value=$@0][name=radio_time][id=radio_time_$@]+label[for=radio_time_$@0])*3
<input type="radio" value="0" name="radio_time" id="radio_time_0">
<label for="radio_time_0"></label>
<input type="radio" value="1" name="radio_time" id="radio_time_1">
<label for="radio_time_1"></label>
<input type="radio" value="2" name="radio_time" id="radio_time_2">
<label for="radio_time_2"></label>