← 返回工具箱

HTML 格式化

HTML FORMAT · 代码格式化

HTML 美化与压缩:块级换行缩进、行内元素不拆行;script/pre 等内容逐字保留,压缩后渲染不变。

script / style / textarea / pre 原样保留
HTML 输入
结果

>_ 使用指南 · GUIDE

美化与压缩双向:美化按「块级元素换行缩进、行内元素不拆行」排版——<div> 各自成行,<a><span> 这类行内组合保持连贯(拆行会引入多余空白,改变渲染效果);压缩则删空白减体积,script、pre、textarea 内容逐字保留,压缩后渲染结果不变。

典型场景:看线上页面抓下来的压缩 HTML、模板文件太乱先排版再改、发布前压缩模板减体积。本地处理,代码零上传。

>_ 常见问题 · FAQ

Q1 · HTML 压缩为什么不能无脑删所有空白?

因为空白在 HTML 里有语义:行内元素之间的换行会渲染成一个空格——<a>A</a>\n<a>B</a> 与 <a>A</a><a>B</a> 显示效果不同。无脑删空白可能导致「压缩后单词粘连」。本工具的规则是块级随意折行、行内连接处保留必要空白,保证压缩前后渲染一致。

Q2 · script 和 pre 里的内容会被格式化吗?

不会。<pre> 的空白就是显示内容(删了排版就毁了);<script> 里是 JS 代码,HTML 层的格式化动不了它也不该动。本工具对这两类内容逐字保留,格式化与压缩都绕开。

Q3 · 为什么格式化后某些标签的位置看起来怪怪的?

HTML 容忍大量「不规范但能渲染」的写法:标签未闭合、表格自动补 tbody、p 标签嵌套限制等。解析器会按标准重建结构,格式化结果反映的是解析后的真实结构——你写的和浏览器理解的差异就在这里现形。怪异之处往往正是原代码的隐患。

Q4 · 压缩 HTML 能减多少体积?

看原始整洁度:规整缩进的模板可减 20–40%;本就单行的收益小。注意 HTML 的体积大头常在重复结构与内联脚本,压缩只删空白。配合 Gzip 传输才是完整方案——Gzip 对重复文本的压缩率远高于删空白。

Q5 · 模板语法(Vue/JSX/Thymeleaf)能处理吗?

不建议。模板里 {{ }}、{%' %}、v-if 等是宿主语法,通用 HTML 解析器可能误判结构(尤其模板控制流与标签配对交叉时)。本工具面向纯 HTML/静态页面;框架模板用对应的格式化插件(Prettier + 插件)更安全。

嵌入代码

把下面的代码复制到你的网页,即可将本工具嵌入为 iframe(自动隐藏导航与页脚)。

高度px
此工具在你的浏览器本地运行,输入内容不会上传。按 Ctrl K 可随时切换到其他工具。