Sublime text 快速编写 HTML 代码 — Emmet插件

11、CSS选择器,给标签指定id和class选择器,只需在标签的后面直接添加,但必需以.或#开头:

  1. div#header+div.page+div#footer.class1.class2.class3

将生成:

  1. <div id="header"></div>
  2. <div class="page"></div>
  3. <div id="footer" class="class1 class2 class3"></div>

Emmet默认的标签是div,所以我们在写带有CSS选择器的div标签时,可以省去div,你可以试试。

12、自定义属性:[](英文下的中括号),使用[]操作符给标签添加自定义属性:

  1. td[title="Hello world!" colspan=3]

将生成:

  1. <td title="Hello world!" colspan="3"></td>

13、可以把你喜欢的一些属性放在[]内,如果不指定属性值,代码将生成不带属性值的HTML默认标签:

  1. td[colspan title]

将生成:

  1. <td colspan="" title=""></td>

属性值必需使用单引号或双引号,不然就会出现你可能想到的效果。

14、项目编号:$,使用*可以重复的标签,$可以使标签生成有序列表,输出的值为数字:

  1. ul>li.item$*5

将生成:

  1. <ul>
  2.     <li class="item1"></li>
  3.     <li class="item2"></li>
  4.     <li class="item3"></li>
  5.     <li class="item4"></li>
  6.     <li class="item5"></li>
  7. </ul>

15、除了生成无序列表,其它的标签也是一样:

  1. h$[title=item$]{Header $}*3

将生成:

  1. <h1 title="item1">Header 1</h1>
  2. <h2 title="item2">Header 2</h2>
  3. <h3 title="item3">Header 3</h3>

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

墨丶水瓶

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: