1.1 生成html初始文档

1
2
3
!+tab或者html:5   生成html5文档的初始结构
html:xt           生成html4过渡型
html:4s           生成html4严格型）

生成的文档如下：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

1.2 生成带有id,class的HTML标签

1.

1
#aaa  生成一个ID为aaa的div

生成结构如下：

1
<div id="aaa"></div>

2.

1
ul#ccc.ddd   生成一个ID为ccc,class为ddd的ul

生成结构如下：

1
<ul id="ccc" class="ddd"></ul>

1.3 生成后代 “>”

1
div.aaa>ul>li   生成一个无序列表，而且被class为aaa的div包裹

生成结构如下：

1
2
3
4
5
<div class="aaa">
     <ul>
         <li></li>
     </ul>
</div>

1.4 生成兄弟

1
div+p+dp
1
2
3
<div></div>
<p></p>
<dp></dp>

1.5 生成上级元素 “^”

上级 （Climb-up）元素是什么意思呢？前面咱们说过了生成下级元素的符号“>”，当使用 div>ul>li 的指令之后，再继续写下去，那么后续内容都是在 li 下级的。如果我想编写一个跟 ul 平级的 span 标签，那么我需要先用 “^” 提升一下层次。例如：

1
div>ul>li^span
1
2
3
4
5
6
<div>
    <ul>
        <li></li>
    </ul>
    <span></span>
</div>

如果我想生成一个与div平级的span，那么就再上升一个层级，多用一个^

1
div>ul>li^^span
1
2
3
4
5
6
<div>
    <ul>
        <li></li>
    </ul>
</div>
<span></span>

1.6重复生成多份*

1
ul>li*5
1
2
3
4
5
6
7
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

1.7生成分组()

1
div>(header>ul>li*2>a)+footer>p
1
2
3
4
5
6
7
8
9
10
<div></div>
 <header>
     <ul>
         <li><a href=""></a></li>
         <li><a href=""></a></li>
     </ul>
 </header>
 <footer>
     <p></p>
 </footer>

分组还可以结合上面的*符号生成重复结构

1
(div>dl>(dt>dd)*3)+footer>p
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div>
   <dl>
        <dt>
            <dd></dd>
        </dt>
        <dt>
            <dd></dd>
        </dt>
        <dt>
            <dd></dd>
        </dt>
    </dl>
</div>
<footer>
    <p></p>
</footer>

1.8生成自定义属性[attr]

a 标签中往往需要附带 href 属性和 title 属性，如果我们想生成一个 href 为 “http://google.com” ，title 为“我爱水煮鱼”的 a 标签，可以这样写：

1
a[href="www.google.com" title="我爱水煮鱼"]
1
<a href="www.google.com" title="我爱水煮鱼"></a>

1.9生成内容编号$

1
ul>li.item$*5
1
2
3
4
5
6
7
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>
1
ul>li.item$$$*5
1
2
3
4
5
6
7
<ul>
   <li class="item001"></li>
   <li class="item002"></li>
   <li class="item003"></li>
   <li class="item004"></li>
   <li class="item005"></li>
</ul>

只能这样单调的生成序号？对于强大的 Emmet 来说，肯定不会会了，我们也可以在 $ 后面增加 @- 来实现倒序排列：

1
ul>li.item$@-*5
1
2
3
4
5
6
7
<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

我们也可以使用@N指定开始的序号

1
ul>li.item$@3*5
1
2
3
4
5
6
7
<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

配合上面倒序输出，可以这样写:

1
ul>li.item$@-3*5
1
2
3
4
5
6
7
<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>

2.0生成文本内容{}

1
a[href="www.google.com"]{click me}

或者

1
a[href="www.google.com"]>{click me}
1
<a href="www.google.com">click me</a>

注意不能有空格