01
留住原始输入
示例和清空会先显示替换预览及字符数；应用后可撤销一次，输入和结果一起恢复。
- 试例子可以同时观察行内空格和预格式化内容。
HTML 工具
HTML 格式化看清标签层级
默认停止输入 350 毫秒后自动美化；压缩须主动执行。点击结构提示可回到源码行。
HTML 格式化
HTML 源码
结果
HTML 只在当前浏览器标签页处理；静态预览禁止脚本与外部资源。
粘贴 HTML 或载入示例。
从 CMS 导出的页面片段挤成一行时，很难看出哪个标签包住了内容。这个 HTML 格式化工具只整理结构标签间的布局，让行内文字和预格式化内容保持原样。
右侧既有可读结果，也有按源码行定位的标签结构与常见解析提示。发现可疑位置后，仍应在真实页面和专用规范校验器中复核。
为什么用 HTML 格式化
压缩源码也能追到具体标签
HTML 格式化把层级展开为缩进行，结构列表指出标签来自哪一行；`pre`、`textarea`、`script` 和 `style` 内的内容不被重排。
预览必须由你主动开启
HTML 格式化的静态预览放在隔离框架里，禁用脚本、表单和外部资源；输入改变时旧预览立即卸载。
导出前先看这三处
02
选好输出方式
默认自动美化会在停止输入 350 毫秒后运行；关掉后可按 Ctrl/Cmd+Enter。压缩始终要主动点按。
- 调整缩进会立刻让旧结果过期，复制和下载随之禁用。
03
核对诊断与字节数
点击结构节点或诊断会跳回源码行列；字节变化只说明体积，不代表页面显示不变。
- 无提示表示本工具覆盖范围内未发现问题，不等于通过规范验证。
从排版到定位的能力
保守美化
只在结构标签间加缩进和换行，不拆开行内文字，不重排属性。
主动压缩
从原始输入生成紧凑结果，保留普通注释与内嵌代码，并显示 UTF-8 字节差。
标签结构导航
查看 HTML5 解析后的层级、源码行号和浏览器补全节点，点击可定位。
隔离静态预览
只预览当前结果；脚本、表单、嵌入内容和外部加载都被禁用。
能检查什么，不能保证什么
- 结构提示不是规范证书
- 这类 HTML 语法检查只报告解析器能定位的问题及疑似缺失闭合标签，不检查全部内容模型、无障碍要求或 W3C 规范符合性。
- 空白可能影响页面
- 行内空格和受保护块保持原样，但 CSS 的 white-space 规则仍可能使结构间空白有意义；上线前应在真实布局中比对。
- 不会自动修补模板
- Vue、JSX、Liquid 等模板语法不按专用规则解析；浏览器补出的节点只出现在结构视图，不写回源码。
- 不抓取也不批量改写
- 不读取 URL，不批量上传，不删除注释、不排序属性，也不压缩 HTML 内的 CSS 或 JavaScript。
关于 HTML 格式化的常见问题
格式化 HTML 会改变页面的工作方式吗？
通常只改变结构标签之间的排版，但样式也可能让空白影响显示。请在原页面复核输出，尤其留意 white-space 规则。
HTML 格式化和压缩有什么区别？
美化增加便于查看层级的缩进；压缩删掉结构间多余空白。两者都从原始输入生成独立结果，不覆盖源码。
未闭合标签会自动修复吗？
不会。常见缺失闭合标签会以源码行列提示；结构视图可能包含浏览器补全的节点，但输出不会替你写回这些节点。
格式化后为什么内联内容会变化？
本工具刻意保留行内文字和标签之间的空格；如真实页面仍有差异，还要检查 CSS 空白规则和模板生成结果。
在线处理 HTML 会上传源码吗？
不会。解析和美化在当前浏览器标签页完成；预览需主动开启，并禁止向外加载资源。
发现了意外结果？