使用方法
- 页面打开时输入框里已经放好一个 32 行的示例页面，原始体积 795 字节；结果区给出的就是它压缩后的样子，696 字节，省下 99 字节、节省率 12.5%。先看一眼这段，就知道输出长什么样。
- 换成自己的页面时整段粘贴覆盖即可，不需要先手工整理。这个 HTML压缩工具按「区块」切分文本：pre、script、style、textarea 四种标签整体保护，其余部分才做注释与空白处理。
- 两个开关控制行为：「删除普通注释」勾着时，
<!-- -->会被移除，而<!--[if …]>开头的条件注释原样保留；取消勾选则连普通注释也留下。「折叠标签间空白」控制换行与缩进的去留，改完即时重算。 - 键盘党在输入框里按 Ctrl + Enter（macOS 用 Cmd + Enter）触发，Enter 留给换行。「复制结果」拿压缩后的文本，「下载 .html」存成文件直接可部署。
- 下面的「处理规则明细」表列出每类片段的去向。想核对「哪一处空白被删了」，看这张表比肉眼比对快。
这个HTML压缩工具能解决什么问题
一是给模板和静态页瘦身。示例页 795 字节压到 696 字节，省 99 字节（12.5%）；真实的整页模板换行缩进更多，收益比例还会更高。这些字节在每次请求里都要重发一遍，对流量和首字节都有意义。
二是压缩后再叠加 gzip。示例文本单独 gzip 是 570 字节，先经本页压缩再 gzip 是 531 字节——HTML 的缩进空白本来就是 gzip 最擅长压的内容，所以两条路有重叠，但叠加后仍然省出 39 字节，等于每层各干各的活。
三是内联到别处的 HTML 片段。邮件模板、JS 里拼的 innerHTML 字符串、单文件 HTML demo，这些场景没有构建器代劳，粘贴进来压一遍是唯一现实的手工手段。
四是把「哪里不能压」实验清楚。把含 pre 或 script 的页面反复开关两个选项各压一次，立刻看清保护区块的边界在哪，比背规则直观。明细表会同步反映每次的命中情况。
本页不做这些事：不改写标签结构（不删可选闭合标签、不合并属性）、不省略属性引号、不压缩内联的 CSS/JS 内容、不做语法校验。要把压缩后的页面还原成可读排版，用页面底部的「HTML格式化」；要查语法错误，用「HTML校验」。
压缩原理：注释、空白与保护区块
核心流程是一刀切分、两路处理：先用一个带捕获组的正则把原文切成「自由段」与「保护区块」交替的序列——匹配 <pre>、<textarea>、<script>、<style> 四种开标签到对应闭标签的整段（大小写不敏感，跨行匹配）。捕获组让 String.split 把区块本身也留在数组里，下标为奇数的是区块，原样拼回；下标为偶数的自由段才做下面两步。
注释删除带一条例外。自由段里匹配 <!--(?!\\[if)[\\s\\S]*?--> 整段移除，负向先行断言 (?!\\[if) 排除 <!--[if 开头的条件注释——IE 的降级脚本（如 html5shiv）完全依赖它，删掉等于把老浏览器打回没有 HTML5 标签的时代。这也是「属性引号省略」同款的风险逻辑：省字节的空间存在，但破坏面不可控。示例页里有 1 条普通注释被删，而条件注释连内部脚本一起完整保留。
空白折叠分两步走。第一步把自由段里的连续空白（空格、换行、制表符）折成一个空格——HTML 渲染时连续空白本来就是一个空格，所以这一步视觉零影响；第二步把 > 与 < 之间的空白直接删掉——标签之间的空格不参与文本渲染，只对行内元素（a、span、em 等）的相邻间距有影响，示例页 nav 里两个链接之间的空格就是这样消失的。首尾残余空白最后裁掉。
保护区块是安全边界。pre 的空白就是内容本身；script 里的换行可能分隔着 // 注释、正则字面量或 ASI 依赖（省略分号的自动插值），删了就是改代码；style 里 calc(100% - 8px) 这类值对空格敏感。示例页共 4 个保护区块，全部逐字保留。
体积口径用 UTF-8 字节而不是字符数：encodeURIComponent 配合计数把多字节字符按 3 字节（CJK 常用区）计。压缩比 = 原始字节 ÷ 压缩后字节，节省率 =（原始 − 压缩后）÷ 原始，两个口径并列展示，避免「压缩率 40%」这种说不清基准的表述。
完整示例（数值仅作演示）
示例条件与页面打开时的默认状态完全一致：两个开关都勾选，输入是那个 32 行、795 字节的示例页。实测输出：
- 压缩后 696 字节（536 个字符），省下 99 字节，节省率 12.5%，压缩比 1.14；
- 删掉普通注释 1 条，保护区块 4 个（pre、script×2、style）逐字保留；
- nav 里两个链接之间的空格被删：
<a>首页</a>直接贴着<a>还原排版</a>，行内间距需要 margin 补——这是折叠空白唯一会改变渲染的地方，正文与对照表两处都点名了它； - blockquote 与 p 里的换行折叠成单空格，渲染结果与原来完全一致；
- 单独 gzip 得 570 字节，先压缩再 gzip 得 531 字节，叠加省 39 字节。
条件注释 <!--[if lt IE 9]><script src="html5shiv.js"></script><![endif]--> 在输出里一字不差——先按保护区块切走内部的 script，剩下的 <!--[if 与 <![endif]--> 分别落在两段自由文本里，都不匹配注释删除规则，于是完整存活。
输入范围与处理规则对照表
输入上限 20 万字符（maxlength 计），超出按具体数值报错。下面这张表列出各类片段在压缩时的去向，遇到「为什么这处没被压掉」，先在这里对一眼：
- 自由段：注释（保留条件注释）→ 删；连续空白 → 1 个空格；标签间空白 → 删；首尾空白 → 裁掉；
- 保护区块：pre / textarea / script / style 四种标签的完整段落逐字拼回，内部规则一概不生效；
- 永远不会动的：
<!DOCTYPE html>、字符实体（ 、&）、属性引号与属性名。
三个与输入有关的具体限制：输入没有任何 < 时判定「不是 HTML」并报错；压缩结果为空（只有注释或空白）时明确报错而不是给你空文件；检测到 <!-- 找不到配对的 --> 时保留原文并在提示区警告，绝不把半截注释后面的正文吞掉。这份 HTML压缩工具的原则是宁可少压、不能错删。
结果边界与字节口径
- 行内元素的相邻空格是唯一的渲染风险。「折叠标签间空白」删除
>与<之间的全部空白，块级元素之间无影响；<a>首页</a> <a>下一页</a>这类并排行内元素的间距会消失。保守做法是关掉「折叠」开关只删注释，或压完给行内元素补 margin。 - 未闭合的保护区块按普通文本处理。写了
<pre>没有</pre>时，切分正则匹配不到完整区块，其中的空白会被折叠。工具会对比四类标签的开/闭数量，数量不等就在提示区警告，压缩结果只能当参考。 - 未闭合的注释不会吞正文。注释删除要求
-->收尾，找不到就不动这段文本，同时警告「存在未闭合注释」。这与很多「贪婪删到文末」的脚本不同——宁可少压，不能错删。 - 注释内部出现
--的边界。HTML 注释规范不允许--出现在注释体里，本页按第一个-->截断：写成<!-- a -- b -->会剩下b -->，提示区查得到异常，先修好注释再压。 - 字节数不等于字符数。示例压缩后 696 字节只有 536 个字符——中文每字 3 字节，所以带中文正文的页面按字节算的节省率通常低于按字符算的，对比 CDN 帐单时认准字节口径。
- 与 gzip 的收益有重叠。570 → 531 的叠加数字说明两层都有效，但空白正是 gzip 的强项，两个百分比不能相乘当成总节省。
- 不做属性引号省略的原因。HTML 允许值不含空格时省引号，但「值里有没有空格」要逐属性判断，判断错一个就是属性值碎裂。本页只做确定无损的动作，激进优化请交给构建期的 html-minifier 类工具并配合测试。
常见问题
为什么 script 和 style 里的内容一个字都不动？
script 里的换行可能承担语法职责：// 行注释靠换行结束，正则字面量与字符串里的空白有语义，省略分号的写法依赖自动分号插值。style 里 calc(100% - 8px) 的减号两侧空格是语法要求。对这些内容做折叠等于改代码，所以 HTML压缩工具把它们整段划为保护区块，原样拼回。
条件注释为什么能被识别并保留？
判断只看开头：注释删除的正则在 <!-- 后面跟了一个负向断言 (?!\[if)，凡是以 [if 开头的注释一律跳过。条件注释内部的 <script> 又恰好被保护区块规则先行切走，所以从 <!--[if …> 到 <![endif]--> 整段完整存活。需要连条件注释也删掉时，取消勾选「删除普通注释」即可。
压缩后两个链接粘在一起了，怎么办？
那是「折叠标签间空白」删掉了行内元素之间的空格，块级标签之间没有这个问题。三个解法：给相邻行内元素加 margin 或 gap；关掉「折叠」开关只删注释；或者接受粘排、用 CSS 控制间距——生产环境的 HTML 本来就建议间距全部交给样式层。
压缩率是怎么算的？为什么和别的工具数字不一样？
本页给两个口径：节省率 =（原始字节 − 压缩后字节）÷ 原始字节，压缩比 = 原始字节 ÷ 压缩后字节。示例页分别是 12.5% 和 1.14。其他工具有的按字符数算、有的按去掉的字符数算，口径不同数字自然不同；对比时先确认是不是 UTF-8 字节口径。
会不会把我的 JS 或 CSS 压坏？
不会碰到内容本身，但有一个前提：</script> 与 </style> 必须完整。切分正则匹配到闭标签为止，闭标签缺失时该区块按普通文本折叠空白。工具会核对四类标签的开闭数量，不等就警告。另外 script 内部含 </script> 字符串的场景（拼接脚本标签的代码）属于已知的 HTML 解析级难题，本页与其他压缩器一样无法完美处理，建议先改写为 <\/script>。
能反向操作把压缩过的 HTML 还原吗？
可以，但不是在本页。压缩是有损排版、无损内容的操作：删掉的注释找不回来，折叠的空白也无法知道原来缩进几格。还原排版请用「HTML格式化」，它按标签结构重新缩进，输出干净的可读版本。两个工具一个管上线体积、一个管人读，来回配合用。
为什么中文页面的节省率看起来偏低？
字节口径下中文每字 3 字节，而注释和缩进大多是单字节的 ASCII——同样的「删掉一段」，分母里中文权重越高，节省率越低。示例页 795 字节压到 696 字节；换成纯英文模板，同比例的空白能算出更高的百分比。这不代表中文页省得少：绝对字节数一样，只是基准不同。
压缩会影响 SEO 或搜索引擎抓取吗？
不会。抓取器解析的是 DOM，标签之间的空白与缩进不参与语义；正文文字一个都没变。真正要留意的是别误删 <pre> 里的空白和条件注释——前者是页面内容的一部分，后者影响老浏览器的标签兼容，本页的保护规则就是为了这两条。
相关工具
- HTML格式化：本页的逆操作，把压缩后的 HTML 按标签结构重新缩进成可读版本。
- HTML校验：压缩前先查未闭合的标签与非法嵌套，避免带着错误上线。
- CSS压缩工具：内联样式单独瘦身用这个，对 calc() 与字符串空白的保护规则比本页更细。
- JavaScript压缩：脚本文件的上游瘦身，注释与空白规则和 HTML 不同。
- JSON压缩工具：接口数据压成单行，同样属于「只删格式层」的安全压缩。
- HTML转纯文本转换器：只要正文不要标签时用它，方向与压缩相反。
- 开发者工具：查看全部开发者工具。