官方文档：https://docs.emmet.io/cheat-sheet

HTML 初始结构(!)

先输入！然后按 tab 生成基础结构

p20200101013412.png

id(#)和 class(.)

  • div#test
    <div id="test"></div>
  • div.test
    <div class="test"></div>
  • form#search.wide
    <form id="search" class="wide"></form>
  • p.class1.class2.class3
    <p class="class1 class2 class3"></p>

子节点(>)，兄弟结点(+)，上级节点(^)

  • div>ul>li>p
<div>
   <ul>
     <li>
       <p></p>
     </li>
   </ul>
 </div>
  • div+ul+p
<div></div>
<ul></ul>
<p></p>
  • div>ul>lidiv (这里的 是接在 li 后面所以在 li 的上一级，与 ul 成了兄弟关系，当然两个 ^^ 就是上上级）
<div>
   <ul>
     <li></li>
   </ul>
   <div></div>
 </div>

重复(*)

  • div*5
<div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>

分组( () )

  • div>(ul>li>a)+div>p
    （括号里面的内容为一个代码块，表示与括号内部嵌套和外面的的层级无关）
<div>
   <ul>
     <li><a href=""></a></li>
   </ul>
   <div>
     <p></p>
   </div>
 </div>

解释：这里如果不加括号的话，猜想下，a+div 这样 div 就是和 a 是兄弟关系了，会包含在 li 里面。

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

属性([attr])

  • a[href name]
    <a href="" name=""></a>
  • a[href=# name=test]
    <a href="#" name="test"></a>
  • p[title="Hello world"]
    <p title="Hello world"></p>

编号($)

  • ul>li.test$*3 代表一位数，后面跟上*数字就代表从 1 递增到填写的数字）
<ul>
   <li class="test1"></li>
   <li class="test2"></li>
   <li class="test3"></li>
 </ul>
  • ul>li.test$$*3
<ul>
    <li class="test01"></li>
    <li class="test02"></li>
    <li class="test03"></li>
</ul>
  • ul>li.test$@3*3
    @表示从几开始
<ul>
    <li class="test3"></li>
    <li class="test4"></li>
    <li class="test5"></li>
</ul>

文本({})

  • ul>li.test$*3{测试$ } （{里面填写内容，可以和 $ 一起组合使用哦}）
<ul>
  <li class="test1">测试1</li>
  <li class="test2">测试2</li>
  <li class="test3">测试3</li>
</ul>

隐式标签

这个标签没有指令，而是部分标签可以不使用输入标签，直接输入指令，即可识别父类标签。

  • .test
    <div class="test"></div>
  • ul>.test$*3
<ul>
   <li class="test1"></li>
   <li class="test2"></li>
   <li class="test3"></li>
 </ul>
  • select>.test$*5
<select name="" id="">
  <option class="test1"></option>
  <option class="test2"></option>
  <option class="test3"></option>
  <option class="test4"></option>
  <option class="test5"></option>
</select>

隐式标签有如下几个：

  1. li：用于 ul 和 ol 中
  2. tr：用于 table、 tbody、 thead 和 tfoot 中
  3. td：用于 tr 中
  4. option：用于 select 和 optgroup 中