emmet语法名称 操作符 Child(子标签) > Sibling (兄弟标签) + Climb-up(上级元素) ^ Grouping(分组) ( ) Multiplication(重复多份) * Item numbering(编号) $ ID # Class(类) . custom attributes(自定义属性) [ ] Text(文本) { } html页面模板 ! 隐式标签
子标签:div>ul>li
<div>
<ul>
<li></li>
</ul>
</div>
兄弟标签:div+p
<div></div>
<p></p>
上级标签:div+div>p>span+em^bq
<div></div>
<div>
<p>
<span></span>
<em></em>
</p>
<blockquote></blockquote>
</div>
分组: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>
复制多份:ul>li*5
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
编号: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>
ID:#header
<div id="header"></div>
类:.title
<div class="title"></div>
自定义属性:p[title="Hello world"]
<p title="Hello world"></p>
文本:a{Click me}
<a href="">Click me</a>
HTML模板:!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
隐式标签:
.class
<div class></div>
em>.class
<em><span class="class"></span></em>
ul>.class
<ul> <li class="class"></li></ul>
table>.row>.col
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>