HTML的Emmet语法

  1. 生成HTML初始结构!

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>

  2. 元素的id(#)和class.，以下为p#root.content的结果

    • #表示id，.表示class
    1
    <p id="root" class="content"></p>

  3. 元素的属性[]，以下为a[href='###' name='xiaoA']的结果

    1
    <a href="###" name="xiaoA"></a>

  4. 子节点>、兄弟节点+、上级节点^

    • 子节点>，以下为div>ul>li>p的结果

      1
      2
      3
      4
      5
      6
      7
      <div>
          <ul>
              <li>
                  <p></p>
              </li>
          </ul>
      </div>

    • 兄弟节点+，以下为div+ul+p的结果

      1
      2
      3
      <div></div>
      <ul></ul>
      <p></p>

    • 上一级^，以下为div>ul>ui^div^p的结果

      1
      2
      3
      4
      5
      6
      7
      <div>
          <ul>
              <ui></ui>
          </ul>
          <div></div>
      </div>
      <p></p>

  5. 重复*，以下为div*5的结果

    1
    2
    3
    4
    5
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

  6. 分组()

    • 分组是为了确定优先级

    • 以下为div>ul>li>a+div>p的结果，a和第二个div是平级的

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      <div>
          <ul>
              <li>
                  <a href=""></a>
                  <div>
                      <p></p>
                  </div>
              </li>
          </ul>
      </div>

    • 以下为div>(ul>li>a)+div>p的结果，ul和第二个div是平级的

      1
      2
      3
      4
      5
      6
      7
      8
      9
      <div>
          <ul>
              <li><a href=""></a></li>
          </ul>
          <div>
              <p></p>
          </div>
      </div>
      <p></p>

  7. 编号$

    • 一个$表示一位数，之后跟*n表示从1递增，共n个

    • 如果从m开始递增就用$@m*n

    • 以下是ul>li.test$@5*5的结果

      1
      2
      3
      4
      5
      <ul>
          <li class="test5"></li>
          <li class="test6"></li>
          <li class="test7"></li>
      </ul>

  8. 文本{}，以下为ul>li{你好$@2}*3的结果

    1
    2
    3
    4
    5
    <ul>
        <li>你好2</li>
        <li>你好3</li>
        <li>你好4</li>
    </ul>

  9. 隐式标签，可以在.前留空，自动识别父标签

    • 直接.，生成div标签

    • ul>.、ol，生成li标签

    • select>.、optgroup，生成option标签

    • tr>.，生成td标签

    • table、tbody、thrad、tfoot，生成tr标签

    • 综合上述情况进行举例.test+(ul>.test$*2)+(select>.test$@3*3)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      <div class="test"></div>
      <ul>
          <li class="test1"></li>
          <li class="test2"></li>
      </ul>
      <select name="" id="">
          <option class="test3"></option>
          <option class="test4"></option>
          <option class="test5"></option>
      </select>