HTML 格式化

使用指南

HTML 格式化工具适合整理页面片段、邮件模板、CMS 内容、组件输出和调试时复制出来的标记。把 HTML 粘贴到输入区后，可以选择格式化为带缩进的结构，也可以压缩成更紧凑的版本用于临时发布或嵌入。右侧预览区会在沙盒 iframe 中渲染当前内容，方便你同时检查结构和视觉结果。格式化不会替你修复语义错误，遇到错位布局时仍要检查标签闭合、嵌套关系、样式选择器和外部资源路径。

示例

• 从浏览器开发者工具复制一段压缩 HTML，格式化后检查容器、标题、按钮和表单层级。
• 编辑邮件模板或富文本片段时，先在沙盒预览中确认基础排版，再复制回目标系统。
• 发布前压缩静态 HTML 片段，减少空白字符；排查问题时再切回格式化结果阅读。

常见问题

• 预览会执行脚本吗？不会。预览区使用 sandbox iframe，不授予脚本执行权限。
• 格式化后页面一定正确吗？不一定。格式化只调整可读性，不能保证 HTML 语义、CSS 或资源路径正确。
• 输入内容会上传吗？格式化、压缩和预览都在浏览器本地完成。

进阶建议

进阶整理时，可以先把 HTML、CSS 和动态模板变量分开看。格式化后的层级能帮助你发现重复容器、无意义嵌套和错放的闭合标签；预览结果则适合快速检查静态结构。若内容来自邮件、CMS 或第三方插件，还要注意目标环境是否会过滤 style、script、iframe 或表单标签。

排查方法

排查 HTML 渲染问题时，先确认输入是否是完整页面还是片段，再检查标签闭合、父子嵌套、重复 id、相对资源路径和 CSS 选择器。若预览和目标系统显示不同，常见原因是目标系统注入了额外样式、过滤了标签、缺少字体或图片资源，或者邮件客户端不支持某些现代 CSS。