Emmet：快速代码编写工具

为什么有Emmet

Q：新手们（比如说我2333）开始学HTML的时候，都会一个字母一个字母敲代码，后来做小项目使用IDE，也有快捷键可以帮助我们快速写出一些标签。但随着我们越学越深，项目越来越大，常常会遇到项目里面重复的html结构非常多的情况，举例来说我们需要插入9个板式一样的图片，这个时候难道还是用键盘一个一个输
<image>标签吗？

A：Emmet就解决了这个问题，大大加速了大型项目结构代码的构建效率。（对于菜鸟我来说它的存在就像一个小仙女，以后实践各种demo效率不愁了哈哈 :-D）

Emmet又称ZenCoding，绝对是web开发人员人手必备的提高效率的工具。最近我在学习Emmet，借此机会将语法整理下来。

---

Emmet语法缩写规范

快捷键

在SublimeText3中 (我用的是mac)，是用control + e 代替tab，可以快速生成标签

元素

在官方文档声明Emmet使用与CSS选择器类似的语法，来描述元素在已生成DOM树中的位置以及元素的属性。注意，在Emmet中，你可以使用任意标签名来生成，比如

div → <div></div>

foo → <foo></foo>

我个人认为，这里给出的自由度也许与XML有些关联，因为XML语言也方便了大家可以自定义想要的标签名（有待考证哈，知道的前辈可以留下评论，欢迎指正）。

嵌套操作符

Child子节点：>

使用>操作符来嵌套节点

div>ul>li

…结果如下

<div>
    <ul>
        <li></li>
    </ul>
</div>

Sibling兄弟节点：+

使用+操作符来放置节点

扫描二维码关注公众号，回复： 11216506 查看本文章

div+p+bq

…结果如下

<div></div>
<p></p>
<blockquote></blockquote>

Climb-up返回上一级(DOMtree的层级)：^

如果你输入div+div>p>span+em, 会输出结果：

  <div></div>
  <div>
    <p>
        <span></span>
        <em></em>
    </p>
  </div>

那么如果我们想在<p>元素后面加一个兄弟节点呢？我们可以使用^操作符

即这样写div+div>p>span+em^bq, ^被使用时，将返回上一级，所以输出如下

<div></div>
<div>
    <p>
        <span></span>
        <em></em>
    </p>
    <blockquote></blockquote> <!-- 在这里添加了兄弟节点bq -->
</div>

我们可以使用任意个^操作符来返回任意层级之前，比如：

div+div>p>span+em^^^bq

会生成代码：

<div></div>
<div>
    <p>
        <span></span>
        <em></em>
    </p>
</div>
<blockquote></blockquote>

所以官方文档给其起名为Climb-up操作符还是很精准的，一层一层像上爬嘛。

Multiplication乘号：*

这是我觉得Emmet最方便的地方了，你可以仅用一行代码写出任意个重复的单元。

比如ul>li*5会输出：

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

怎么样，很方便吧？

Grouping括号：()

是不是感觉Climb-up机制使用起来很不方便，稍微复杂一点感觉就要绕晕了@.@，那么有一个非常简单的代替，就是（）啦，与算术表达式中的括号一样，它可以帮助我们清晰的看明白表达式所代表的DOM树的层级。

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>

你想在哪一级使用括号都可以（比如最上一级），并且可以将他们与任意个乘号*连用，实现复杂的DOM结构

(div>dl>(dt+dd)*3)+footer>p

将会输出：

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

确实使用括号可以方便到你可以把整个文档结构一次写出来，但官方建议不这么做，毕竟太容易出错了嘛。

属性操作符

ID和CLASS

和在CSS中的语法一样，使用elem#id或者elem.class来为节点添加属性，如

div#header+div.page+div#footer.class1.class2.class3

将输出：

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

<待完善：其他的等用到的时候再来补充 :) >

（以上代码均参考自官方文档）