HTML初始构造

！+ Tab

疾速生成根底构造

id(#),class(.)

div#test

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

div.test

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

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

div>ul>li>p

<div>   <ul>     <li>       <p></p>     </li>   </ul> </div>

div+ul+p

<div></div><ul></ul><p></p>

div>ul>li^div (两个 ^ ^ 就是上下级)

<div>   <ul>     <li></li>   </ul>   <div></div> </div>

反复(*)

div5（号前面的数字就是反复的元素个数）

   <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>

属性([attr])

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

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

编号($)

ul>li.test$*3

<ul>      <li class="test1"></li>      <li class="test2"></li>      <li class="test3"></li>    </ul>

ul>li*3.test$@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>