HTML初始结构

！+Tab

快速生成基础结构

id(#),class(.)

div#test

  1. <div id="test"></div>

div.test

  1. <div class="test"></div>

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

div>ul>li>p

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

div+ul+p

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

div>ul>li^div（两个^^就是上上级）

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

重复(*)

div5（号后面的数字就是重复的元素个数）

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

分组(())

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

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

属性([attr])

a[href=’###’ name=’xiaoA’]

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

编号($)

ul>li.test$*3

  1. <ul>
  2.    <li class="test1"></li>
  3.    <li class="test2"></li>
  4.    <li class="test3"></li>
  5.  </ul>

ul>li*3.test$@3

  1. <ul>
  2.    <li class="test3"></li>
  3.    <li class="test4"></li>
  4.    <li class="test5"></li>
  5.  </ul>

文本({})

ul>li.test$*3{测试$} 

  1. <ul>
  2.   <li class="test1">测试1</li>
  3.   <li class="test2">测试2</li>
  4.   <li class="test3">测试3</li>
  5. </ul>

隐式标签

.test

  1. <div class="test"></div>

ul>.test$*3

  1.  <ul>
  2.    <li class="test1"></li>
  3.    <li class="test2"></li>
  4.    <li class="test3"></li>
  5.  </ul>

select>.test$*5

  1. <select name="" id="">
  2.   <option class="test1"></option>
  3.   <option class="test2"></option>
  4.   <option class="test3"></option>
  5.   <option class="test4"></option>
  6.   <option class="test5"></option>
  7. </select>