HTML 格式化
在线美化与压缩 HTML，内联 CSS/JS 一并格式化。
输入
0 字符1 行0 B
格式化结果
在左侧输入内容，结果会实时显示在这里
0 字符1 行0 B
使用说明
这个工具解决什么问题
从浏览器「查看源代码」或构建产物里复制出来的 HTML 是一整行;手写的模板又常常缩进参差、注释遍地。这个工具把 HTML 展开成层级清晰的缩进结构,标签闭合问题在格式化时顺带暴露;需要瘦身时,安全压缩移除空白与注释,内联的 CSS/JS 一并处理,邮件模板与落地页的体积优化一气呵成。
核心能力
美化:按标签层级展开缩进,自闭合与内联标签智能处理。安全压缩:保留空白敏感元素,移除可安全删除的空白与注释。闭合检查:发现未闭合或错位闭合的标签时给出位置提示。内联格式化:style 与 script 块分别按 CSS/JS 规则展开。
使用建议
排查「这页面为什么长这样」时,先美化看清 DOM 层级;上线邮件模板前压缩一遍,主流邮箱客户端对体积都有限制;从旧项目接手的 HTML,先格式化再改,历史遗留的未闭合标签会自己浮出水面。
常见问题
压缩是「安全」的吗,会不会把页面压坏?
压缩只移除标签之间不影响渲染的空白与注释,保留标签内部的文本内容;pre、textarea 等对空白敏感的元素会原样保留。压缩前会做标签闭合检查,发现明显结构问题会提示而不是硬压。
内联在 HTML 里的 style 和 script 也会被格式化吗?
会。工具会识别 style 与 script 标签块,把里面的 CSS 与 JavaScript 分别按对应语言的规则格式化,而不是当作普通文本缩进了事。
为什么美化后我的页面布局变了?
极少数情况下,行内元素之间的空白本身参与排版(如 inline-block 之间的空格)。美化会在标签间插入换行与缩进,这类页面可能出现细小空隙。遇到对空白敏感的布局,用压缩模式还原即可。