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;

拓展

未完待续……

推荐阅读更多精彩内容

  • Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生。它使用仿CS...
    不是红A是土狼阅读 567评论 0 1
  • 摘要 安装请看上一篇Sublime Text—安装,和sublime自带快捷键一起用,写html简直快的飞起。 下...
    easyblue阅读 1,103评论 0 5
  • http://www.iteye.com/news/27580Emmet的前身是大名鼎鼎的Zen coding,如...
    冰J冰阅读 2,258评论 0 6
  • Emmet 功能snippet(代码片段,不如用专门的片段插件)abbreviation expand(简写展开)...
    lililifeng阅读 123评论 0 2
  • 18-白皇后-小咪 今天的作业是和宝贝一同完成的,看到这张图,他说像妈妈的乳房。我想,这可能是他最初最切实的安全感来源吧
    小咪小少女阅读 29评论 0 0