Emmet

Emmet

Emmet 官网：Emmet

HTML缩写

常用缩写共分为基本标签、嵌套规则、属性规则三类（个人将text缩写归为‘属性规则’类目下），此外还包含某些情形下的默认缩写规则。
通过RULE + tab展开缩写

Elements

基本标签，HTML中的基本标签可以直接自动补全

<!-- div -->
<div></div>

Nesting operators

嵌套规则，包含五种常用规则，分别为子级（>）、同级（+）、提升层级（^）、重复输出（*）、组输出（()）

Child: >

<!-- div>ul>li -->
<div>
  <ul>
    <li></li>
  </ul>
</div>

Sibling: +

<!-- div+p+bq -->
<div></div>
<p></p>
<blockquote></blockquote>

Climb-up: ^

<!-- div+div>p>span+em^^^bq -->
<div></div>
<div>
  <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

Multiplication: *

<!-- ul>li*2 -->
<ul>
  <li></li>
  <li></li>
</ul>

Grouping: ()

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

Attribute operators

属性规则，包含四种常用规则，分别为基本属性（# & .）、自定义属性（[]）、属性自增($)、文字属性（{}）

ID and CLASS：# & .

<!-- div#header+div.page+div#footer.class1.class2.class3 -->
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

Custom attributes：[]

<!-- td[title="Hello world!" colspan=3]+a[href=http://clunt.github.io/ data-type="link" class=class]{Fork Clunt On Github} -->
<td title="Hello world!" colspan="3"></td>
<a href="http://clunt.github.io/" data-type="link" class>Fork Clunt On Github</a>

Item numbering: $

<!-- ul>li.item$*2 -->
<ul>
  <li class="item1"></li>
  <li class="item2"></li>
</ul>

<!-- ul>li.$@p*3 -->
<ul>
  <li class="01p"></li>
  <li class="02p"></li>
  <li class="03p"></li>
</ul>

<!-- ul>li.$@0*3 -->
<ul>
  <li class="0"></li>
  <li class="1"></li>
  <li class="2"></li>
</ul>

<!-- ul>li.$@-0*3 -->
<ul>
  <li class="2"></li>
  <li class="1"></li>
  <li class="0"></li>
</ul>

<!-- ul>li.item$*2 -->
<ul>
  <li class="item001"></li>
  <li class="item002"></li>
</ul>

Text: {}

<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>

<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>

<!-- p>{Click }+a{here}+{ to continue} -->
<p>Click <a href="">here</a> to continue</p>

Implicit tag names

默认规则，当指明父标签时，符合默认规则的子标签可不必写出具体标签名

• li for ul, ol
• tr for table, tbody, head, tfoot
• td for tr
• option for select, optgroup

.wrap>.content
div.wrap>div.content

em>.info
em>span.info

ul>.item*3
ul>li.item\*3

table>#row$*4>[colspan=2]
table>tr#row$\*4>td[colspan=2]

CSS缩写

CSS缩写在使用过程中比较好掌握，但是在某些场景下会有一些细节需要注意。

• 数值组合
  w10 => width: 10px;
  m0a => margin: 0 auto;
  m10-0-5 => margin: 10px 0 5px;

作者：Clunt
链接：http://www.jianshu.com/p/5e099ebaa26a
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。