HTML Emmet

Mr.Hope ... 2019-09-03 Emmet
  • 快捷键
  • HTML
大约 4 分钟

# 元素创建

  1. 在编辑器中输入元素名称之后按下 tab 即可自动补全生成 HTML 标签,即使不是标准的 HTML 标签。

创建文档

输入: ! 或者 html:5 将创建 HTML 基本结构。

# 结构操作

# 子元素

使用 > 生成子元素

案例

div>ul>li:

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

# 兄弟元素

使用 + 生成兄弟元素

案例

div+p+bq:

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

# 上移

使用 ^ 上移一级

案例

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

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

# 重复

使用 * 生成多个相同元素。

案例

div>ul>li*5:

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

# 分组

使用 () 将元素分组

案例

+ 后面的元素与括号中的第一个元素属于兄弟关系

div>(header>ul>li*2)+footer>p:

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

# 属性操作

# ID 与 class

元素与 id 属性值之间用 # 分隔,与 class 属性值之间用 . 分隔

案例

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

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

# 自定义属性

在 Emmet 中,使用 [] 标记其他属性。

你无需输入引号,直接使用 [属性1=值1 属性2=值2 ... ] 即可。

  • 您可以在方括号内放置任意数量的属性。

  • 您不必指定属性值: td[colspan title] 会生成 <td colspan="" title="">

    接下来你可以通过按下 tab 将光标顺序移动至每个空属性内,这会让你很方便的输入内容。

  • 您可以使用单引号或双引号来引用属性值。如果值不包含空格,则无需引用它们。如: td[title=hello colspan=3]

案例

td[title="Hello world!" colspan=3]:

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

# 项目编号

$ 符号实现 1n 的自动编号 (* 实现多个元素)

案例

li.item$*3:

<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
1
2
3

可在 $ 后添加 @n 修改编号的起始值为 n

案例

li.item$@3*3:

<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
1
2
3

可在 “$” 后添加 “@-” 修改编号的方向。

案例

li.item$@-3*3:

<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
1
2
3

您可以连续使用多个 $ 以零填充数字。

案例

ul>li.item$$$*5:

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

# 文本

使用 {} 添加文本内容

案例

a[href=me.html]{click me}:

<a href="me.html">click me</a>
1

注意

请注意,{text} 是作为一个单独的元素使用和解析的。

请理解以下案例:

<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>

<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>

<!-- p>{Click }+a{here}+{ to continue} -->

<p>Click <a href="">here</a> to continue</p>
1
2
3
4
5
6
7
8
9

# 隐式标签名称

即使使用功能强大的缩写引擎(可以从短缩写扩展大型 HTML 结构),编写标签名称也可能非常繁琐。

在许多情况下,您可以跳过键入标签名称的操作,而 Emmet 会自动为您生成一个。例如,您可以简单地将 div.content 写为 .content,Emmet 将自动扩展为 <div class="content"></div>

# 工作原理

扩展缩写词时,Emmet 会尝试在其内部扩展缩写词的地方获取上下文进行推断。如果成功捕获了上下文,Emmet 将使用其名称来解析隐式名称。

案例

Emmet 缩写 Emmet 实际输出
.wrap>.content div.wrap>div.content
em>.info em>span.info
ul>.item*3 ul>li.item*3
table>#row$*4>[colspan=2] table>tr#row$*4>td[colspan=2]

# Lorem Ipsum 生成

lorem 是一个示例词的生成器,你可以很方便的生成一些预设文字查看效果。它会自动根据标签调整文字数量,并在重复时轮换输出。

案例

p*4>lorem:

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus
  molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias
  officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
</p>
<p>
  Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
  recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at
  neque quos facere sequi unde optio aliquam!
</p>
<p>
  Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro
  quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio
  nam nulla unde amet odit pariatur at!
</p>
<p>
  Consequatur rerum amet fuga expedita sunt et tempora saepe? Iusto nihil
  explicabo perferendis quos provident delectus ducimus necessitatibus
  reiciendis optio tempora unde earum doloremque commodi laudantium ad nulla vel
  odio?
</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

ul.generic-list>lorem10.item*4:

<ul class="generic-list">
  <li class="item">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam vero.
  </li>
  <li class="item">
    Laboriosam quaerat sapiente minima nam minus similique illum architecto et!
  </li>
  <li class="item">
    Incidunt vitae quae facere ducimus nostrum aliquid dolorum veritatis dicta!
  </li>
  <li class="item">
    Tenetur laborum quod cum excepturi recusandae porro sint quas soluta!
  </li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 其他内容

某些元素(例如 a 或)img 会转换为具有预定义属性的元素: <a href=""></a><img src="" alt="" />

同时 emmet 还包含了一些常用缩写,如 bq 会输出 <blockquote></blockquote>

这些功能是通过预置的 snippets 实现的。

相关信息

部分 snippets 内容:

...
{
  "a": "a[href]",
  "img": "img[src alt]/",
  "bq": "blockquote",
  "fig": "figure",
  "cap": "caption",
  "pic": "picture",
  "mn": "main",
  "!!!": "{<!DOCTYPE html>}",
  "doc": "html[lang=${lang}]>(head>meta[charset=${charset}]+meta:vp+title{${1:Document}})+body",
  "!|html:5": "!!!+doc",
}
1
2
3
4
5
6
7
8
9
10
11
12
13

完整的 HTML snippets 请见 Emmet Repo (opens new window)