HTML 格式化工具 - 在线 HTML 美化压缩

1. 美化或压缩

美化可能重排空白文本节点——若依赖行内元素之间的可见空格，格式化后要在浏览器里目测排版。压缩模式会显示字符节省情况，便于对比体积变化。

1. 粘贴 HTML 片段或整页。
2. 选择模式：美化（恢复缩进）或压缩（去掉多余空白）。
3. 按需调整缩进（2/4/8 空格）、保留注释、保留空行，再执行并复制或下载。

2. 适用场景

• 审查第三方嵌入代码：先美化再读逻辑与跟踪脚本。
• 清理 CMS 导出 HTML：去掉混乱缩进后再 diff。
• 格式化后再用 html-to-jsx 转 React 组件骨架。
• 邮件 HTML 体积敏感：调试期美化，发出前可切压缩模式试体积。

3. 和专用压缩器的分工

• 本页压缩是便捷开关；生产流水线里更细的注释策略可用 html-minifier 专项页。
• 调试阶段用美化增可读性；上线构建再 minify。
• 不要对仍含 Jinja、EJS、Blade 等服务端模板标签的源文件盲目格式化——应格式化渲染结果。

4. 空白与注释的边界

「保留空行」适合还要人工继续编辑的草稿；彻底压缩时关掉它。注释里若藏有构建标记或许可证头，美化或压缩前先确认「保留注释」勾选状态，避免误删。script、style、pre、textarea 内部空白语义敏感——工具会尽量避免破坏这些区域，但仍建议对关键页面做一次视觉回归。

5. 常见翻车点

• 整理 SVG 时属性换行被折叠一般没事，但依赖精确空白的文本节点要小心。
• 从浏览器「查看源代码」复制时可能带上已纠正的 DOM，与原始文件不完全一致。
• 混合 Markdown 与 HTML 的文档，只格式化其中 HTML 片段，避免动 Markdown 语法行。

6. 推荐工作流

拿到一团压缩 HTML → 本页美化 → 读懂结构 → 需要上线体积时再压缩或交给 html-minifier。链式还可：美化后转 JSX，或抽取表格数据。全程本地，粘贴的标记不会上传。

7. 小结与边界提醒

把「可读性」和「传输体积」拆成两个阶段：人读用美化，机器传用压缩。同一页能切换两种模式，是为了少在工具间来回粘贴；真正进持续集成的压缩规则仍以构建配置为准，本页适合临时排查与单次整理。

8. 实践中的额外注意

处理前后各留一份原文副本，方便对照；遇到不确定的边界输入，先缩小样本再放大。团队协作时把本页步骤写进检查清单，比口头约定更不容易漂移。

• 先用小样本验证输出是否符合预期，再处理完整输入。
• 结果用于生产前，在目标环境再抽查一次边界数据。
• 本页处理均在浏览器本地完成，不会把内容上传到服务器。
• 若文档宣称与页面选项不一致，以页面实际控件为准并反馈修正。