# 代码样式。 HTML > For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt). > **TL;DR** > `文件 | 设置 | 编辑器 | 代码样式 | HTML` 适用于 Windows 和 Linux > > > > `%instance% | 设置 | 编辑器 | 代码样式 | HTML` 适用于 macOS > > > > `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) !["设置"图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.settings.svg) 使用此页面配置 HTML 文件的格式选项。 当您更改这些设置时， 预览 面板将显示这将如何影响您的代码。 ## 制表符和缩进 | 使用制表符 | * 如果选中此复选框，将使用制表符： * 按下 `Tab` (Windows), `⇥` (macOS), `⇥` (IntelliJ IDEA Classic (macOS)), `⇥` (macOS System Shortcuts), `Tab` (XWin), `Tab` (GNOME), `Tab` (KDE), `Tab` (Emacs), `Tab` (Sublime Text), `⇥` (Sublime Text (macOS)), `Tab` (Visual Studio), `⇥` (Visual Studio (macOS)), `Tab` (NetBeans), `Tab` (Eclipse), `⇥` (Eclipse (macOS)) 键时 * 对于缩进 * 对于代码重排格式 * 如果取消勾选复选框，IntelliJ IDEA 将使用空格代替制表符。 | | 智能制表符 | 一个缩进包含两部分。 一部分来自于嵌套代码块，另一部分由对齐确定。 * 如果选中此复选框，嵌套产生的部分将同时包含制表符和空格（如果有必要），而对齐定义的部分则仅由空格组成。 * 如果此复选框未选中，将只使用选项卡。 这意味着，在重新格式化后，适应指定制表符大小的一组空格将自动被替换为一个制表符，这可能导致微调对齐的破坏。 > **Tip:** > 如果选中了 使用制表符 复选框，那么 智能缩进 复选框将可用。 | | 选项卡大小 | 在此字段中，指定一个制表符中能容纳的空格数。 | | 缩进 | 在此字段中，指定为每个缩进级别插入的空格数量。 | | 连续缩进 | 在此字段中，指定在数组元素、表达式、方法声明和方法调用之间插入的空格数量。 | | 保持空行的缩进 | 如果选中此复选框，IntelliJ IDEA 会保留空行上的缩进，就像它们包含了一些代码一样。 如果取消选中该复选框，IntelliJ IDEA 将删除空行上的制表符和空格。 | ## 其他 | 条目 | 描述 | | --- | --- | | 右边距 | 使用这些设置指定元素右侧所需的边距 Space。 如果您选择 默认 选项，则会使用 [全局设置](settings-code-style.html#rightMargin) 中的右边距值。 | | 在输入时换行 | 使用这些设置来指定如何将编辑过的文本适应到指定的 右边距 中。 您可以选择以下选项中的一个： * 默认 - 在这种情况下，IntelliJ IDEA 使用 在输入时换行 选项，该选项在 [全局设置](settings-code-style.html#wrapOnTyping)中指定。 * 是 - 在这种情况下，将使用指定的右边距值。 * 否 - 在这种情况下，此选项被关闭，且一行可以超过右边距中指定的数字。 | | 保留换行符 | 选择此复选框，让 IntelliJ IDEA 在编辑器中查看HTML文件时尊重换行。 | | 保留文本中的换行符 | 选中此复选框，当在编辑器中查看 HTML 文件时，IntelliJ IDEA 将会遵守属性中的换行符（例如，冗长的描述）。 | | 保留空行 | 在此字段中，指定重格式化后保留的连续空行的最小数量。 | | 包装属性 | 使用此下拉列表确定应如何换行属性行。 可用选项包括： * 不进行换行 - 如果选中此选项，代码不应用任何特殊的换行样式。 * 如果过长则换行 - 选择此选项，可以将超出右侧边距的行用适当的缩进进行换行。 * 如果过长则剪短 - 选择此选项，可以让超出右边距的列表元素进行换行处理，以便每行只有一个元素，并且具有适当的缩进。 * 始终换行 - 选择此选项，可使列表中的所有元素换行，每行一个元素，并有适当的缩进。 | | 文本换行 | 选择此复选框以根据代码样式设置进行长行换行。 | | 对齐特性 | 选择此复选框以对齐顺序行中的属性。 | | 对齐文本 | 选择此复选框，以便让 IntelliJ IDEA 对占据选项卡内多行的文本进行对齐。 | | 保留空白 Space | 选择此复选框以阻止使用制表符替换实际空格。 | | 空格 | 在此区域内，定义属性和选项卡名的空格使用规则。 * 在属性中的 "=" 周围 - 选中此复选框可以在属性中的 "=" 符号周围添加空格。 * 选项卡名称后 - 选中此复选框将在选项卡名称后添加空格。 * 在空选项卡中 - 选中此复选框可在空选项卡中添加空格。 | | 在以下内容前插入新行 | 此显示字段显示应在其前插入新行的标记列表。 使用位于字段旁边的按钮 ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.expandComponent.svg) 或按 `Shift+Enter` (Windows), `⇧ ⏎` (macOS), `⇧ ⏎` (IntelliJ IDEA Classic (macOS)), `⇧ ⏎` (macOS System Shortcuts), `Shift+Enter` (XWin), `Shift+Enter` (GNOME), `Shift+Enter` (KDE), `Shift+Enter` (Emacs), `Ctrl+Enter` (Sublime Text), `⌘ ⏎` (Sublime Text (macOS)), `Shift+Enter` (Visual Studio), `⇧ ⏎` (Visual Studio (macOS)), `Shift+Enter` (NetBeans), `Shift+Enter` (Eclipse), `⇧ ⏎` (Eclipse (macOS)) 打开 在标签前插入新行 对话框，您可以在此编辑选项卡列表。 | | 移除以下内容前的新行 | 此显示字段显示应在其前移除换行的标记列表。 使用位于字段旁边的按钮 ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.expandComponent.svg) 或按 `Shift+Enter` (Windows), `⇧ ⏎` (macOS), `⇧ ⏎` (IntelliJ IDEA Classic (macOS)), `⇧ ⏎` (macOS System Shortcuts), `Shift+Enter` (XWin), `Shift+Enter` (GNOME), `Shift+Enter` (KDE), `Shift+Enter` (Emacs), `Ctrl+Enter` (Sublime Text), `⌘ ⏎` (Sublime Text (macOS)), `Shift+Enter` (Visual Studio), `⇧ ⏎` (Visual Studio (macOS)), `Shift+Enter` (NetBeans), `Shift+Enter` (Eclipse), `⇧ ⏎` (Eclipse (macOS)) 打开 在标签前删除换行符 对话框，您可以在此编辑选项卡列表。 | | 不缩进以下内容的子元素 | 此显示字段显示其子元素不应缩进的标记列表。 使用位于字段旁边的按钮 ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.expandComponent.svg) 或按 `Shift+Enter` (Windows), `⇧ ⏎` (macOS), `⇧ ⏎` (IntelliJ IDEA Classic (macOS)), `⇧ ⏎` (macOS System Shortcuts), `Shift+Enter` (XWin), `Shift+Enter` (GNOME), `Shift+Enter` (KDE), `Shift+Enter` (Emacs), `Ctrl+Enter` (Sublime Text), `⌘ ⏎` (Sublime Text (macOS)), `Shift+Enter` (Visual Studio), `⇧ ⏎` (Visual Studio (macOS)), `Shift+Enter` (NetBeans), `Shift+Enter` (Eclipse), `⇧ ⏎` (Eclipse (macOS)) 打开 不要缩进子项 对话框，您可以在此编辑选项卡列表。 | | 或者当标记大小超过 | 在此字段中，指定选项卡在多少行长度开始时，其子项将不会进行缩进。 | | 内联元素 | 此显示字段显示在源代码中与其他标记位于同一行的标记列表。 如果从列表中移除了一个选项卡，当您在源代码中添加此类选项卡时，编辑器会自动将其移动到新行。 使用位于字段旁边的按钮 ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.expandComponent.svg) 或按 `Shift+Enter` (Windows), `⇧ ⏎` (macOS), `⇧ ⏎` (IntelliJ IDEA Classic (macOS)), `⇧ ⏎` (macOS System Shortcuts), `Shift+Enter` (XWin), `Shift+Enter` (GNOME), `Shift+Enter` (KDE), `Shift+Enter` (Emacs), `Ctrl+Enter` (Sublime Text), `⌘ ⏎` (Sublime Text (macOS)), `Shift+Enter` (Visual Studio), `⇧ ⏎` (Visual Studio (macOS)), `Shift+Enter` (NetBeans), `Shift+Enter` (Eclipse), `⇧ ⏎` (Eclipse (macOS)) 打开 内联元素 对话框，您可以在此编辑选项卡列表。 | | 保留内部空白字符 | 此显示字段显示一个标记列表，编辑器会在这些标记内 按原样 保留空白字符，不进行任何更改。 使用字段旁边的按钮 ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.expandComponent.svg) 或按 `Shift+Enter` (Windows), `⇧ ⏎` (macOS), `⇧ ⏎` (IntelliJ IDEA Classic (macOS)), `⇧ ⏎` (macOS System Shortcuts), `Shift+Enter` (XWin), `Shift+Enter` (GNOME), `Shift+Enter` (KDE), `Shift+Enter` (Emacs), `Ctrl+Enter` (Sublime Text), `⌘ ⏎` (Sublime Text (macOS)), `Shift+Enter` (Visual Studio), `⇧ ⏎` (Visual Studio (macOS)), `Shift+Enter` (NetBeans), `Shift+Enter` (Eclipse), `⇧ ⏎` (Eclipse (macOS)) 打开 保持空格不变 对话框，在此对话框中，您可以编辑选项卡列表。 | | 如果是内联内容则不要换行 | 此显示字段显示一个标记列表，如果其内容为内联，则这些标记不应处于已包装状态。 使用位于字段旁边的按钮 ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.expandComponent.svg) 或按 `Shift+Enter` (Windows), `⇧ ⏎` (macOS), `⇧ ⏎` (IntelliJ IDEA Classic (macOS)), `⇧ ⏎` (macOS System Shortcuts), `Shift+Enter` (XWin), `Shift+Enter` (GNOME), `Shift+Enter` (KDE), `Shift+Enter` (Emacs), `Ctrl+Enter` (Sublime Text), `⌘ ⏎` (Sublime Text (macOS)), `Shift+Enter` (Visual Studio), `⇧ ⏎` (Visual Studio (macOS)), `Shift+Enter` (NetBeans), `Shift+Enter` (Eclipse), `⇧ ⏎` (Eclipse (macOS)) 打开 如果仅有内联内容则不换行 对话框，您可以在此编辑选项卡列表。 | | 生成的引用标记。 | 选择要在键入 HTML 属性时自动插入的引号样式（双引号，单引号或无） `=` 。 在动态使用 JavaScript 或 PHP 插入 HTML 时，这一点非常重要，因为您希望在 JavaScript 或 PHP 字符串中始终使用双引号对，并在 HTML 中使用单引号对，以防止例如复制和粘贴时出现问题。 | | 在格式化时强制执行 | 如果选中此复选框，那么在 [代码重新格式化](reformat-and-rearrange-code.html) 时，先前生成的引号将被替换（例如，双引号将被替换为单引号）。 | ## 排列 在此选项卡中，根据您的偏好设定一系列规则，以重新排列您的 HTML 代码。 | 匹配规则 | 使用此区域将元素顺序定义为规则列表，其中每条规则都有一个匹配项设置，例如修饰符或类型。 * ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg) - 使用此按钮添加规则。 空规则 区域已打开。 * ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.remove.svg) - 使用此按钮从列表中删除规则。 * ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.edit.svg) - 使用此按钮编辑现有规则。 要查看此按钮，请导航至您想要编辑的规则并点击按钮。 在弹出的窗口中，修改规则字段。 * ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.up.svg) ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.down.svg) - 使用这些按钮将选定的规则向上或向下移动。 | | 空规则 | 使用此区域创建新的匹配规则或编辑现有规则。 您可以从以下筛选器中选择： * 类型 - 请使用此过滤器为您的规则选择选项卡或属性。 请注意，双击类型关键字将否定条件。 * 名称 - 请使用此字段来指定规则中的条目名称。 这个过滤器只匹配条目名称，例如选项卡名称或属性名称。 该过滤器支持正则表达式，并使用 [标准语法](http://docs.oracle.com/javase/7/docs/api/java/util/regex/Pattern.html)。 匹配是针对整个名称进行的。 * 命名空间 - 请在规则中使用此字段来指定命名空间。 它让您可以指定一个控制命名空间属性位置的规则。 * 订单 - 使用此下拉列表选择规则的排序顺序。 当多个元素使用相同的匹配规则时，此选项非常有用。 在这种情况下，选择 保持顺序 将保持在重排之前设置的相同顺序，选择 按名称排序 将按照它们的名称对相同匹配规则的元素进行排序。 | | ![icon_sort.png](https://resources.jetbrains.com/help/img/idea/2026.3/icon_sort.png) | 当从 订单 列表中选择 按名称排序 时，会显示此图标。 图标表示此规则中的项目按字母顺序排序。 | ## 代码生成 在此选项卡中，可以配置生成代码的代码样式。 | 注释 | 在此区域，配置生成注释的代码样式。 * 行注释位于首列 ：选中此复选框，以在第一列开始行评论。 当复选框未选中时，代码中的行注释将会对齐。 在第一列开启行注释: ![选择了位于第一列的行注释](https://resources.jetbrains.com/help/img/idea/2026.3/ws_code_style_html_line_comment_first_column_on.png) 在第一列关闭行注释: ![位于第一列的行注释已清除](https://resources.jetbrains.com/help/img/idea/2026.3/ws_code_style_html_line_comment_first_column_off.png) * 块注释位于首列 ：默认情况下，此复选框未选中，代码中的块注释将被对齐。 选择复选框以从第一列开始块注释。 在第一列关闭块注释: ![第一列的块注释关闭了](https://resources.jetbrains.com/help/img/idea/2026.3/ws_code_style_html_block_comment_first_column_off.png) 在第一列开启块注释: ![在第一列的块注释已打开](https://resources.jetbrains.com/help/img/idea/2026.3/ws_code_style_html_block_comment_first_column_on.png) * 在块注释周围添加 Space ：勾选此复选框以在块注释中添加前导和尾随空格。 默认情况下，当您在块注释中封闭一个代码片段时，文本会在打开 `` 字符前都没有插入空格。 这种默认的代码样式可能与一些代码检查工具的规则发生冲突，例如，ESLint。 在块注释开始处添加一个空格: ![未在块注释开始处添加空格](https://resources.jetbrains.com/help/img/idea/2026.3/ws_code_style_html_space_at_block_comment_off.png) 在块注释开始处添加空格: ![在块注释开始处增加了一个空格](https://resources.jetbrains.com/help/img/idea/2026.3/ws_code_style_html_space_at_block_comment_on.png) | ## 设置从 当适用时，链接将出现在页面的右上角。 点击此链接并选择要作为当前语言代码样式基础的语言。 要返回到初始的代码样式设置，并丢弃更改，请点击 重置 。 ## See also ### 过程 [样式表](style-sheets.html) [代码样式方案](configuring-code-style.html) ### 参考 [代码样式。 XML](settings-code-style-xml.html) [代码样式](settings-code-style.html)