学习Emmet插件的使用

使用 Emmet 插件可以很大程度上，方便我们书写前端代码！

Emmet 使用类似于 CSS 选择器的语法来描述元素在生成的树和元素属性中的位置。

• 官网实例参考地址

---

1. 子元素 - >

使用 > 运算符将元素嵌套在彼此内

div>ul>li

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

---

2. 兄弟元素 - >

使用 + 运算符将元素放在同一层级上

div + p + block

<div></div>
<p></p>
<block></block>

---

3. 向上 - ^

使用 > 运算符可以向下生成并针对最深的元素解析所有兄弟元素的位置

div+div>p>span+em

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

使用 ^ 运算符可以向上爬升一个级别并更改显示以下元素的上下文

div+div>p>span+em^bq

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

---

4. 乘法 - *

使用 * 运算符可以定义元素输出的次数

ul>li*5

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

---

5. 分组 - ()

使用 () 括号内容对复杂缩写中的子树进行分组

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>

div>ul>(li>a)*2

<div>
  <ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</div>

---

6. 属性 - id/class

使用 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>

---

7. 缩写 - css

对应 CSS 语法，Emmet 有很多预定义的属性片段

div{
    m20
    p10-10
}

div {
  margin: 20px;
  padding: 10px 10px;
}

---

8. 自增 - $

可以使用 $ 字符来进行自增长操作，一个代表 1 开始，两个 01开始

div#page>div.logo+ul#navigation>li*5>a{Item $}

<div id="page">
  <div class="logo"></div>
  <ul id="navigation">
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    <li><a href="">Item 4</a></li>
    <li><a href="">Item 5</a></li>
  </ul>
</div>

div>ul>(li>a{test$$})*2

<div>
  <ul>
    <li><a href="">test01</a></li>
    <li><a href="">test02</a></li>
  </ul>
</div>

---

9. 自减 - $@-

可以使用 $@- 字符来进行自减操作

div>ul>(li>a{test$@-})*3

<div>
  <ul>
    <li><a href="">test3</a></li>
    <li><a href="">test2</a></li>
    <li><a href="">test1</a></li>
  </ul>
</div>

---

10. 起序 - $@n

可以使用 $@n 字符来表示从第几开始计数

div>ul>(li>a{test$@2})*5

<div>
  <ul>
    <li><a href="">test2</a></li>
    <li><a href="">test3</a></li>
    <li><a href="">test4</a></li>
    <li><a href="">test5</a></li>
    <li><a href="">test6</a></li>
  </ul>
</div>

---

11. 自定义属性 - []

可以使用 [] 字符来添加自定义的属性

p[title="Hello world"]

<p title="Hello world"></p>

---

12. 添加文本 - {}

可以使用 {} 字符来添加文本内容的具体内容

p>{Click }+a{here}+{ to continue}

<p>Click <a href="">here</a> to continue</p>

---

13. 隐式标签 - tag

Emmet 中定义了一些隐式标签提供我们使用

.class

<div class="class"></div>

ul>.class

<ul>
  <li class="class"></li>
</ul>

table>.row>.col

<table>
  <tr class="row">
    <td class="col"></td>
  </tr>
</table>