Emmet 语法

Mr.Hope ... 2019-09-03 HTML
大约 2 分钟

简介

所有操作按下 “tab” 键即可瞬间完成

Emmet 是一个快速创建 HTML 的方式,如果您想要成为一个高级 Web 开发者,为了工作效率,您应该掌握 Emmet 语法。

# 元素

  1. 在编辑器中输入元素名称,即可自动补全生成 HTML 标签,即使不是标准的 HTML 标签。

  2. 输入: ! 或者 html:5 或者 html:4s 或者 html:4t 将自动补全 html 基本结构。

# 嵌套操作

  1. 使用“>”生成子元素

    案例

    div>ul>li:

    <div>
      <ul>
        <li></li>
      </ul>
    </div>
    
    1
    2
    3
    4
    5
  2. 使用“+”生成兄弟元素

    案例

    div+p+bq:

    <div></div>
    <p></p>
    <blockquote></blockquote>
    
    1
    2
    3
  3. 使用“^”生成父元素

    案例

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

    <div></div>
    <div>
      <p><span></span><em></em></p>
      <blockquote></blockquote>
    </div>
    
    1
    2
    3
    4
    5
  4. 使用“*”生成多个相同元素

    案例

    div>ul>li*5:

    <div>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
  5. 使用 “()” 将元素分组

    + 后面的元素与括号中的第一个元素属于兄弟关系

    案例

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

    <div>
      <header>
        <ul>
          <li></li>
          <li></li>
        </ul>
      </header>
      <footer>
        <p></p>
      </footer>
    </div>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

# 属性操作

  1. id 与 class: 元素与 id 属性值之间用 # 分隔,与 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>
    
    1
    2
    3
  2. 使用[]标记其他属性

    在 Emmet 中,无需输入引号,直接使用 [属性1=值1 属性2=值2 ... ] 即可。

    案例

    td[title=hello colspan=3]:

    <td title="hello" colspan="3"></td>
    
    1
  3. $ 符号实现 1n 的自动编号 (* 实现多个元素)

    案例

    li.item$*3:

    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    
    1
    2
    3

    可在 $ 后添加 @n 修改编号的起始值为 n

    案例

    li.item$@3*3:

    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    
    1
    2
    3

    可在 “$” 后添加 “@-” 修改编号的方向。

    案例

    li.item$@-3*3:

    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    
    1
    2
    3
  4. {} 添加文本内容

    案例

    a[href=me.html]{click me}:

    <a href="me.html">click me</a>
    
    1