使用方法

将 HTML 粘贴到输入框中，打开一个 .html 文件，或尝试示例。
选择“美化”可获得缩进且易读的标记代码，选择“压缩”可获得紧凑输出。
美化时，可选择 2 个空格、4 个空格或制表符，并决定是否保留注释。
复制结果，或将其下载为 .html 文件。

工作原理

该格式化工具使用宽松的标记解析器读取 HTML（类似于浏览器的方式），然后重新输出。它不会渲染输入内容，因此粘贴代码中的脚本不会运行，也不会从网络加载任何内容。

美化会将每个块级元素（div、p、ul、li、section、table 等）单独放在一行，并根据嵌套深度缩进。文本以及 a、b、em、span、code、img 和 br 等内联元素保持在同一行，因此单词和链接之间的空格不会被以影响页面显示效果的方式更改。文本中连续的空格和换行会变成一个空格，这正是浏览器显示它们的方式。

pre、textarea、script 和 style 元素的内容会按原样复制，包括其中的空白以及任何 < 或 > 字符。br、img、input、meta 和 link 等空元素永远不会添加结束标签。内联 SVG 中的 <path /> 等自闭合标签会保持自闭合。

压缩会将文本中的空白折叠为单个空格，删除块级元素旁边的空白，规范化属性之间的空格，并且如果“保留注释”处于关闭状态，则删除注释。条件注释始终保留。

此工具不会修复无效的 HTML、补充缺失的标签、重新排列属性或压缩 style 和 script 元素内的 CSS 与 JavaScript。未闭合的元素会在其父元素末尾被关闭；没有匹配起始标签的结束标签会按原样保留。

示例

阅读生成的标记

某个 CMS 将模板输出为一行长文本。使用 2 个空格进行美化后，导航、列表项和主要内容会以缩进树的形式显示，而“Prices include <strong>VAT</strong>.”会保持在一行内清晰可读。

准备邮件模板

关闭注释后压缩 HTML 邮件，以减小其大小。带有价格表的 <pre> 块和内联 <style> 都会保持原样。

检查结构

当缺少 </div> 结束标签时，美化后的输出会将后续元素多缩进一级，这样很容易看出该元素应该在哪里结束。

常见问题

美化操作会改变我的页面外观吗？

在几乎所有情况下都不会。块级元素内的空白会被折叠并转为换行，浏览器会忽略这些换行。文本和内联元素保持在同一行，pre、textarea、script 和 style 的内容不会被改动。例外情况是页面依赖普通元素上的 CSS white-space: pre 样式。

它会压缩页面内的 CSS 和 JavaScript 吗？

不会。script 和 style 内容会完全保持原样，因此不会导致损坏。如需压缩样式表，请单独使用 CSS 格式化工具。

粘贴来自未知来源的 HTML 是否安全？

安全。输入内容仅作为文本处理，绝不会插入到页面中，因此其中的脚本不会运行，图片或链接也不会被加载。

它会验证我的 HTML 吗？

不会。它有意采用宽松方式，会格式化损坏的标记代码而不是拒绝处理。不匹配的闭合标签会保留，因此缩进有助于你发现它们，但不会生成错误列表。

隐私

您的 HTML 仅在浏览器中处理，绝不会被渲染或上传。不会存储任何内容，也不会将其用于分析。