# Emmet

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt).

[Emmet](https://emmet.io/) 工具包增强了对 HTML、CSS 和 JSX 的编码。 您可以在不离开 IntelliJ IDEA 的情况下使用 Emmet 代码模板。 要将模板展开为正确的标记，请键入其 [缩写](http://docs.emmet.io/abbreviations/)，然后按 `Tab` (Windows), `⇥` (macOS), `⇥` (IntelliJ IDEA Classic (macOS)), `⇥` (macOS System Shortcuts), `Tab` (XWin), `Tab` (GNOME), `Tab` (KDE), `Tab` (Emacs), `Tab` (Sublime Text), `⇥` (Sublime Text (macOS)), `Tab` (Visual Studio), `⇥` (Visual Studio (macOS)), `Tab` (NetBeans), `Tab` (Eclipse), `⇥` (Eclipse (macOS))。 要将 `Tab` (Windows), `⇥` (macOS), `⇥` (IntelliJ IDEA Classic (macOS)), `⇥` (macOS System Shortcuts), `Tab` (XWin), `Tab` (GNOME), `Tab` (KDE), `Tab` (Emacs), `Tab` (Sublime Text), `⇥` (Sublime Text (macOS)), `Tab` (Visual Studio), `⇥` (Visual Studio (macOS)), `Tab` (NetBeans), `Tab` (Eclipse), `⇥` (Eclipse (macOS)) 替换为其他键，请参阅 [配置缩写扩展键](#emmet_configure_expansion_key)。

例如，在 HTML 文件中，键入  `table>tr*3>td*2`  并按 `Tab` (Windows), `⇥` (macOS), `⇥` (IntelliJ IDEA Classic (macOS)), `⇥` (macOS System Shortcuts), `Tab` (XWin), `Tab` (GNOME), `Tab` (KDE), `Tab` (Emacs), `Tab` (Sublime Text), `⇥` (Sublime Text (macOS)), `Tab` (Visual Studio), `⇥` (Visual Studio (macOS)), `Tab` (NetBeans), `Tab` (Eclipse), `⇥` (Eclipse (macOS)) 以获取一个 3 × 2 的表格模板：

```HTML

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>
    
```

作为一个更复杂的例子，让我们输入  `table#myid>tr.row$*3>td*2` 并按 `Tab` (Windows), `⇥` (macOS), `⇥` (IntelliJ IDEA Classic (macOS)), `⇥` (macOS System Shortcuts), `Tab` (XWin), `Tab` (GNOME), `Tab` (KDE), `Tab` (Emacs), `Tab` (Sublime Text), `⇥` (Sublime Text (macOS)), `Tab` (Visual Studio), `⇥` (Visual Studio (macOS)), `Tab` (NetBeans), `Tab` (Eclipse), `⇥` (Eclipse (macOS))以获得相同的表，但具有  `id` 属性和每行的自定义类：

```HTML
        
<table id="myid">
    <tr class="row1">
        <td></td>
        <td></td>
    </tr>
    <tr class="row2">
        <td></td>
        <td></td>
    </tr>
    <tr class="row3">
        <td></td>
        <td></td>
    </tr>
</table>
    
```

如需更多信息，请参阅 [Emmet Cheat Sheet](https://docs.emmet.io/cheat-sheet/)。

IntelliJ IDEA 支持诸如编写 RGBA 颜色的新语法、隐含、默认和布尔属性、  Update Tag  操作等功能。

## 启用和配置 Emmet

使用 IntelliJ IDEA，可以使用原生 Emmet 模板，还可以使用 200 多个额外的 HTML、CSS 和 XSL 动态模板，这些模板列在   Zen CSS  、   Zen HTML   和   Zen XSL   节点下，位于   编辑器 | 实时代码模板   设置页面 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))。

Procedure:

1. 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) 打开设置，然后选择  `编辑器 | Emmet` 。

2. 在打开的 [Emmet 页面](settings-emmet.html)上，选择用于展开 Emmet 缩写的按键，默认情况下会选择 `Tab` (Windows), `⇥` (macOS), `⇥` (IntelliJ IDEA Classic (macOS)), `⇥` (macOS System Shortcuts), `Tab` (XWin), `Tab` (GNOME), `Tab` (KDE), `Tab` (Emacs), `Tab` (Sublime Text), `⇥` (Sublime Text (macOS)), `Tab` (Visual Studio), `⇥` (Visual Studio (macOS)), `Tab` (NetBeans), `Tab` (Eclipse), `⇥` (Eclipse (macOS))。

3. 若要在特定语言（HTML、CSS 或 JSX）中启用或禁用 Emmet，请前往  `编辑器 | Emmet | <语言>` 并切换   启用 <Language> Emmet  复选框。 请使用 [Emmet](settings-emmet.html) 页面上的控件在各种语言环境中配置 Emmet。

IntelliJ IDEA 允许您使用和自定义 Emmet 实时模板，或者您可以添加自定义模板。 假设您有一个模板   条目  及以下模板文本：

```
<entry type="$TYPES$">$END$ <entry>

```

生成条目列表，您只需输入  `“entry-list<entry[number=$]*5″`  然后按下 `Tab` (Windows), `⇥` (macOS), `⇥` (IntelliJ IDEA Classic (macOS)), `⇥` (macOS System Shortcuts), `Tab` (XWin), `Tab` (GNOME), `Tab` (KDE), `Tab` (Emacs), `Tab` (Sublime Text), `⇥` (Sublime Text (macOS)), `Tab` (Visual Studio), `⇥` (Visual Studio (macOS)), `Tab` (NetBeans), `Tab` (Eclipse), `⇥` (Eclipse (macOS))。 默认情况下，  `number`  属性将在  `类型`  之前生成。 要自定义它生成的位置，您需要将  `ATTRS`  变量添加到您的模板中，例如：

```
<entry type="$TYPES$" $ATTRS$>$END$ <entry>

```

`ATTRS`  变量的默认值必须是空字符串，并且应被跳过。

Procedure: 使用带有 Emmet 的 实时模板

1. 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) 打开设置，然后选择  `编辑器 | 实时代码模板` 。

2. 在打开的 [实时模板](settings-live-templates.html) 页面上，展开   Zen HTML  、   Zen CSS   或   Zen XSL   模板组，并选中您想要使用的模板旁边的复选框。

3. 当您在列表中选择一个模板时，焦点会移动到 [Template Text](settings-live-templates.html#templateTextArea) 区域，其中的字段显示所选模板的设置。

4. 在   模板文本  字段中，将所需的文本和变量添加到模板主体中。

5. 点击   编辑变量   按钮。 在打开的 [编辑模板变量](edit-template-variables-dialog.html)对话框中， 在   默认值  字段中指定默认变量值，并在必要时选择   如果已定义，则跳过  复选框。

## 配置缩写扩展键

默认情况下，Emmet 原生缩写和其他动态模板通过按下 `Tab` (Windows), `⇥` (macOS), `⇥` (IntelliJ IDEA Classic (macOS)), `⇥` (macOS System Shortcuts), `Tab` (XWin), `Tab` (GNOME), `Tab` (KDE), `Tab` (Emacs), `Tab` (Sublime Text), `⇥` (Sublime Text (macOS)), `Tab` (Visual Studio), `⇥` (Visual Studio (macOS)), `Tab` (NetBeans), `Tab` (Eclipse), `⇥` (Eclipse (macOS))进行展开。 如需更多动态模板，IntelliJ IDEA 允许您重新定义默认的展开键。 请注意，此自定义设置不会覆盖默认的 Emmet 原生支持设置；您只需使用这两个键之一来扩展模板即可。

Procedure: 配置原生 Emmet 缩写的扩展键

1. 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) 打开设置，然后选择  `编辑器 | Emmet` 。

2. 打开的 [Emmet 页面](settings-emmet.html)中，从   使用以下键展开缩写  列表中选择新的扩展键，而不是默认的 `Tab` (Windows), `⇥` (macOS), `⇥` (IntelliJ IDEA Classic (macOS)), `⇥` (macOS System Shortcuts), `Tab` (XWin), `Tab` (GNOME), `Tab` (KDE), `Tab` (Emacs), `Tab` (Sublime Text), `⇥` (Sublime Text (macOS)), `Tab` (Visual Studio), `⇥` (Visual Studio (macOS)), `Tab` (NetBeans), `Tab` (Eclipse), `⇥` (Eclipse (macOS))。

Procedure: 为 Emmet 实时模板 配置扩展键

1. 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) 打开设置，然后选择  `编辑器 | 实时代码模板` 。

2. 在打开的 [实时模板](settings-live-templates.html) 页面上，展开   Zen HTML  、   Zen CSS   或   Zen XSL   模板组，并选择所需的模板。 焦点会移动到 [Template Text](settings-live-templates.html#templateTextArea) 区域。

3. 从   展开使用   列表中选择要展开模板的键。

## 使用 Emmet 模板包围代码块

Procedure:

1. 在编辑器中，选择要环绕的代码块并按 `Ctrl+Alt+J` (Windows), `⌘ ⌥ J` (macOS), `⌘ ⌥ J` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ J` (macOS System Shortcuts), `Ctrl+Alt+J` (XWin), `Ctrl+Alt+J` (GNOME), `Ctrl+Alt+J` (KDE), `Ctrl+Alt+J` (Emacs), `Ctrl+Alt+J` (Sublime Text), `⌘ ⌥ J` (Sublime Text (macOS)), `Ctrl+E, U` (Visual Studio), `⌘ E, U` (Visual Studio (macOS)), `Ctrl+Alt+J` (NetBeans), `Ctrl+Alt+J` (Eclipse), `⌘ ⌥ J` (Eclipse (macOS))，或从主菜单中选择  `代码｜填充｜活模板` 。

2. 从  `选择模板`  列表中，选择   Emmet  ：

![选择模板上下文菜单](https://resources.jetbrains.com/help/img/idea/2026.3/select_template.png)

3. 输入要使用的 Emmet abbreviation 并按 `Enter` (Windows), `⏎` (macOS), `⏎` (IntelliJ IDEA Classic (macOS)), `⏎` (macOS System Shortcuts), `Enter` (XWin), `Enter` (GNOME), `Enter` (KDE), `Enter` (Emacs), `Enter` (Sublime Text), `⏎` (Sublime Text (macOS)), `Enter` (Visual Studio), `⏎` (Visual Studio (macOS)), `Enter` (NetBeans), `Enter` (Eclipse), `⏎` (Eclipse (macOS))。

![Emmet：输入缩写](https://resources.jetbrains.com/help/img/idea/2026.3/ws_emmet_type_abbreviation.png)

请注意右侧的列表。 点击向下箭头查看最近应用的 Emmet 实时模板历史：

![最近使用的 Emmet 实时模板历史](https://resources.jetbrains.com/help/img/idea/2026.3/emmet_history.png)

还请注意颜色指示。 如果您输入有效的 Emmet 缩写，背景将变为绿色。 但是，当输入一个不存在的缩写时，背景会变成红色：

![您输入的缩写不存在，背景变为红色](https://resources.jetbrains.com/help/img/idea/2026.3/emmet_abbreviation.png)

## 在编辑点之间导航

在 HTML 和 XML 中，您可以在  编辑点 之间导航，也就是 Emmet 模板适用的代码点之间。

Procedure:

* 若要将文本光标移至上一个编辑点，请选择  `导航 | 上一个 Emmet 编辑点` ，或按 `Alt+Shift+[` (Windows), `⌃ ⌥ ←` (macOS), `⌃ ⌥ ←` (IntelliJ IDEA Classic (macOS)), `⌃ ⌥ ←` (macOS System Shortcuts), `Alt+Shift+[` (XWin), `Alt+Shift+[` (GNOME), `Alt+Shift+[` (KDE), `Alt+Shift+[` (Emacs), `Alt+Shift+[` (Sublime Text), `Alt+Shift+[` (Sublime Text (macOS)), `Alt+Shift+[` (Visual Studio), `Alt+Shift+[` (Visual Studio (macOS)), `Alt+Shift+[` (NetBeans), `Alt+Shift+[` (Eclipse), `⌃ ⌥ ←` (Eclipse (macOS))。

* 要将文本光标移动到下一个编辑点，请选择  `导航|下一步 Emmet 编辑点` 或按 `Alt+Shift+]` (Windows), `⌃ ⌥ →` (macOS), `⌃ ⌥ →` (IntelliJ IDEA Classic (macOS)), `⌃ ⌥ →` (macOS System Shortcuts), `Alt+Shift+]` (XWin), `Alt+Shift+]` (GNOME), `Alt+Shift+]` (KDE), `Alt+Shift+]` (Emacs), `Alt+Shift+]` (Sublime Text), `Alt+Shift+]` (Sublime Text (macOS)), `Alt+Shift+]` (Visual Studio), `⌃ ⌥ →` (Visual Studio (macOS)), `Alt+Shift+]` (NetBeans), `Alt+Shift+]` (Eclipse), `⌃ ⌥ →` (Eclipse (macOS))。

## See also

### 参考

[Emmet](settings-emmet.html) [实时模板](settings-live-templates.html)

### 外部链接

[Emmet documentation](https://emmet.io/)