处理 HTML 文件

PyCharm 为 HTML 提供强大的支持，包括语法和错误高亮、按照代码样式进行格式化、结构验证、代码补全、在调试会话期间进行即时预览（Live Edit ），或在代码编辑器的专用预览选项卡中预览，等等。

启用 HTML Tools 插件

此功能依赖于 HTML Tools 插件，该插件随 PyCharm 一起捆绑并默认启用。如果相关功能不可用，请确保您未禁用该插件。

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

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

创建 HTML 文件

转到文件 | 新建，然后在列表中选择 HTML 文件。
在打开的对话框中，输入新文件的名称，不带任何扩展名。您可以在新文件名之前输入完整的目录结构。如果嵌套目录尚不存在，将会创建它们：
PyCharm 会基于 HTML 文件模板创建存根文件，并在编辑器中将其打开。

在 HTML 文件中创建引用

在 <script>、 <link> 或 <img> 标签内，PyCharm 会为引用文件的路径提供补全建议。

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

用标签包裹代码片段

选中要包裹的代码片段，然后按 Ctrl+Alt+T ，或在主菜单中选择代码 | 包围。
在列表中选择用标签包围。 PyCharm 会将所选内容包裹在一对尖括号（<> 和 </> ）中。
在左尖括号 <> 内输入标签。 PyCharm 会在右尖括号 </> 内自动补全该标签。

在生成代码中了解更多信息。

查找文档

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

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

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

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

查看标签或属性的文档

将插入符定位到标签或属性处，然后按 Ctrl+Q ，或在主菜单中选择视图 | 快速文档查阅。
当您将鼠标悬停在标签或属性上时，PyCharm 会立即在文档弹出窗口中显示其参考信息。
您可以关闭此行为，或配置弹出窗口显示得更快或更慢。请参阅下文的配置文档弹出窗口的行为。

配置文档弹出窗口的行为

要在将鼠标悬停在代码符号上时关闭自动显示文档，请在弹出窗口中点击，并禁用在鼠标移动时显示选项。
要使文档弹出窗口显示得更快或更慢，请打开设置对话框（Ctrl+Alt+S ），转到编辑器 | 常规 | 代码补全，然后选中显示文档弹出窗口复选框并指定延迟时间。

在浏览器中打开标签和属性的 MDN 文档

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

预览 HTML 文件的输出

您可以在 PyCharm 的内置预览中，或在您选择的浏览器中打开 HTML 代码的输出。

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

您可以将默认行为更改为在键入时重新加载页面，这样对 HTML 或相关文件的更改会立即出现在浏览器或内置预览中。请参阅下文的配置自动重新加载。

PyCharm 内置预览

PyCharm 的内置预览可加快您的工作流程，因为您不再需要切换到浏览器并刷新页面。预览会在单独的编辑器选项卡中打开，并根据重新加载行为，在您键入时或保存更改时自动重新加载。

打开 PyCharm 内置预览

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

在浏览器中预览 HTML 文件

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

如果您使用内置的 PyCharm Web 服务器，则根据重新加载行为，在您保存更改时或键入时会自动重新加载页面。

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

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

打开设置对话框（Ctrl+Alt+S ），转到工具 | Web 浏览器与预览。

要隐藏某些图标，请清除不需要的浏览器的启用复选框。
要隐藏整个弹出窗口，请清除针对 HTML 文件复选框。

配置自动重新加载

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

您可以将默认行为更改为在键入时重新加载页面，这样对 HTML 或相关文件的更改会立即出现在浏览器或内置预览中。

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

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

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

查看嵌入的图像

PyCharm 提供多种方式查看嵌入在 HTML 文件中的图像。您可以使用导航到源、在外部图形编辑器中打开图像，或即时预览图像。

在 PyCharm 中查看图像

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

在外部编辑器中查看图像

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

更改默认的外部编辑器

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

提取包含文件

您可以将一段 HTML 代码提取到单独的包含文件中。位于 <script> 标签内的整个 JavaScript 代码块也可以提取。 PyCharm 还会建议添加引用，而不是复制所选片段。

在编辑器中，选择要提取的代码块，然后在主菜单或所选内容的上下文菜单中选择重构 | 提取 | 提取包含文件。
在打开的 Extract Include File 对话框中，指定包含文件的名称（不带扩展名）以及要将其存储到的目录。您可以接受预定义的目录，或选择其他目录。
准备就绪后，点击确定。 PyCharm 会将所选源代码提取到目标目录中的指定文件，并在源文件中生成相应的引用。

配置语法高亮

您可以根据个人偏好和习惯配置 HTML 感知的语法高亮。

在设置对话框（Ctrl+Alt+S ）中，转到编辑器 | 配色方案 | HTML。
选择配色方案，接受从默认继承的高亮设置，或按照颜色与字体中所述进行自定义。

配置自定义 HTML 标签

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

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