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;

拓展

未完待续……

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容

  • 摘要 安装请看上一篇Sublime Text—安装,和sublime自带快捷键一起用,写html简直快的飞起。 下...
    easyblue阅读 2,610评论 0 5
  • http://www.iteye.com/news/27580Emmet的前身是大名鼎鼎的Zen coding,如...
    冰J冰阅读 3,085评论 0 6
  • Emmet 功能snippet(代码片段,不如用专门的片段插件)abbreviation expand(简写展开)...
    lililifeng阅读 470评论 0 2
  • 18-白皇后-小咪 今天的作业是和宝贝一同完成的,看到这张图,他说像妈妈的乳房。我想,这可能是他最初最切实的安全感来源吧
    小咪小少女阅读 102评论 0 0
  • 爷爷有四个儿子 四个女儿 四个女婿 四个媳妇 还有二十多个孙子 与十几个姑舅老俵 以及老俵们所生 的几十个俵侄儿、...
    窗外芭蕉阅读 488评论 0 0