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