如何格式化和缩进 HTML 代码以获得更好的可读性

把 HTML 字符串输入工具，使用默认的美化模式和 2 个空格缩进即可获得更易读的层级格式；需要紧凑文本时再选择 minify。空白输入会返回空结果，非字符串或超出大小限制的输入不会被格式化。

先了解工具适合做什么

HTML 代码嵌套较深、空格和换行不统一时，阅读和检查结构会变得困难。这个工具可以把 HTML 文本整理成带缩进的格式，也可以切换到紧凑模式，适合在阅读代码或准备压缩展示内容时使用。它处理的是文本格式，不应被当作 HTML 验证器、清理器或安全过滤器。

操作步骤：格式化或压缩 HTML

1. 准备一段 HTML 文本，并将其作为输入。输入必须是字符串；如果输入为空或只包含空白字符，工具会成功返回空的格式化文本。
2. 选择模式。默认模式是 beautify，适合阅读代码；对于包含非空白字符的输入，空模式也会回退到 beautify。填写其他不等于 minify 的模式值时，工具会采用美化格式路径。若要使用紧凑模式，请选择 minify。
3. 设置缩进宽度。默认值为 2 个空格。对于包含非空白字符的输入，缩进值会尽量转换为整数；转换失败，或数值不在 0 到 8 的范围内时，会改用 2 个空格。
4. 提交输入并查看结果。使用美化模式时，结果应呈现更清晰的层级缩进。使用 minify 时，工具会移除注释，但保留内容以 [if 开头的注释；同时合并标签之间的空白、减少连续空白，并去除首尾空白。
5. 如果输入不是字符串，工具会拒绝处理。包含非空白字符且超过 1,000,000 个 UTF-8 字节的输入也会被拒绝，因此提交前应检查输入类型和大小。

如何阅读结果与判断边界

美化结果主要用于提升层级可读性：可以观察元素的嵌套关系和换行后的结构。紧凑结果则只反映已记录的注释与空白处理，不等同于完整压缩，也不代表 HTML 已通过语法验证。若美化过程中所需的 HTML 解析能力不可用，或解析、格式化阶段出现异常，工具会返回 HTML 解析错误，而不是成功的美化结果。遇到这种情况，应先缩小输入范围并检查 HTML 结构，再重新提交；不要把格式化成功理解为语义正确或符合某项标准。

使用示例

你正在阅读一段嵌套的 HTML，希望先把元素层级整理得更清楚。

输入 <div><p>你好</p></div>，保持模式为 beautify，将缩进设为 2 个空格后提交。

提交后应得到非空的格式化文本，并能看到元素层级通过换行和缩进呈现；此处不预设具体输出字符串。

使用限制

• 紧凑模式只执行已说明的注释和空白转换，不是完整压缩。美化还可能受 HTML 解析能力和解析、格式化异常影响，此时会返回 HTML 解析错误。

常见错误

• 将缩进宽度填成无法转换为整数的值，或填入 0 到 8 以外的数值，结果会按 2 个空格处理。请改用 0 至 8 范围内的整数。

常见问题

空白 HTML 输入会发生什么？

当输入为空或只包含空白字符时，工具会成功返回空的格式化文本；只有包含非空白字符的输入才会进入后续格式化处理。

minify 模式会做哪些处理？

选择 minify 后，工具会处理注释和空白：移除不属于 [if 开头内容的注释，合并标签之间的空白，减少连续空白，并去除首尾空白。这些变化不等同于完整压缩。

缩进宽度可以设置为任意数字吗？

如果输入包含非空白字符，缩进值会尽量转换为整数；转换失败或超出 0 到 8 的范围时，会使用 2 个空格。