HTML 格式化
HTML 美化与压缩:块级换行缩进、行内元素不拆行;script/pre 等内容逐字保留,压缩后渲染不变。
>_ 使用指南 · 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 + 插件)更安全。