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

21、当元素用+连接时,文本{}编写正确后,并不能改变标签的层级关系:

  1. p>{Click }+a{here}+{ to continue}

将生成:

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

对于一些特殊的标签类型,比如:a、img、link、input等带有属性值的标签,在编写Emmet插件时已经为我们编写好了基本的结构。

22、比如a标签,在编辑中输入a,即可解析成一个基本的a标签:

  1. <a href=""></a>

23、a标签有几个属性值,在编写Emmet代码时可以添加这些值来覆盖默认的属性值:

  1. a[href="https://www.loveo.cc" title="墨丶水瓶" class="logo"]{墨丶水瓶}

将生成:

  1. <a href="https://www.loveo.cc" title="墨丶水瓶" class="logo">墨丶水瓶</a>

因为属性值是不可以缩写的,所以看起来编写带属性值是相似的。

24、在许多情况下,你可以跳过输入标签名称和Emmet代码,得到HTML代码,例如下面的例子:

  1. <div>
  2.     .item
  3. </div>
  4. <span>.item</span>
  5. <ul class="nav">
  6.     .item
  7. </ul>

将生成:

  1. <div>
  2.     <div class="item"></div>
  3. </div>
  4. <span><span class="item"></span></span>
  5. <ul class="nav">
  6.     <li class="item"></li>
  7. </ul>

25、从上面的例子中我们可以看到,插件会根据id或class所在的父级标签生成相应的标签,这种写法也是遵循HTML的编写规则,通过下面的代码你会更明白:

  1. .wrap>.content                           div.wrap>div.content
  2. em>.info                                     em>span.info
  3. ul>.item*3                                   ul>li.item*3
  4. table>#row$*4>[colspan=2]       table>tr#row$*4>td[colspan=2]

上面对应的四组代码最终生成的代码对应为:

  1. <div class="wrap">
  2.     <div class="content"></div>
  3. </div>
  4. <em><span class="info"></span></em>
  5. <ul>
  6.     <li class="item"></li>
  7.     <li class="item"></li>
  8.     <li class="item"></li>
  9. </ul>
  10. <table>
  11.     <tr id="row1">
  12.         <td colspan="2"></td>
  13.     </tr>
  14.     <tr id="row2">
  15.         <td colspan="2"></td>
  16.     </tr>
  17.     <tr id="row3">
  18.         <td colspan="2"></td>
  19.     </tr>
  20.     <tr id="row4">
  21.         <td colspan="2"></td>
  22.     </tr>
  23. </table>

我们应该了解到,CSS选择器在块级元素中默认的HTML标签为div,在内联级元素中为span,而对于HTML一些特殊的标签:ul li、table tr td,将会生成对应的内部标签。

这篇文章介绍了HTML的基本标签在Emmet下的写法,我把它当做学习笔记,可以随时查看,如果对你有帮助就更好。

Emmet编写代码的格式最重要的就是不能有空格,如果有空格将不会完全解析和生成HTML代码。

Emmet最核心的就是缩写,而它也不属于一门语言,编写时也不需要有很强的可读性,最重要的就是能高速的生成HTML代码。只要你多练习,多看下官方的英文文档,很快你将掌握Emmet的编写方式,同时也将大大提高你的前端开发速度。

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

支付宝扫一扫赞助

微信钱包扫描赞助

墨丶水瓶

发表评论

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