Emmet语法练习实例

1.标签与内容

语法：标签+大括号

h3{这里填写内容}
生成：

<h3>这里填写内容</h3>

2.属性和语法糖

语法：[属性]{内容}
[id=test]{测试}
生成：

<div id="test">测试</div>

[class=title]{test}
生成：
<div class="title">test</div>

注：div标签是默认，可以不写

语法糖： #=id .=class
语法：
.title{test}
生成：

<div class="title">test</div>

语法：
#test{测试}
生成：

<div id="test">测试</div>

3.重复 *

重复用*号，要重复几行就在*号后面加数字几
语法：
#test{测试}*3
生成：

    <div id="test">测试</div>
    <div id="test">测试</div>
    <div id="test">测试</div>

---

4.父子 >

父子级用>号
语法：
ul>li{练习}*3
生成：

    <ul>
      <li>练习</li>
      <li>练习</li>
      <li>练习</li>
    </ul>

---

5.兄弟 +

兄弟级用+号
语法：
ul+p+li
生成:

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

---

6.父级^

父级用^号，shift+数字6可以打出来
语法：
ul>li{test}*3^h3
生成：

    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
    <h3></h3>

---

7.分组()

分组加（）
语法：
div>h3{标题}+(ul>li*3>a{test})
生成：

    <div>
      <h3>标题</h3>
      <ul>
        <li><a href="">test</a></li>
        <li><a href="">test</a></li>
        <li><a href="">test</a></li>
      </ul>
    </div>

---

8.序号 $ $@ $@-1

语法：$从1开始正序
ul>li{test$}*3
生成：

    <ul>
      <li>test1</li>
      <li>test2</li>
      <li>test3</li>
    </ul>

---

语法：$@自定义从整数几开始正序
ul>li{test$@5}*3
生成：

    <ul>
      <li>test5</li>
      <li>test6</li>
      <li>test7</li>
    </ul>

---

语法：$@-1倒序
ul>li{test$@-1}*3
生成：

    <ul>
      <li>test3</li>
      <li>test2</li>
      <li>test1</li>
    </ul>