HTML
GoLand 提供对 HTML 的强大支持,包括语法与错误高亮、按代码样式格式化、结构校验、代码补全,在调试会话期间即时预览(Live Edit )或在代码编辑器中的 专属预览选项卡中进行预览等功能。
启用 HTML Tools 插件
此功能依赖于 HTML Tools 插件,该插件默认在 GoLand 中捆绑并启用。 如果相关功能不可用,请确认您未禁用该插件。
按下 Ctrl+Alt+S 打开设置,然后选择 。
打开 已安装 选项卡,找到 HTML Tools 插件,并选中插件名称旁边的复选框。
HTML 规范可在 语言与框架 | 模式和 DTD 设置页面上的 Default HTML language level 首选项中进行配置 Ctrl+Alt+S。 默认情况下,采用 W3C 的 HTML 5.0 规范。
创建 HTML 文件
转到 ,然后从列表中选择 HTML 文件。
在打开的对话框中,输入新文件的名称,不带任何扩展名。 您可以在新文件名之前输入完整的目录结构。 如果尚未存在嵌套目录,将自动创建:

GoLand 会基于 HTML 文件模板 创建一个存根文件并在编辑器中打开该文件。
在 HTML 文件中创建引用
在 <script>、 <link> 或 <img> 标签内,GoLand 会提供引用文件路径的补全建议。
或者,在 项目 工具窗口中 Alt+1 ,选择您要引用的 JavaScript、CSS 或图像文件并将其拖入 HTML 文件中。 GoLand 会在 <head> 中生成 <script>、 <link> 或 <img> 标签。 对于 <img> 标签,GoLand 还会生成 width 和 height 属性。
将代码片段包裹在标签中
选择要包裹的代码片段,然后按 Ctrl+Alt+T ,或从主菜单中选择 。
从列表中选择 用标签包裹。 GoLand 使用一对括号(
<>和</>)包裹所选内容。在起始括号
<>内输入标签名称。 GoLand 会自动在结束括号</>中填入该标签。
了解详情请参见 生成代码。
文档查找
对于大多数 HTML 标签和属性,GoLand 可向您显示来自对应 MDN 文章 的摘要。 此摘要显示在 文档 弹窗中,还会显示标签或属性的弃用状态及其在各浏览器中的兼容性信息。
如果某标签或属性在所有版本的浏览器中均可用,GoLand 将不会显示关于其兼容性的任何信息。
否则, 文档 弹窗还将列出支持该标签或属性的浏览器及其版本。
如果标签或属性已弃用,弹出窗口也会通知您其状态。
查看标签或属性的文档
将光标定位在标签或属性上并按下 Ctrl+Q ,或从主菜单中选择 。
当您将鼠标悬停在标签或属性上时,GoLand 会立即在 文档 弹出窗口中显示其引用信息。
您可以关闭此行为或配置弹出窗口显示的速度,请参阅下方的 配置文档弹出窗口行为。
配置文档弹窗的行为
若要关闭在将鼠标悬停在代码符号上时自动显示文档的功能,请点击弹出窗口中的
,然后禁用 在鼠标移动时显示 选项。
若要加快或减慢 文档 弹出窗口的显示速度,请打开 设置 对话框(Ctrl+Alt+S ),进入 ,然后选中 显示文档弹窗 复选框并设置延迟时间。
在浏览器中打开标签和属性的 MDN 文档
在 文档 弹出窗口 Ctrl+Q 中,点击底部的链接。
按下 Shift+F1 ,或从主菜单中选择 。
预览 HTML 文件的输出
您可以在内置的 GoLand 预览中或在您选择的浏览器中打开 HTML 代码的输出。
默认情况下,在您在浏览器或内置预览中打开 HTML 文件后,每当手动或自动保存该 HTML 文件(或关联的 JavaScript 或样式表文件)时,GoLand 会自动重新加载页面,详见 保存并还原更改。
您可以更改默认行为,使页面在输入时重新加载,以便对 HTML 或相关文件的更改立即在浏览器或内置预览中显示出来。 请参阅下方的 配置自动重新加载。
GoLand 内置预览
GoLand 的内置预览功能让您的工作更高效,因为您无需再切换至浏览器并刷新页面。 预览在单独的编辑器选项卡中打开,并根据 重新加载行为 自动在输入或保存更改时重新加载。
打开 GoLand 内置预览
在主菜单中,依次进入 ,然后从列表中选择
。
或者,您也可以将鼠标悬停在代码上以显示浏览器图标弹出窗口,然后点击
。
在浏览器中预览 HTML 文件
为了确保您的 HTML 代码在生产环境中能够正确呈现,请在特定浏览器中预览 HTML 文件。
如果您使用的是 GoLand 的内置 Web 服务器,则页面会在您保存更改或输入时自动重新加载,具体取决于 重新加载行为。
转到 ,然后从列表中选择所需的浏览器。
要打开 GoLand 默认浏览器 ,请选择 默认。
或者,您可以将鼠标悬停在代码上以显示浏览器图标弹出窗口,然后点击表示所选浏览器的图标:
如果只配置了一个浏览器,只需按下 Alt+F2 即可。
配置弹窗中的浏览器图标
打开 设置 对话框(Ctrl+Alt+S ),然后进入 。
若要隐藏部分图标,请取消选中不需要浏览器对应的 活动 复选框。
若要隐藏整个弹出窗口,请取消选中 用于 HTML 文件 复选框。
配置自动重新加载
默认情况下,在您在浏览器或内置预览中打开 HTML 文件后,每当手动或自动保存该 HTML 文件(或关联的 JavaScript 或样式表文件)时,GoLand 会自动重新加载页面,详见 保存并还原更改。
当您保存触发页面重新加载的文件时,GoLand 会显示 知道了 工具提示。
您可以更改默认行为,使页面在输入时重新加载,以便对 HTML 或相关文件的更改立即在浏览器或内置预览中显示出来。
进入 工具 | Web 浏览器与预览 设置页面 Ctrl+Alt+S。 或者在 知道了! 工具提示中点击 配置。
在 重新加载行为 区域中,从 在浏览器中重新加载页面 和 在内置预览中重新加载页面 列表中选择将在 Web 浏览器和内置预览中触发页面自动重新加载的操作。 默认情况下,选择了 保存时。
选择 更改时 以便在更新相应 HTML 文件或关联文件时重新加载页面。
选择 禁用 以禁止自动上传。
在编辑器中查看网页的 HTML 源代码
按下 Ctrl+Shift+A 并从列表中选择 从 URL 打开源代码...。
在打开的 打开 URL 对话框中,输入网页的 URL 地址,或从列表中选择先前打开的 URL。
查看嵌入式图像
GoLand 提供多种方式来查看嵌入 HTML 文件中的图像。 您可以使用 导航到源、 在外部图形编辑器中打开图像 ,或 即时预览图像。
在 GoLand 中查看图像
在 项目 工具窗口中,找到并选择图像文件。
或者,将光标放置在编辑器中图像引用的位置并按下 Ctrl+B。
若要在弹出窗口中预览图像而不是在单独的标签页中,请选择图像引用并按下 Ctrl+Shift+I。
在外部编辑器中查看图像
在 项目 工具窗口中,右键点击图像文件并选择 。
或者,按下 Ctrl+Alt+F4。
GoLand 会在操作系统默认使用的编辑器中打开该图像。 您可以 配置其他图像编辑器以供 IDE 打开文件。
更改默认外部编辑器
在编辑器中右键点击图像,并从上下文菜单中选择 编辑外部编辑器的路径…。
您也可以按 Ctrl+Shift+A ,然后键入
Edit Path to External Editor。在 外部编辑器路径 对话框中,指定用于打开图像的应用程序路径,然后点击 保存。

提取 include 文件
您可以将 HTML 代码片段提取到单独的 include 文件中。 也可以提取位于 <script> 标签内的整段 JavaScript 代码块。 GoLand 还会建议添加引用,而不是复制所选片段。
在编辑器中选择要提取的代码块,然后从主菜单或所选内容的上下文菜单中选择 。
在打开的 Extract Include File 对话框中,指定不带扩展名的 include 文件名及其存储目录。 您可以接受预定义目录,或选择其他目录。
准备好后,点击 确定。 GoLand 会将选中的源代码提取到目标目录中指定的文件中,并在源文件中生成相应的引用。
配置语法高亮
您可以根据个人偏好和使用习惯配置 HTML 感知的语法高亮显示。
在 设置 对话框(Ctrl+Alt+S )中,转到 。
选择配色方案,接受从默认设置继承的高亮配置,也可以按照 颜色与字体 中所述进行自定义。
配置自定义 HTML 标签
GoLand 能识别所有标准 HTML 标签,并报告标记中所有未知标签。 如果您使用依赖自定义 HTML 标签的框架,则这些标签也会被报告为未知标签,在此情况下将属于误报。
要将某个 HTML 标签添加到已知自定义标签列表中,请将光标置于高亮标签上,按 Alt+Enter 并选择 将 [tag] 添加到自定义 HTML 标签。
要配置多个自定义 HTML 标签,请转到 页面的 设置 对话框中(Ctrl+Alt+S ),找到 检查,并在右侧的检查选项中配置自定义 HTML 标签列表。
HTML 中的云补全和整行补全
GoLand 在 HTML 代码中提供 Cloud Completion 和 Full Line completion。
Full Line 代码补全功能使用本地运行的深度学习模型来建议整行代码。 该功能在 GoLand 中默认可用,无需额外许可证。
启用 HTML 中的整行代码补全
按 Ctrl+Alt+S 打开设置,然后选择 编辑器 | 常规 | 内联补全。
选中 启用本地Full Line 补全建议 复选框,并确保选中了 HTML 复选框。

Cloud completion 由 AI 助手 提供支持,可基于项目上下文实时补全单行、代码块甚至整段函数代码。
Cloud Completion 会在考虑上下文的同时建议语法上可接受的解决方案,并提前运行各种 代码检查 以排除可能导致错误的选项。
启用 HTML 中的云补全
按 Ctrl+Alt+S 打开设置,然后选择 编辑器 | 常规 | 内联补全。
选中 Enable cloud completion suggestions 复选框,并确保选中了 HTML 复选框。
