sublime-emmet插件的使用小结

引自:http://www.w3cplus.com/tools/emmet-cheat-sheet.html
插件安装之后，输入以下命令后tab生成相应的html结构。

使用举例

1. p.item.item-${hello$}*10(内容自增)

<p class="item item-1">hello1</p>
<p class="item item-2">hello2</p>
<p class="item item-3">hello3</p>
<p class="item item-4">hello4</p>
<p class="item item-5">hello5</p>
<p class="item item-6">hello6</p>
<p class="item item-7">hello7</p>
<p class="item item-8">hello8</p>
<p class="item item-9">hello9</p>
<p class="item item-10">hello10</p>

2. nav>ul>li(嵌套)

<nav>
  <ul>
    <li></li>
  </ul>
</nav>

3. div+p+bq(兄弟节点)

<div></div>
<p></p>
<blockquote></blockquote>

4. div+div>p>span+em^bq(回溯到外层)

<div></div>
<div>
  <p><span></span><em></em></p>
  <blockquote></blockquote>
</div>

5. p.class1.class2.class3(多个类名)

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

6. p[title="Hello world"](自定义属性)

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

7. p>{Click }+a{here}+{ to continue}(文字内容)

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

8. form#search.wide(id)

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

本文原创，转载请注明出处。不足之处，恳请指正。