HTML 文件

IntelliJ IDEA 提供了对 HTML 的强大支持，包括语法和错误高亮显示、根据代码样式进行格式化、结构验证、代码补全、调试会话期间的即时预览（Live Edit ）或代码编辑器中的专用预览标签等功能。

启用 HTML Tools 插件

此功能依赖于 HTML Tools插件，该插件默认在 IntelliJ IDEA 中捆绑并启用。如果相关功能不可用，请确保您没有禁用插件。

按 Ctrl+Alt+S 打开设置，然后选择插件。
打开已安装选项卡，找到 HTML Tools插件，并选择插件名称旁边的复选框。

HTML 规范可以通过语言与框架 | 模式和 DTD 设置页面  Ctrl+Alt+S 上的默认 HTML 语言级别首选项进行配置。默认情况下，假定使用 W3C 的 HTML 5.0 规范。

创建一个 HTML 文件

请前往文件｜新建，然后从列表中选择 HTML 文件。
在打开的对话框中，输入新文件的名称，不带任何扩展名。您可以在新文件名之前输入整个目录结构。如果嵌套目录尚不存在，则会创建它们：
IntelliJ IDEA 基于 HTML file template 创建一个存根文件并在编辑器中打开。

在 HTML 文件中创建引用

在 <script>、 <link> 或 <img> 标签内，IntelliJ IDEA 会建议您参考文件路径的自动完成。

或者，在项目工具窗口 Alt+1 中，选择您想要引用的 JavaScript、CSS 或图像文件，并将其拖入 HTML 文件中。 IntelliJ IDEA 在 <head> 中生成 <script>、 <link> 或 <img> 标签。对于 <img> 标签，IntelliJ IDEA 还会生成 宽度 和 高度 属性。

将代码片段包装在标签中

选择要包装的代码片段并按 Ctrl+Alt+T 或从主菜单中选择代码 | 代码包围。
从列表中选择用标签包装。 IntelliJ IDEA 将选定内容用一对括号（<> 和 </> ）括起来。
在尖括号内键入标签 <>。 IntelliJ IDEA 会自动填充在闭合括号中的标签 </>。

了解更多生成代码。

文档查找

对于大多数 HTML 标签和属性，IntelliJ IDEA 可以向您显示相应的 MDN 文章摘要。此摘要显示在文档弹出窗口中，该窗口还显示标签或属性的弃用状态以及其与各种浏览器的兼容性信息。

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

否则，文档弹出窗口还会列出支持该标签或属性的浏览器及其版本。

如果标签或属性已被弃用，弹出窗口也会告知您此状态。

查看标签或属性的文档

将文本光标置于该标签或属性上并按下 Ctrl+Q 或从主菜单中选择查看 | 快速文档查找。
当您将鼠标悬停在标签或属性上时，IntelliJ IDEA 会立即在文档弹窗中显示相关参考。
您可以关闭此行为或配置弹出窗口的显示速度，更快或更慢，详见下文配置文档弹出窗口的行为。

配置文档弹出窗口的行为

要关闭在悬停代码符号时自动显示文档的功能，请点击弹出窗口中的，并禁用在鼠标移动时显示选项。
要调整文档弹出窗口的显示速度，请打开设置对话框（Ctrl+Alt+S ），转到编辑器 | 常规 | 代码完成，然后选择显示文档弹窗复选框并指定延迟时间。

在浏览器中打开 MDN 文档以了解标签和属性

在文档弹出窗口 Ctrl+Q 中，点击底部的链接。
按 Shift+F1 或从主菜单中选择查看 | 外部文档。

预览 HTML 文件的输出

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

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

您可以更改默认行为，使其在您输入时重新加载页面，以便对 HTML 或相关文件的更改立即显示在浏览器或内置预览中。请参见下文的配置自动重新加载。

IntelliJ IDEA 内置预览

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

打开 IntelliJ IDEA 内置预览

在主菜单中，转到查看 | 在浏览器中打开，然后从列表中选择内置预览。
或者，将鼠标悬停在代码上以显示浏览器图标弹出窗口，然后点击。

在浏览器中预览 HTML 文件

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

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

请移至查看 | 在浏览器中打开，然后从列表中选择所需的浏览器。
要打开 IntelliJ IDEA 默认浏览器，请选择默认。
或者，您可以将鼠标悬停在代码上以显示浏览器图标弹出窗口，然后点击指示所需浏览器的图标：
如果您只配置了一个浏览器，只需按 Alt+F2。

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

打开设置对话框(Ctrl+Alt+S )并转到工具 | Web Browsers 和预览。

若要隐藏部分图标，请取消选中不必要浏览器的有效复选框。
要隐藏整个弹出窗口，请清除 HTML 文件专用复选框。

配置自动重载

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

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

转到工具 | Web Browsers 和预览设置页面  Ctrl+Alt+S。或者，点击配置在知道了! 工具提示中。
在重新加载行为区域，从在浏览器中重新加载页面和在内置预览中重新加载页面列表中，选择将在网页浏览器和内置预览中触发页面自动重新加载的操作。默认情况下，会选择保存时。
- 选择更改时，在您更新相应的 HTML 文件或链接文件时重新加载页面。
- 选择已禁用以禁止自动上传。

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

按 Ctrl+Shift+A 并从列表中选择从 URL 打开源代码...。
在打开的打开 URL 对话框中，输入网页的 URL 地址或从列表中选择以前打开的 URL。

查看嵌入图像

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

在 IntelliJ IDEA 中查看图像

在项目工具窗口中，找到并选择图像文件。
或者，将文本光标置于编辑器中引用图像的地方，然后按 Ctrl+B。
要在弹出窗口中预览图像而不是在单独的选项卡中，请选择其引用并按 Ctrl+Shift+I。

在外部编辑器中查看图像

在项目工具窗口中，右键点击图像文件并选择跳转到外部编辑器。
或者按 Ctrl+Alt+F4。
IntelliJ IDEA 在编辑器中打开该图像，默认使用您的操作系统中的编辑器。您可以在 IDE 中配置另一个图像编辑器以打开文件。

更改默认外部编辑器

在编辑器中右键点击图像，然后从上下文菜单中选择编辑外部编辑器的路径…。
您也可以按 Ctrl+Shift+A 并输入 Edit Path to External Editor。
在外部编辑器路径对话框中，指定您想要打开图像的应用程序的路径，然后点击保存。

提取包含文件

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

在编辑器中，选择要提取的代码块，然后从主菜单或选择的上下文菜单中选择重构 | 提取 | 提取包含文件。
在打开的 Extract Include File对话框中，指定不带扩展名的包含文件的名字和存储这个文件的目录。您可以接受预定义目录或选择其他目录。
点击 OK ，准备好时. IntelliJ IDEA 将选定的源代码提取到目标目录中的指定文件，并在源文件中生成相应的引用。

配置语法高亮

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

在设置对话框（Ctrl+Alt+S ）中，前往编辑器｜颜色方案｜HTML。
选择配色方案，接受从默认值继承的高亮设置，或按照颜色和字体中所述自定义它们。

配置自定义 HTML 标签

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

要将单个 HTML 标签添加到已知自定义标签列表中，请将文本光标放置在高亮显示的标签上，按下 Alt+Enter 并选择将 [tag] 添加到自定义 HTML 标签。
要配置多个自定义 HTML 标签，请转到编辑器 | 检查页面的设置对话框（Ctrl+Alt+S ），找到 HTML | 未知标签检查，并在右侧的检查选项中配置自定义 HTML 标签列表。