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

6、上级关系:^,使用^操作符使标签与前一标签的父级处于相同的级别:

  1. div+div>p>span+em^bq

将生成:

  1. <div>
  2.     <p><span></span><em></em></p>
  3.     <blockquote></blockquote>
  4. </div>

7、使用两^操作符就与前一标签的爷爷级是相同级别,依此类推:

  1. div+div>p>span+em^^bq

将生成:

  1. <div></div>
  2. <div>
  3.     <p><span></span><em></em></p>
  4. </div>
  5. <blockquote></blockquote>

8、乘法:*,使用*操作符可以输出多个标签:

  1. div>ul>li*5

将生成:

  1. <div>
  2.     <ul>
  3.         <li></li>
  4.         <li></li>
  5.         <li></li>
  6.         <li></li>
  7.         <li></li>
  8.     </ul>
  9. </div>

9、分组:(),用()操作符进行分组,使编写的代码结构更加清晰、明了,一组标签就相当一个元素:

  1. div>(header>ul>li*2>a)+footer>p

将生成:

  1. <div>
  2.     <header>
  3.         <ul>
  4.             <li><a href=""></a></li>
  5.             <li><a href=""></a></li>
  6.         </ul>
  7.     </header>
  8.     <footer>
  9.         <p></p>
  10.     </footer>
  11. </div>

10、你可以使用多个(),并使用乘法*操作符:

  1. (div>dl>(dt+dd)*3)+footer>p

将生成:

  1. <div>
  2.     <dl>
  3.         <dt></dt>
  4.         <dd></dd>
  5.         <dt></dt>
  6.         <dd></dd>
  7.         <dt></dt>
  8.         <dd></dd>
  9.     </dl>
  10. </div>
  11. <footer>
  12.     <p></p>
  13. </footer>

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

支付宝扫一扫赞助

微信钱包扫描赞助

墨丶水瓶

发表评论

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