Emmet使用特定的语法来展开小段代码，它类似CSS选择器，使其成为完整的HTML代码。

运行环境 Runtime environment

1
2
3
操作系统 ： Windows10
IDE: JetBrains WebStorm 2018.2.1 x64
浏览器： Google Chrome 版本 67.0.3396.99（正式版本） （64 位）&& FireFox Developer Edition 版本63.0b4  (64位)

背景

感觉背景似乎也没有人看的啦。主要是为方便自己前端开发能够更加省事，所以需要使用Emmet语法。
这已经成为了一种习惯了，确实可以提高开发效率，总是复制粘贴什么的，也是略烦的事情。
本人使用的是 Webstrom 代码编辑器，因此是内置了 Emmet 语法的。
如果你使用的是 Sublime或者Notapad++ 编辑器的话，可以去下载相应插件，这个在网上都是有教程的，可以去搜索一下。

Emmet（以前名为Zen Coding）是一套面向文本编辑器的插件，它允许通过内容辅助高速度的编写和编辑HTML、XML、XSL和其他结构化的代码格式。
此项目2008年由Vadim Makeev发起，并由Sergey Chikuyonok和其他Emmet用户基于Zen Coding 2.0的概念继续积极开发。
这套工具已经被一些高端的文本编辑器采纳，以及存在于Emmet团队开发或其他人独立实现的插件中。
不过，Emmet独立于任何文本编辑器，它的引擎可以直接处理文本，而无需与任何特定软件相关。
Emmet以MIT许可证开源。
简单来说，就是可以快速构建 HTML 结构的快捷语法。

嵌套运算符（Nesting Operator）

嵌套运算符用于在生成的树内定位缩写元素：它是否应该放置在上下文元素内部或附近。

  1. 子代操作符（Child）：>

就像我们使用 CSS 选择器那样，我们可以使用 > 操作符来创建我们的子代。
当我在编辑器中使用这个操作符进行如下代码的创建：

div>ul>li>a>p>span>b>h1

在Emmet语法的最后瞧上tab键，便会得出以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div>
    <ul>
        <li>
            <a href="">
                <p>
                    <span>
                        <b>
                            <h1></h1>
                        </b>
                    </span>
                </p>
            </a>
        </li>
    </ul>
</div>

通过观察，可以得出结论：Emmet语法的>的递进是可以无穷的，你想包含多少级的HTML标签都没有问题。
“>”符号前的标签包含“>”附后后的标签的意思。例如“ div>ul”，即div标签中有ul标签。

  1. 同级操作符（Sibling）：+

上面我们讲到了，创建子代的方法。但是现在，我们希望子代中的 div 有多个 p 标签成为同一级，都是父级 div 的子代而不是递进包含关系。

div>p+span+p+p

在Emmet语法的最后瞧上tab键，便会得出以下代码：

1
2
3
4
5
6
<div>
    <p></p>
    <span></span>
    <p></p>
    <p></p>
</div>

如此，它们就成为了同级的元素。

  1. 返回上级操作符（Climb-up）：^

这时候，我想要在父级元素的 div 的同级再创建一个 div 怎么办呢？

div>p+span+p+p^div

在Emmet语法的最后瞧上tab键，便会得出以下代码：

1
2
3
4
5
6
7
<div>
    <p></p>
    <span></span>
    <p></p>
    <p></p>
</div>
<div></div>(这里多了个div)

每多一个“^”符号就会多返回一层父级

div>div>div>p^^^button

在Emmet语法的最后瞧上tab键，便会得出以下代码：

1
2
3
4
5
6
7
8
<div>
    <div>
        <div>
            <p></p>
        </div>
    </div>
</div>
<button></button>

用了多少“>”,就可以用多少“^”会到顶层父级。

  1. 乘法操作符（Multiplication）：*

用到重复元素最多的地方要数 ul 中的 li 了。一个一个复制，这显然是很麻烦而又枯燥的一件事情。

ul>li*5

在Emmet语法的最后瞧上tab键，便会得出以下代码：

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

ul标签下出现了5个li标签！

  1. 分组操作符（Grouping）：()

以上的方法若是简单的html还行，如果父级太多，那要是返回，那就太麻烦了。
这是就需要“（）”来封装它们，它们变成一个整体，就轻松的解决了问题，那就来个困难点的布局。
将网页分为了 header、main 和 footer 三个页面结构。

div>(header>h1+div>b)+(main>(h2>h3+div>p)+(h2>h3+div>p)+(h2>h3+div>p))+(footer>ul>li*5)

在Emmet语法的最后瞧上tab键，便会得出以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div>
    <header>
        <h1></h1>
        <div><b></b></div>
    </header>
    <main>
        <h2>
            <h3></h3>
            <div>
                <p></p>
            </div>
        </h2>
        <h2>
            <h3></h3>
            <div>
                <p></p>
            </div>
        </h2>
        <h2>
            <h3></h3>
            <div>
                <p></p>
            </div>
        </h2>
    </main>
    <footer>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </footer>
</div>

通过观察，很容易就能总结出规律了，“()”分组，可以让复杂的需求简单化。

属性操作符（Attribute Operators）

通过以上一些实例都是在HTML标签嵌套并级的快捷生成上做文章，要给各种标签添加”id、class”属性，
是不是也能用Emmet语法快捷生成呢？
答案:可以啊，当然可以！
属性运算符用于修改输出元素的属性。

  1. ID 和 Class（ID and CLASS）

div#wrapbox1>div.container>p.news

在Emmet语法的最后瞧上tab键，便会得出以下代码：

1
2
3
4
5
<div id="wrapbox1">
    <div class="container">
        <p class="news"></p>
    </div>
</div>

So easy!标签后跟上“#”然后是id名，即可。如果跟上“.”+class名，即可。
但是如果一个标签含有多个class或者id的话，要如何实现？

div#wrapbox1#rank-list>div.container.text-center.flags>p.news#music

在Emmet语法的最后瞧上tab键，便会得出以下代码：

1
2
3
4
5
<div id="wrapbox1 rank-list">
    <div class="container text-center flags">
        <p class="news" id="music"></p>
    </div>
</div>

以上代码，实现三种情况，多个id的情况，多个class的情况，以及class和id一起的情况。

  1. 定制属性（Custom attributes）

那么如果当碰到类似“a”标签这样有“href、target、title”多个属性的，用Emmet语法改怎么实现呢？
这时候，我们就需要使用中括号[] 来将其括起来。[]中间的内容就是该标签的各个属性了。

div>a[href=’#’ target=’’ title=’nya’]*5

在Emmet语法的最后瞧上tab键，便会得出以下代码：

1
2
3
4
5
6
7
<div>
    <a href="#" target="" title="nya"></a>
    <a href="#" target="" title="nya"></a>
    <a href="#" target="" title="nya"></a>
    <a href="#" target="" title="nya"></a>
    <a href="#" target="" title="nya"></a>
</div>

这样就可以自由的操作标签的属性了。

  1. 文本操作符（Text）：{}

使用大括号 {} 来对其输入一定的内容，就是生成标签中夹着的内容。这个操作符就很简单啦。

h1{喵喵喵}+p{汪汪汪}+b{咕咕咕}

在Emmet语法的最后瞧上tab键，便会得出以下代码：

1
2
3
<h1>喵喵喵</h1>
<p>汪汪汪</p>
<b>咕咕咕</b>

太简单了，没啥总结的一看就懂了。

  1. 计算操作符（Item numbering）：$

随着乘法操作符的生成，可以递增或者递减的变化数字

ul#id-$*3>li.class-$@-{内容$@-3,内容$@3}*5

在Emmet语法的最后瞧上tab键，便会得出以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<ul id="id-1">
    <li class="class-5">内容7,内容3</li>
    <li class="class-4">内容6,内容4</li>
    <li class="class-3">内容5,内容5</li>
    <li class="class-2">内容4,内容6</li>
    <li class="class-1">内容3,内容7</li>
</ul>
<ul id="id-2">
    <li class="class-5">内容7,内容3</li>
    <li class="class-4">内容6,内容4</li>
    <li class="class-3">内容5,内容5</li>
    <li class="class-2">内容4,内容6</li>
    <li class="class-1">内容3,内容7</li>
</ul>
<ul id="id-3">
    <li class="class-5">内容7,内容3</li>
    <li class="class-4">内容6,内容4</li>
    <li class="class-3">内容5,内容5</li>
    <li class="class-2">内容4,内容6</li>
    <li class="class-1">内容3,内容7</li>
</ul>

以上包含了五种规律：
(1)只加”$”符号ul标签的id名字为递增；
(2)”$”后加上”@-“符号li标签的class名字为递减，还说明class命名也受”$”的变化而变化；
(3)”$@”+数字”3”，使其内容部分以”3”为初始值然后递增；
(4)如果使用”$@-“+数字”3”，则是从别的数字倒数至”3”；
(5)说明”id、class、{}”也受”$”的变化而变化；

总结

Emmet常用的用法就在于此了，当然这也不是全部。还有一部分是Emmet对css快捷生成的语法，但是用得太少了，就不多介绍了。
最后来一串超级秀的Emmet的语句作为本次学习的收尾！

(li>(p.update-list-left>a[href=’#’ target=’_blank’ title=’书的类别’]{类型$《}+a[href=’#’ target=’_blank’ title=’书的名字’]{书名$》})+p.update-list-center>a[href=’#’ target=’_blank’ title=’书的名字’]{标题$}+(p.update-list-right>a.update-writer[href=’#’ target=’_blank’ title=’作者名’]{作者$}+span.update-time{18-10-0$}))*20