# HTML

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

> **TL;DR**
> 必需插件  :
>
>
>
> `HTML Tools`  -  插件与 IntelliJ IDEA 捆绑在一起，并默认启用。

IntelliJ IDEA 为 HTML 提供强大支持，包括语法和错误高亮、根据代码样式进行格式设置、结构验证、代码补全、在代码编辑器中的 [专用预览标签页](#ws_html_preview_output)内即时预览等。

可通过   语言与框架 | 模式和 DTD   设置页面 `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)) 上的默认 HTML 语言级别偏好设置来配置 HTML 规范。 默认情况下，假定使用 W3C 的 HTML 5.0 规范。

## 创建一个 HTML 文件

Procedure:

1. 请前往  `文件｜新建` ，然后从列表中选择   HTML 文件  。

2. 在打开的对话框中，输入新文件的名称，不带任何扩展名。 您可以在新文件名之前输入整个目录结构。 如果嵌套目录尚不存在，则会创建它们：

![创建一个 HTML 文件](https://resources.jetbrains.com/help/img/idea/2026.3/ws_create_html_file.png)

IntelliJ IDEA 基于 [HTML file template](using-file-and-code-templates.html) 创建一个存根文件并在编辑器中打开。

## 在 HTML 文件中创建引用

当您在  `<script>` 、  `<link>`  或  `<img>`  标签中开始输入文件路径时。 IntelliJ IDEA 会为路径建议补全。

[Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_html_complete_path.mp4)

或者，在   项目   工具窗口（ `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))）中，选择要引用的 JavaScript、CSS 或图像文件，并将其拖入 HTML 文件。 IntelliJ IDEA 在  `<head><link rel="canonical" href="https://www.jetbrains.com/zh-cn/help/idea/editing-html-files.html.md/" data-react-helmet="true"/>`  内生成  `<script>` 、  `<link>`  或  `<img>`  标记。 对于  `<img>`  标记，IntelliJ IDEA 还会生成  `宽度`  和  `高度`  特性。

[Video](https://resources.jetbrains.com/help/img/idea/2026.3/drag_to_html.mp4)

## 将代码片段包装在标签中

Procedure:

1. 选择要包装的代码片段并按 `Ctrl+Alt+T` (Windows), `⌘ ⌥ T` (macOS), `⌘ ⌥ T` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ T` (macOS System Shortcuts), `Ctrl+Alt+Shift+B` (XWin), `Ctrl+Alt+Shift+B` (GNOME), `Ctrl+Alt+Shift+B` (KDE), `Ctrl+Alt+T` (Emacs), `Ctrl+Alt+T` (Sublime Text), `⌘ ⌥ T` (Sublime Text (macOS)), `Ctrl+Alt+T` (Visual Studio), `Ctrl+Alt+T` (Visual Studio (macOS)), `Ctrl+Alt+T` (NetBeans), `Alt+Shift+Z` (Eclipse), `⌘ ⌥ Z` (Eclipse (macOS)) 或从主菜单中选择  `代码 | 代码包围` 。

2. 从列表中选择   用标签包装  。 IntelliJ IDEA 将选定内容用一对括号（  `<>`  和  `</>` ）括起来。

3. 在尖括号内键入标签  `<>` 。 IntelliJ IDEA 会自动填充在闭合括号中的标签  `</>` 。

![将文本包装在标签中](https://resources.jetbrains.com/help/img/idea/2026.3/ws_generate_code_wrap_in_tag.animated.gif)

有关更多信息，请参阅 [生成代码](generating-code.html)。

## 文档查找

对于大多数 HTML 标签和属性，IntelliJ IDEA 可以向您显示相应的 [MDN 文章](https://developer.mozilla.org/en-US/docs/Web/HTML) 摘要。 此摘要显示在   文档  弹出窗口中，该窗口还显示标签或属性的弃用状态以及其与各种浏览器的兼容性信息。

如果该标签或属性在所有版本的浏览器中都可用，IntelliJ IDEA 不显示任何关于其兼容性的信息。

![HTML 快速文档：该属性在所有版本的浏览器中都可用](https://resources.jetbrains.com/help/img/idea/2026.3/ws_html_quick_doc_attribute.png)

否则，   文档   弹出窗口会提示该标记或特性的浏览器支持有限，并建议查看兼容性表了解详细信息。

![HTML 快速文档：列出了兼容的浏览器](https://resources.jetbrains.com/help/img/idea/2026.3/ws_html_quick_doc_compatibility.png)

> **Note:**
> 仅检查 Chrome、Chrome Android、Safari、Safari iOS、Firefox、Internet Explorer 和 Edge 的兼容性。

如果某个标记或特性已弃用，它会以删除线字体显示，并且弹出窗口会告知其状态。

![HTML 快速文档：<big> 标签已经废弃](https://resources.jetbrains.com/help/img/idea/2026.3/ws_html_quick_doc_deprecated.png)

Procedure: 查看标签或属性的文档

* 将文本光标置于该标签或属性上并按下 `Ctrl+Q` (Windows), `F1` (macOS), `⌃ J` (IntelliJ IDEA Classic (macOS)), `⌘ I` (macOS System Shortcuts), `Ctrl+Q` (XWin), `Ctrl+Q` (GNOME), `Ctrl+Q` (KDE), `Ctrl+Q` (Emacs), `Ctrl+Q` (Sublime Text), `Ctrl+Q` (Sublime Text (macOS)), `Ctrl+K, I` (Visual Studio), `⌘ K, I` (Visual Studio (macOS)), `Ctrl+Q` (NetBeans), `Alt+Middle-Click` (Eclipse), `⌥ Middle-Click` (Eclipse (macOS)) 或从主菜单中选择  `查看 | 快速文档查找` 。

* 当您将鼠标悬停在标签或属性上时，IntelliJ IDEA 会立即在   文档   弹窗中显示相关参考。

您可以关闭此行为或配置弹出窗口的显示速度，更快或更慢，详见下文 [配置文档弹出窗口的行为](#ws_documentation_lookup_configure_popup)。

Procedure: 配置文档弹出窗口的行为

* 要关闭在悬停代码符号时自动显示文档的功能，请点击弹出窗口中的 ![显示选项菜单图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.more.svg)，并禁用   在鼠标移动时显示   选项。

* 要调整   文档   弹出窗口的显示速度，请打开   设置   对话框（ `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: 在浏览器中打开 MDN 文档以了解标签和属性

* 在   文档  弹出窗口 `Ctrl+Q` (Windows), `F1` (macOS), `⌃ J` (IntelliJ IDEA Classic (macOS)), `⌘ I` (macOS System Shortcuts), `Ctrl+Q` (XWin), `Ctrl+Q` (GNOME), `Ctrl+Q` (KDE), `Ctrl+Q` (Emacs), `Ctrl+Q` (Sublime Text), `Ctrl+Q` (Sublime Text (macOS)), `Ctrl+K, I` (Visual Studio), `⌘ K, I` (Visual Studio (macOS)), `Ctrl+Q` (NetBeans), `Alt+Middle-Click` (Eclipse), `⌥ Middle-Click` (Eclipse (macOS))中，点击底部的链接。

* 按 `Shift+F1` (Windows), `⇧ F1` (macOS), `⇧ F1` (IntelliJ IDEA Classic (macOS)), `⇧ F1` (macOS System Shortcuts), `Shift+F1` (XWin), `Shift+F1` (GNOME), `Shift+F1` (KDE), `Shift+F1` (Emacs), `Shift+F1` (Sublime Text), `⇧ F1` (Sublime Text (macOS)), `Shift+F1` (Visual Studio), `⇧ F1` (Visual Studio (macOS)), `Shift+F1` (NetBeans), `Shift+F2` (Eclipse), `⇧ F2` (Eclipse (macOS)) 或从主菜单中选择  `视图 | 外部文档` 。

## 预览 HTML 文件的输出

您可以在内置的 IntelliJ IDEA 预览中或在您选择的浏览器中外部打开 HTML 代码的输出。

> **Note:**
> 预览功能依赖于 IntelliJ IDEA 内置 Web 服务器。 此服务器始终运行且不需要任何手动配置。
>
>
>
> 默认情况下，内置服务器端口设置为  `63342` ，IntelliJ IDEA 通过该端口接受来自服务的连接。 要更改此默认值，请打开   设置   对话框（ `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))），转到  `工具 | Web Browsers 和预览` ，并在   内置服务器   部分指定从 1024 开始的任何其他值。

默认情况下，在浏览器或内置预览中打开 HTML 文件后，每次手动或自动保存此 HTML 文件（或任何链接的 JavaScript 或样式表文件）时，IntelliJ IDEA 会自动重新加载页面，请参阅 [保存并撤销更改](saving-and-reverting-changes.html)。

可以更改默认行为，在键入时重新加载页面，以便对 HTML 或相关文件所做的更改立即显示在浏览器或内置预览中。 请参见下文的 [配置自动重新加载](#ws_configure_auto_reload)。

### IntelliJ IDEA 内置预览

IntelliJ IDEA 内置预览使您的工作更快，因为您不再需要切换到浏览器并刷新页面。 预览在一个单独的编辑器选项卡中打开，并根据 [reload behavior](#ws_configure_auto_reload) 自动重新加载，您输入时或保存更改时都会自动重新加载。

[Video](https://resources.jetbrains.com/help/img/idea/2026.3/ij-built-in-preview.mp4)

Procedure: 打开 IntelliJ IDEA 内置预览

* 在主菜单中，转到  `查看 | 在浏览器中打开` ，然后从列表中选择 ![the IntelliJ IDEA 图标](https://resources.jetbrains.com/help/img/idea/2026.3/product.idea.svg)  `内置预览` 。

* 或者，将鼠标悬停在代码上以显示浏览器图标弹出窗口，然后点击 ![the IntelliJ IDEA 图标](https://resources.jetbrains.com/help/img/idea/2026.3/product.idea.svg)。

### 在浏览器中预览 HTML 文件

为确保您的 HTML 代码在生产环境中正确渲染，请在特定浏览器中预览 HTML 文件。

如果您使用内置的 IntelliJ IDEA Web 服务器，在您保存更改或输入时，页面会自动重新加载，具体取决于 [reload behavior](#ws_configure_auto_reload)。

> **Warning:**
> 自动重新加载在手动配置的  default  Web 服务器上上传时不起作用。 如需了解有关管理插件的更多信息，请参阅 [配置与 Web 服务器的同步](configuring-synchronization-with-a-remote-host.html)和 [默认服务器配置](configuring-synchronization-with-a-remote-host.html#default_server)。

Procedure:

* 请移至  `查看 | 在浏览器中打开` ，然后从列表中选择所需的浏览器。

要打开 [IntelliJ IDEA 默认浏览器](configuring-third-party-tools.html#web-browsers)，请选择   默认  。

* 或者，您可以将鼠标悬停在代码上以显示浏览器图标弹出窗口，然后点击指示所需浏览器的图标： ![Chrome](https://resources.jetbrains.com/help/img/idea/2026.3/app.xml.browsers.chrome.svg) ![Firefox](https://resources.jetbrains.com/help/img/idea/2026.3/app.xml.browsers.firefox.svg) ![Safari](https://resources.jetbrains.com/help/img/idea/2026.3/app.xml.browsers.safari.svg) ![Edge](https://resources.jetbrains.com/help/img/idea/2026.3/app.xml.browsers.edge.svg) ![Opera](https://resources.jetbrains.com/help/img/idea/2026.3/app.xml.browsers.opera.svg)

* 如果您只配置了一个浏览器，只需按 `Alt+F2` (Windows), `⌥ F2` (macOS), `⌥ F2` (IntelliJ IDEA Classic (macOS)), `⌥ F2` (macOS System Shortcuts), `Alt+F2` (XWin), `Alt+F2` (GNOME), `Alt+F2` (KDE), `Alt+F2` (Emacs), `Alt+F2` (Sublime Text), `Alt+F2` (Sublime Text (macOS)), `Alt+F2` (Visual Studio), `⌥ F2` (Visual Studio (macOS)), `Alt+F2` (NetBeans), `Alt+F2` (Eclipse), `⌥ F2` (Eclipse (macOS))。

Procedure: 在弹出窗口中配置浏览器图标

打开   设置   对话框（ `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))），然后转到  `工具 | Web Browsers 和预览` 。

* 若要隐藏部分图标，请取消选中不必要浏览器的   活动   复选框。

* 要隐藏整个弹出窗口，请清除   HTML 文件专用  复选框。

### 配置自动重载

默认情况下，在浏览器或内置预览中打开 HTML 文件后，每次手动或自动保存此 HTML 文件（或任何链接的 JavaScript 或样式表文件）时，IntelliJ IDEA 会自动重新加载页面，请参阅 [保存并撤销更改](saving-and-reverting-changes.html)。

![保存时重新加载 HTML 页面](https://resources.jetbrains.com/help/img/idea/2026.3/ws_html_reload_on_save.animated.gif)

保存作为页面重新加载触发器的文件时，IntelliJ IDEA 会显示一个   知道了   工具提示。

![保存时重新加载：“知道了”工具提示](https://resources.jetbrains.com/help/img/idea/2026.3/ws_html_reload_on_save_got_it_tooltip.png)

可以更改默认行为，在键入时重新加载页面，以便对 HTML 或相关文件所做的更改立即显示在浏览器或内置预览中。

Procedure:

1. 转到   工具 | Web Browsers 和预览  设置页面 `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. 在   重新加载行为  区域，从   在浏览器中重新加载页面  和   在内置预览中重新加载页面  列表中，选择将在网页浏览器和内置预览中触发页面自动重新加载的操作。 默认情况下，会选择   保存时  。

* 选择 更改时 ，在您更新相应的 HTML 文件或链接文件时重新加载页面。

* 选择 已禁用 以禁止自动上传。

> **Note:**
> 更改重新加载行为仅在您关闭当前打开的内置或浏览器预览后生效。

## 在编辑器中查看网页的 HTML 源代码

Procedure:

1. 按 `Ctrl+Shift+A` (Windows), `⌘ ⇧ A` (macOS), `⌘ ⇧ A` (IntelliJ IDEA Classic (macOS)), `⌘ ⇧ P` (macOS System Shortcuts), `Ctrl+Shift+A` (XWin), `Ctrl+Shift+A` (GNOME), `Ctrl+Shift+A` (KDE), `Escape, X` (Emacs), `Ctrl+Shift+P` (Sublime Text), `⌘ ⇧ P` (Sublime Text (macOS)), `Ctrl+Shift+A` (Visual Studio), `⌘ ⇧ A` (Visual Studio (macOS)), `Ctrl+I` (NetBeans), `Ctrl+Shift+A` (Eclipse), `⌘ 3` (Eclipse (macOS))并从列表中选择   从 URL 打开源代码...  。

2. 在打开的   打开 URL  对话框中，输入网页的 URL 地址或从列表中选择以前打开的 URL。

## 查看嵌入图像

IntelliJ IDEA 提供了几种查看嵌入 HTML 文件中图像的方法。 您可以使用 [导航到源代码](#internal)、 [在外部图形编辑器中打开图像](#ext)或者 [即时预览图像](#preview)。

Procedure: 在 IntelliJ IDEA 中查看图像

* 在   项目   工具窗口中，找到并选择图像文件。

或者，将文本光标置于编辑器中引用图像的地方，然后按 `Ctrl+B` (Windows), `⌘ B` (macOS), `⌘ B` (IntelliJ IDEA Classic (macOS)), `⌘ B` (macOS System Shortcuts), `Ctrl+B` (XWin), `Ctrl+B` (GNOME), `Ctrl+B` (KDE), `Ctrl+Alt+G` (Emacs), `F12` (Sublime Text), `F12` (Sublime Text (macOS)), `F12` (Visual Studio), `F12` (Visual Studio (macOS)), `Ctrl+B` (NetBeans), `F3` (Eclipse), `F3` (Eclipse (macOS))。

* 要在弹出窗口中预览图像而不是在单独的选项卡中，请选择其引用并按 `Ctrl+Shift+I` (Windows), `⌥ Space` (macOS), `⌘ ⇧ I` (IntelliJ IDEA Classic (macOS)), `⌘ Y` (macOS System Shortcuts), `Ctrl+Shift+I` (XWin), `Ctrl+Shift+I` (GNOME), `Ctrl+Shift+I` (KDE), `Ctrl+Shift+I` (Emacs), `Ctrl+Shift+I` (Sublime Text), `⌥ Space` (Sublime Text (macOS)), `Alt+F12` (Visual Studio), `⌥ Space` (Visual Studio (macOS)), `Ctrl+Shift+I` (NetBeans), `Ctrl+Shift+I` (Eclipse), `⌥ Space` (Eclipse (macOS))。

Procedure: 在外部编辑器中查看图像

* 在   项目   工具窗口中，右键点击图像文件并选择  `跳转到外部编辑器` 。

或者按 `Ctrl+Alt+F4` (Windows), `⌘ ⌥ F4` (macOS), `⌘ ⌥ F4` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ F4` (macOS System Shortcuts), `Ctrl+Alt+4` (XWin), `Ctrl+Alt+4` (GNOME), `Ctrl+Alt+4` (KDE), `Ctrl+Alt+F4` (Emacs), `Ctrl+Alt+F4` (Sublime Text), `⌘ ⌥ F4` (Sublime Text (macOS)), `Ctrl+Alt+F4` (Visual Studio), `⌘ ⌥ F4` (Visual Studio (macOS)), `Ctrl+Alt+F4` (NetBeans), `Ctrl+Alt+F4` (Eclipse), `⌘ ⌥ F4` (Eclipse (macOS))。

IntelliJ IDEA 会在操作系统默认使用的编辑器中打开该图像。 您可以在 IDE 中 [配置另一个图像编辑器](#change-external-editor) 以打开文件。

Procedure: 更改默认外部编辑器

1. 在编辑器中右键点击图像，然后从上下文菜单中选择   编辑外部编辑器的路径…  。

您也可以按 `Ctrl+Shift+A` (Windows), `⌘ ⇧ A` (macOS), `⌘ ⇧ A` (IntelliJ IDEA Classic (macOS)), `⌘ ⇧ P` (macOS System Shortcuts), `Ctrl+Shift+A` (XWin), `Ctrl+Shift+A` (GNOME), `Ctrl+Shift+A` (KDE), `Escape, X` (Emacs), `Ctrl+Shift+P` (Sublime Text), `⌘ ⇧ P` (Sublime Text (macOS)), `Ctrl+Shift+A` (Visual Studio), `⌘ ⇧ A` (Visual Studio (macOS)), `Ctrl+I` (NetBeans), `Ctrl+Shift+A` (Eclipse), `⌘ 3` (Eclipse (macOS)) 并输入  `编辑外部编辑器路径` 。

2. 在   外部编辑器路径  对话框中，指定您想要打开图像的应用程序的路径，然后点击   保存  。

![指定外部编辑器的路径](https://resources.jetbrains.com/help/img/idea/2026.3/change-external-image-editor.png)

## 提取包含文件

您可以将一段 HTML 代码提取到一个独立的 include 文件中。 整个 JavaScript 代码块也可以在  `<script>`  标签内提取。 IntelliJ IDEA 也建议添加引用而不是所选片段的重复内容。

Procedure:

1. 在编辑器中，选择要提取的代码块，然后从主菜单或选择的上下文菜单中选择  `重构 | 提取 | 提取包含文件` 。

2. 在打开的 [Extract Include File](extract-include-file-dialog.html)对话框中，指定不带扩展名的包含文件的名字和存储这个文件的目录。 您可以接受预定义目录或选择其他目录。

3. 准备就绪后，点击   OK  。 IntelliJ IDEA 将选定的源代码提取到目标目录中的指定文件，并在源文件中生成相应的引用。

## 配置语法高亮

您可以根据自己的偏好和习惯配置 HTML 感知语法高亮显示。

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))），转到  `编辑器｜颜色方案｜HTML` 。

2. 选择配色方案，接受从默认设置继承的高亮设置，或按照 [颜色与字体](configuring-colors-and-fonts.html) 中的说明进行自定义。

## 配置自定义 HTML 标签

IntelliJ IDEA 了解所有标准 HTML 标签，并报告标记中所有未知的标签。 如果您使用依赖于自定义 HTML 标签的框架，那么这些标签也会被报告为未知，在这种情况下，这将是一个误报。

Procedure:

* 要将单个 HTML 标签添加到已知自定义标签列表中，请将文本光标放置在高亮显示的标签上，按下 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS))并选择   将 [tag] 添加到自定义 HTML 标签  。

![IntelliJ IDEA：未知 HTML 标签的快速修复](https://resources.jetbrains.com/help/img/idea/2026.3/html_unknown_tag_inspection_fix.png)

* 要配置多个自定义 HTML 标签，请转到  `编辑器 | 检查` 页面的   设置  对话框（ `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))），找到  `HTML | 未知标签` 检查，并在右侧的检查选项中配置自定义 HTML 标签列表。

![IntelliJ IDEA：未知 HTML 标签的检查选项](https://resources.jetbrains.com/help/img/idea/2026.3/html_unknown_tag_inspection_options.png)

## See also

### 过程

[使用文本光标导航](navigating-through-the-source-code.html#find_cursor_edit)