Emmet 食用指北

Emmet 是书写HTML元素时的简易标记，它有各种规则，帮助你快速生成HTML标签。

比如仅输入一个 ! , 再按下键盘上的TAB按键，一个HTML基本模板就生成了（前提是安装了Emmet插件）。

伟大的 VS Code 内置了这个插件。

如果当时老师有这么个酷酷的东西，我可能就不会对.jsp混乱的标记的学习感到厌烦了。

最重要的：解决了什么问题

规则的细枝末节是其次的，想想它解决了什么问题？

书写HTML标签时冗余的尖括号，属性名，鼠标频繁的定位操作、重复的封闭标签、重复的标签名等等

所以相应的简便方法自然而然就产生了，根本不需要死记硬背：

1. 针对尖括号，采取只写标签名，用TAB键补全封闭标签和一万个尖括号。
2. 针对鼠标定位，采取几个定位符号来逻辑上表明其位置。
3. 针对某个重复的标签名，采取数量符号进行标记。 等等。。

想清楚为什么，也就知道该怎么做了。根据二八法则，只列最有用的，毕竟我们要学语文没必要认识新华字典里的所有字。

任意标签

键入元素名， tag补全

单个元素内的属性

a#id
a.class
a[title=hello]

单个元素的数量：Multiplication *

• ul>li*3

单个元素内的内容

1. a{}

两个元素之间

1. 两个元素间的三种关系：下一级、同一级、上一级的同一级的下一个（因为出现了的必然有上级，只需要进行下一个）
2. 改变作用域，优先级不同：（）

child >

• nav>ul>li

<nav>
    <ul>
        <li></li>
    </ul>
</nav>
复制代码

sibling +

• nav+main+footer

<nav></nav>
<main></main>
<footer></footer>
复制代码

climb-up ^

• p>span+em^bq

<p><span></span><em></em></p>
<blockquote></blockquote>
复制代码

Grouping ()

• div>(header>ul>li*2>a)+footer>p

Item numbering $

• ul>li.argument$*3

可以用在内容、类名、id名、属性名中 $可以被以下代替：

• $$$
  • 代表三位数字：001、002、003
• $@-
  • 倒序排列，3、2、1
• $@3
  • @第三个位置开始， 3、4、5

<ul>
  <li class="argument1"></li>
  <li class="argument2"></li>
  <li class="argument3"></li>
</ul>
复制代码