HTML
WebStorm 提供对 HTML 的强大支持，包括语法和错误高亮、依据代码风格的格式化、结构验证、代码补全、调试会话中的即时预览（Live Edit ）或在代码编辑器中的 专用预览选项卡中展示预览，以及更多功能。
启用 HTML Tools 插件
此功能依赖于 HTML Tools 插件，该插件默认在 WebStorm 中捆绑并启用。 如果找不到相关功能，请确认没有禁用该插件。
按 Ctrl+Alt+S 打开设置，然后选择 。
打开 已安装 选项卡，找到 HTML Tools 插件，并勾选插件名称旁的复选框。
HTML 规范可通过设置页面中的 语言与框架 | 架构与 DTD 首选项“Default HTML language level”进行配置 Ctrl+Alt+S。 默认情况下，采用 W3C 的 HTML 5.0 规范。
创建 HTML 文件
转到 ，然后从列表中选择 HTML 文件。
在打开的对话框中，输入新文件的名称，不带扩展名。 您可以在新文件名之前输入完整目录结构。 如果嵌套目录尚不存在，将会自动创建：
WebStorm 将基于 HTML file template 创建一个存根文件并在编辑器中打开。
在 HTML 文件中创建引用
在 <script>、 <link> 或 <img> 标记中，WebStorm 会建议补全所引用文件的路径。
或者，在 项目 工具窗口 Alt+1 中，选择要引用的 JavaScript、CSS 或图像文件，并将其拖入 HTML 文件中。 WebStorm 会在 <head> 内生成 <script>、 <link> 或 <img> 标签。 对于 <img> 标签，WebStorm 还会生成 width 与 height 属性。
使用标签包裹代码片段
选择要包裹的代码片段，然后按 Ctrl+Alt+T ，或从主菜单中选择 。
从列表中选择 使用标签包裹。 WebStorm 会将所选内容括在一对括号（
<>和</>）内。在起始括号
<>中输入标签。 WebStorm 会自动在结束括号</>中补全标签。
请从 生成代码 获取更多信息。
查阅文档
对于大多数 HTML 标签和属性，WebStorm 可以向您显示对应 MDN 文章 的摘要内容。 此摘要显示在 文档 弹窗中，弹窗还会显示标签或属性的弃用状态以及其在各种浏览器中的兼容性信息。
如果某个标签或属性在所有版本的浏览器中都可用，WebStorm 将不会显示其兼容性信息。
否则， 文档 弹窗还会列出支持该标签或属性的浏览器及其版本。
如果某个标签或属性已弃用，则弹窗也会提示相关状态。
查看标签或属性的文档
将光标置于标签或属性上，然后按下 Ctrl+Q 或从主菜单中选择 。
当您将鼠标悬停在标签或属性上时，WebStorm 会立即在 文档 弹窗中显示相关参考信息。
您可以关闭此行为，或配置弹窗显示速度，详见下文的 配置文档弹窗行为。
配置文档弹出窗口的行为
要关闭将鼠标悬停在代码符号上时自动显示文档的功能，请单击弹窗中的
，然后取消选中 在鼠标移动时显示 选项。要加快或减慢 文档 弹窗的显示速度，请打开 设置 对话框（Ctrl+Alt+S ），进入 ，然后选中 显示文档弹出窗口 复选框并指定延迟时间。
在浏览器中打开标签和属性的 MDN 文档
在 文档 弹窗 Ctrl+Q 中，单击底部的链接。
按下 Shift+F1 或从主菜单中选择 。
预览 HTML 文件的输出
您可以在内置的 WebStorm 预览中或借助任意浏览器查看 HTML 代码的输出结果。
默认情况下，在浏览器或内置预览中打开 HTML 文件后，每次手动或自动保存该 HTML 文件（或任何关联的 JavaScript 或样式表文件），WebStorm 都会自动重新加载页面，详见 保存并还原更改。
您可以更改默认行为，使其在键入过程中重新加载页面，以便 HTML 或相关文件的更改立即在浏览器或内置预览中显示。 详见下文的 配置自动重新加载。
WebStorm 内置预览
WebStorm 的内置预览可加快您的工作进度，因为您无需切换到浏览器或手动刷新页面。 预览将在独立的编辑器选项卡中打开，并在您键入或保存更改时根据 重新加载行为 自动刷新。
打开 WebStorm 的内置预览
在主菜单中，转到 ，然后从列表中选择
。或者，将鼠标悬停在代码上以显示浏览器图标弹窗，然后单击
。
在浏览器中预览 HTML 文件
为了确保 HTML 代码能在生产环境中正确呈现，请在指定浏览器中预览 HTML 文件。
如果您使用的是 WebStorm 的内置 Web 服务器，页面将在保存更改或键入时自动重新加载，具体取决于 重新加载行为。
转到 ，然后从列表中选择所需的浏览器。
要打开 默认 WebStorm 浏览器 ，请选择 默认。
或者，将鼠标悬停在代码上以显示浏览器图标弹窗，然后点击表示所需浏览器的图标：
如果您仅配置了一个浏览器，只需按 Alt+F2 即可。
配置弹出窗口中的浏览器图标
打开 设置 对话框（Ctrl+Alt+S ），然后转到 。
要隐藏部分图标，请取消选中不需要的浏览器的 活动 复选框。
要隐藏整个弹窗，请取消选中 用于 HTML 文件 复选框。
配置自动重新加载
默认情况下，在浏览器或内置预览中打开 HTML 文件后，每次手动或自动保存该 HTML 文件（或任何关联的 JavaScript 或样式表文件），WebStorm 都会自动重新加载页面，详见 保存并还原更改。
当您保存一个会触发页面重新加载的文件时，WebStorm 会显示一个 知道了 工具提示。
您可以更改默认行为，使其在键入过程中重新加载页面，以便 HTML 或相关文件的更改立即在浏览器或内置预览中显示。
转到 工具 | Web 浏览器与预览 设置页面 Ctrl+Alt+S。 或者，点击 配置 中的 知道了! 工具提示。
在 重新加载行为 区域中，从 在浏览器中重新加载页面 和 在内置预览中重新加载页面 列表中选择将触发网页和内置预览自动重新加载的操作。 默认情况下，选中了 保存时。
选择 更改时 可在更新相关 HTML 文件或关联文件时重新加载页面。
选择 已禁用 可禁止自动上传。
在编辑器中查看网页的 HTML 源代码
按下 Ctrl+Shift+A 并从列表中选择 从 URL 打开源代码...。
在打开的 打开 URL 对话框中，输入网页的 URL 地址，或者从列表中选择之前打开过的 URL。
查看内嵌图像
WebStorm 提供多种查看 HTML 文件中嵌入图像的方法。 您可以使用 导航到源、 在外部图形编辑器中打开图像 或 即时预览图像。
在 WebStorm 中查看图像
在 项目 工具窗口中，找到并选择图像文件。
或者，将光标放在编辑器中指向图像的引用上，然后按 Ctrl+B。
若要在弹出窗口中而不是在单独选项卡中预览图像，请选择对该图像的引用并按 Ctrl+Shift+I。
在外部编辑器中查看图像
在 项目 工具窗口中，右键点击图像文件并选择 。
或者，按 Ctrl+Alt+F4。
WebStorm 会在操作系统中默认使用的编辑器中打开图像。 您可以 配置其他图像编辑器 ，以便 IDE 可以在其中打开文件。
更改默认外部编辑器
在编辑器中右键点击图像，然后从上下文菜单中选择 编辑外部编辑器的路径…。
您也可以按 Ctrl+Shift+A 并输入
Edit Path to External Editor。在 外部编辑器路径 对话框中，指定要用于打开图像的应用程序路径，并点击 保存。
提取 include 文件
您可以将 HTML 代码片段提取为单独的 include 文件。 也可以提取位于 <script> 标签中的完整 JavaScript 代码块。 WebStorm 还会建议添加引用，以避免选定片段的重复内容。
在编辑器中选择要提取的代码块，然后从主菜单或选中内容的上下文菜单中选择 。
在打开的 提取 Include 文件 对话框中，指定 include 文件的名称（不含扩展名）以及存储目录。 您可以接受预定义的目录，也可以选择其他目录。
准备就绪后，点击 确定。 WebStorm 会将选定的源代码提取到目标目录中指定的文件中，并在源文件中生成相应的引用。
配置语法高亮
您可以根据偏好和习惯配置 HTML 感知的语法高亮设置。
在 设置 对话框（Ctrl+Alt+S ）中，转到 。
选择配色方案，接受继承自默认设置的高亮方式或按照 颜色和字体 中所述进行自定义。
配置自定义 HTML 标签
WebStorm 能识别所有标准 HTML 标签，并会报告标记中所有未知标签。 如果您使用的框架依赖自定义 HTML 标签，这些标签也会被报告为未知标签，在此情况下属于误报。
要将单个 HTML 标签添加到已知自定义标签列表中，请将光标置于高亮标签上，按 Alt+Enter 并选择 将 [tag] 添加到自定义 HTML 标签。
要配置多个自定义 HTML 标签，请转到 页，在 设置 对话框（Ctrl+Alt+S ）中，找到 检查项，并在右侧的检查选项中配置自定义 HTML 标签列表。
HTML 中的 Cloud Completion 与整行补全
WebStorm 在 HTML 代码中提供 Cloud Completion 和 Full Line completion。
Full Line 代码补全功能使用本地运行的深度学习模型来建议整行代码。 该功能在 WebStorm 中默认可用，无需额外授权。
启用 HTML 中的整行代码补全
按 Ctrl+Alt+S 打开设置并选择 编辑器 | 常规 | 内联补全。
选中 启用本地Full Line 补全建议 复选框，并确保 HTML 复选框已被选中。
由 AI 助理 提供支持的 Cloud Completion 能够根据项目上下文实时补全单独行、代码块，甚至整个函数。
Cloud Completion 在考虑上下文的情况下，提供语法上可接受的方案，并预先运行各种 代码检查 ，以排除会导致错误的候选项。
启用 HTML 中的 Cloud Completion
按 Ctrl+Alt+S 打开设置并选择 编辑器 | 常规 | 内联补全。
选中 Enable cloud completion suggestions 复选框，并确保 HTML 复选框已被选中。
