Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Emmet语法 速查表
Blogger Information
Blog 2
fans 0
comment 0
visits 1180
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Emmet语法 速查表
方劭
Original
537 people have browsed it

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>
  11. </body>
  12. </html>

缩写：a

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

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

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post