Emmet的使用技巧

1. 下面开始分享一写Emmet的使用技巧：

   （emmet可以直接在编辑器中输入HTML或CSS的代码的缩写，然后按tab键就可以拓展为完整的代码片段。）

   乘法符号：*

   缩写：ul>li*6 点击Tab ---

   <ul>

   <li></li>

   <li></li>

   <li></li>

   <li></li>

   <li></li>

   <li></li>

   </ul>

   加法符号：+

   缩写：div+p+bq 点击Tab ---

   <div></div>

   <p></p>

   <blockquote></blockquote>

   自增符：$

   缩写：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>

   缩写：h$[title=item$]{Header $}*3

   <h1 title="item1">Header 1</h1>

   <h2 title="item2">Header 2</h2>

   <h3 title="item3">Header 3</h3>

   缩写：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$@3*5

   <ul>

       <li class="item3"></li>

       <li class="item4"></li>

       <li class="item5"></li>

       <li class="item6"></li>

       <li class="item7"></li>

   </ul>

2. 缩写：div+div>p>span+em^bq

   <div></div>

   <div>

       <p><span></span><em></em></p>

       <blockquote></blockquote>

   </div>

   缩写：div+div>p>span+em^^bq

   <div></div>

   <div>

       <p><span></span><em></em></p>

   </div>

   <blockquote></blockquote>

   分组：使用()

   缩写：div>(header>ul>li*2>a)+footer>p

   <div>

       <header>

           <ul>

               <li><a href=""></a></li>

               <li><a href=""></a></li>

           </ul>

       </header>

       <footer>

           <p></p>

       </footer>

   </div>

   缩写：(div>dl>(dt+dd)*3)+footer>p

   <div>

       <dl>

           <dt></dt>

           <dd></dd>

           <dt></dt>

           <dd></dd>

           <dt></dt>

           <dd></dd>

       </dl>

   </div>

   <footer>

       <p></p>

   </footer>

3. ID和类属性

   缩写：#header

   <div id="header"></div>

   缩写：.title

   <div class="title"></div>

   缩写：form#search.wide

   <form id="search" class="wide"></form>

   缩写：p.class1.class2.class3

   <p class="class1 class2 class3"></p>

4. 自定义属性：[ ]

   缩写：p[title="Hello world"]

   <p title="Hello world"></p>

   缩写：td[rowspan=2 colspan=3 title]

   <td rowspan="2" colspan="3" title=""></td>

   缩写：[a='value1' b="value2"]

   <div a="value1" b="value2"></div>

   文本：{}

   缩写：a{Click me}

   <a href="">Click me</a>

   缩写：p>{Click }+a{here}+{ to continue}

   <p>Click <a href="">here</a> to continue</p>

   隐式标签

   缩写：.class

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

   缩写：em>.class

   <em><span class="class"></span></em>

   缩写：ul>.class

   <ul>

       <li class="class"></li>

   </ul>

   缩写：table>.row>.col

   <table>

       <tr class="row">

           <td class="col"></td>

       </tr>

   </table>