Emmet使用

emmet官方文档

 

【翻译】Emmet (ZenCoding) 缩写语法

<!-- ul>li.item$*5 -->
  <ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
  </ul>

  <!-- ul>li.item$$$*5 -->
  <ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
  </ul>

  <!-- ul>li.item$@-*5 -->
  <ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
  </ul>

  <!-- ul>li.item$@-*5 -->
  <ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
  </ul>

  <!-- ul>li.item$@3-*5 -->
  <ul>
    <li class="item3-"></li>
    <li class="item4-"></li>
    <li class="item5-"></li>
    <li class="item6-"></li>
    <li class="item7-"></li>
  </ul>

  <!-- ul>li.item$@3-s*5 -->
  <ul>
    <li class="item3-s"></li>
    <li class="item4-s"></li>
    <li class="item5-s"></li>
    <li class="item6-s"></li>
    <li class="item7-s"></li>
  </ul>

  <!-- ul>li.item$@-3*5 -->
  <ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
  </ul>


  <!-- a[href]{click} -->
  <!-- a{click} -->
  <!-- a>{click} -->
  <a href="">click</a>

  <!-- a{click}+b{here} -->
  <a href="">click</a><b>here</b>
  <!-- a>{click}+b{here} -->
  <a href="">click<b>here</b></a>

  <!-- p>{click}+a{here}+{to continue} -->
  <p>click<a href="">here</a>to continue</p>
  <!-- p{Click }+a{here}+{ to continue} -->
  <p>Click </p>
  <a href="">here</a> to continue

  <!-- (header > ul.nav > li*5) + footer 有空格:停止缩写解析 -->
  (header > ul.nav > li*5) + <footer></footer>
  <!-- (header>ul.nav>li*5)+footer -->
  <header>
    <ul class="nav">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </header>
  <footer></footer>

View Code