为什么、、和标签不应重新格式化？

在、和元素内，空格和换行符是由浏览器逐字呈现的，因此更改缩进会破坏显示的输出。同样，使用 HTML 解析器分割或标记内的行可能会破坏 JavaScript string 文字或 CSS 选择器。启用“保留、、未格式化”会逐字保留这些块。

HTML Beautifier & 在线格式化程序

Q: HTML美化和HTML缩小有什么区别？

HTML 美化（漂亮打印）添加了结构化换行符和分层缩进，以便开发人员可以轻松阅读、调试和维护标记。 HTML 缩小会去除不必要的空格、换行符和注释，以减小文件大小，从而加快生产页面加载速度。

Q: 为什么 、 、 和 标签不应重新格式化？

在 、 和 元素内，空格和换行符是由浏览器逐字呈现的，因此更改缩进会破坏显示的输出。同样，使用 HTML 解析器分割 或 标记内的行可能会破坏 JavaScript string 文字或 CSS 选择器。启用“保留 、 、 未格式化”会逐字保留这些块。

Q: HTML Beautifier 如何处理 HTML5 void（自关闭）元素？

HTML5 定义了 14 个没有结束标签的 void 元素（area、base、br、col、embed、hr、img、input、link、meta、param、source、track 和 wbr）。此格式化程序会自动识别所有 14 个 void 元素（加上 声明和 XML/SGML 指令），因此它们永远不会将后续同级标记推入更深的缩进级别。

实时格式化、缩进和清理凌乱或缩小的 HTML5 代码。正确处理 HTML5 void 标签、内联元素、属性包装，并保留

、

输入HTML代码

Quick Presets:

字符数：0

行数：0

尺寸: 0 B

格式化 HTML 输出

缩进选项

缩进大小（空格）：

使用制表符代替空格 Indent nested HTML elements using tab characters (\t)

标签 & Line Wrapping

将短内联标签保留在一行上 Keep inline tags like <strong>, <a>, <span>, and <code> together with surrounding text

保持

、

Preserve exact whitespace and line breaks inside raw text and code blocks

Wrap 将属性标记到新行 Place each HTML attribute on its own indented line when a tag has 2+ attributes

Wrap 文本内容位于：

清理选项

删除 HTML 评论 Strip  comments from the formatted output

删除所有空行 Strip blank lines between formatted HTML elements

要保留的最大空行数：

什么是在线 HTML Beautifier 和格式化程序？

HTML Beautifier（也称为 HTML 格式化程序或漂亮打印机）采用压缩、缩小或不一致缩进的 HTML 源代码，并将其重组为干净的、人类可读的 DOM 层次结构。无论您是检查缩小的生产模板、清理 CMS 导出，还是在提交到 Git 之前标准化代码，正确的缩进都可以轻松发现未封闭的标签和深度嵌套的容器。

与将每个尖括号拆分为新行并损坏

或

如何在线美化或Minify HTML代码

粘贴您的 HTML 标记： 将未格式化或缩小的 HTML 代码粘贴到 Input HTML Code 框中，或单击 Load Sample HTML 以使用完整的 HTML5 模板测试格式化程序。
选择您的格式首选项： 使用 快速预设 栏或右侧设置列来配置缩进（2、4 或 8 个空格或制表符）、属性换行、内联标记分组和注释删除。
复制、下载或 minify: 您的格式化 HTML 将在您键入时自动更新。单击 Copy to Clipboard、Download .html 将文件保存在本地，或单击 Minify HTML 将标记压缩为单行。

HTML 格式化之前与之后的比较

格式化模式	HTML 输出示例	最佳用例
缩小的 HTML	`你好世界`	生产部署、减少 HTTP 有效负载大小和电子邮件 HTML 模板。
标准美化（4位）	`你好世界`	日常Web开发、调试DOM嵌套、代码审查。
包裹属性模式	`class="card" id="英雄">`	具有许多 Tailwind CSS 实用程序类、`data-*` 属性或 ARIA 道具的组件。

HTML5 空元素和内联与块标签格式

HTML5 空元素永远不会增加嵌套深度： 在 HTML5 中，空元素 (、、、、 <嵌入>、、、<输入>、<链接>、、、、和）不需要结束标签或尾部斜杠。我们的格式化程序会自动跟踪这些元素，以便同级元素保持对齐。
Inline 与块元素： 破坏像 这样的内联元素立即阅读我们的文档。将 放在五个单独的行上会使散文难以阅读，并且可能会在浏览器中的单词之间引入不需要的空格。启用 Keep Short Inline Tags on One Line 可以保留自然的句子流。
保留原始块：、和</code>标签内的空白由浏览器按字面意思呈现。选中 <em>Unformatted</em> 选项可确保您的代码片段、ASCII 图表和嵌入的 <code><script></code> 或 <code><style></code> 块永远不会更改。

常见问题 (FAQ)

HTML美化和HTML缩小有什么区别？

HTML 美化（漂亮打印）添加了结构化换行符和分层缩进，以便开发人员可以轻松阅读、调试和维护标记。 HTML minifying 去除不必要的空格、换行符和注释，以减小文件大小，从而加快生产页面加载速度。

为什么

、、

在

、

 和 </code> 元素内，空格和换行符按字面意思由浏览器呈现，因此更改缩进会破坏显示的输出。同样，使用 HTML 解析器分割 <code><script></code> 或 <code><style></code> 标记内的行可能会破坏 JavaScript string 文字或 CSS 选择器。启用 <strong>Keep <pre>、<script>、<style> Unformatted</strong> 会逐字保留这些块。

HTML Beautifier 如何处理 HTML5 void（自关闭）元素？

HTML5定义了14个void元素（area、base、br、col、embed、hr、 img、input、link、meta、param、source、 track 和 wbr）从未有结束标签。此格式化程序自动识别所有 14 个 void 元素 - 加上声明和 XML/SGML 指令 - 因此它们永远不会将后续同级标记推入更深的缩进级别。

HTML 缩进应该使用 2 个空格、4 个空格还是制表符？

2空格和4空格都被广泛使用。 Google 的 HTML/CSS 样式指南和现代前端工具链（Prettier、Vue、React）默认为 2 空格，因为 HTML 文档通常具有深层 DOM 嵌套。 WordPress 和许多后端模板引擎更喜欢 tabs 或 4 空格。您可以使用快速 Presets 栏在它们之间立即切换。

我的 HTML 代码是否上传到任何服务器？

不会。所有 HTML 解析、格式化和缩小都 100% 使用 JavaScript 在浏览器本地进行。您的源代码和模板永远不会离开您的设备。