博客列表 >Emmet语法 速查表

Emmet语法 速查表

方劭
方劭原创
2021年03月31日 19:31:21535浏览

Emmet是一款文本编辑器/IDE的插件,用来快速生成复杂的HTML代码,只要掌握一些常用的语法(类似CSS选择器),就可以减少重复编码的工作。


1.调用方法

Emmet使用Tab作为自动生成HTML代码的触发器

输入完生成HTML的缩写语句后,按下Tab,即可生成对应的HTML代码


2.相关语法

后代:>

Child:>
缩写:div>ul>li

  1. <div>
  2. <ul>
  3. <li></li>
  4. </ul>
  5. </div>

兄弟:+

Sibling:+
缩写:div+p+bq

  1. <div></div>
  2. <p></p>
  3. <blockquote></blockquote>

上级元素:^

Climb-up:^
缩写:div+div>p>span+em^bq

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

缩写:div+div>p>span+em^^bq

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

分组:()

Grouping:()
缩写: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>

缩写:(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>

重复多份:*

Multiplication:*

缩写:ul>li*5

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

编号:$

Item numbering:$
缩写: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>

缩写: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>

缩写:ul>li.item$$$*5

  1. <ul>
  2. <li class="item001"></li>
  3. <li class="item002"></li>
  4. <li class="item003"></li>
  5. <li class="item004"></li>
  6. <li class="item005"></li>
  7. </ul>

缩写:ul>li.item$@-*5

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

缩写:ul>li.item$@3*5

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

ID和类属性

ID and CLASS attributes
缩写:#header

  1. <div id="header"></div>

缩写:.title

  1. <div class="title"></div>

缩写:form#search.wide

  1. <form action="" id="search" class="wide"></form>

缩写:p.class1.class2.class3

  1. <p class="class1 class2 class3"></p>

自定义属性

Custom attributes
缩写:p[title="Hello world"]

  1. <p title="Hello world"></p>

缩写:td[rowspan=2 colspan=3 title]

  1. <td rowspan="2" colspan="3" title=""></td>

缩写:[a='value1' b="value2"]

  1. <div a="value1" b="value2"></div>

文本:{ }

Text: { }
缩写:a{Click me}

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

缩写:p>{Click }+a{here}+{ to continue}

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

隐式标签

Implicit tag names
缩写:.class

  1. <div class></div>

缩写:em>.class

  1. <em><span class="class"></span></em>

缩写:ul>.class

  1. <ul> <li class="class"></li></ul>

缩写:table>.row>.col

  1. <table>
  2. <tr class="row">
  3. <td class="col"></td>
  4. </tr>
  5. </table>

3.HTML

所有位置的缩写都会转换成标签,例如:foo → <foo></foo>

缩写:!

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. </body>
  11. </html>

缩写:a

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

本文所列仅为最常用的一些语法和缩写,有关其他较为少用的可参考Emmet官方文档


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议