HTML 压缩HTML Minifier
把 HTML 一键压缩瘦身、还原美化、校验标签，上线前减小体积、调试模板结构更快。script / style / pre 原样保留，文件全程不上传。
工具介绍
3 段详细说明HTML 压缩是面向前端开发者的 HTML 瘦身工具，集压缩、美化、语法校验三大功能于一体。把上线前的页面、邮件模板、CMS 富文本粘贴进来，一键折叠空白、移除注释，直接减小文件体积。
所有处理都在浏览器内存中完成，文件不上传任何服务器。基于单遍扫描的自研词法分析器，script / style / pre / textarea 内容原样保留，零依赖、零打包，1 MB 以内处理几乎瞬时（< 100ms）。
相比 html-minifier 等构建工具，本工具无需安装、打开网页即用，适合临时处理、快速验证和小项目上线。支持 ⌘+↵ 快捷键压缩、一键美化还原阅读、复制一键带走。
基础知识 · HTML 压缩规则
HTML5 · 6 条规则HTML 压缩的本质是只删「不渲染」的内容。按 HTML5 规范，以下 6 条规则决定了哪些空白能删、哪些必须保留：
whitespace空白折叠div、p、ul 等）之间的纯空白直接删除——它们在浏览器里本来就不产生可见间距。inline space行内空格语义<span>A</span> <span>B</span> 压缩后仍保留 1 个空格，避免「AB 粘在一起」。本工具会自动判断空白两侧是否为行内元素，该留的一个不少。comment注释移除与保留<!-- 注释 --> 默认删除（工具栏可关）；<!--[if IE]> 条件注释自动保留——老版本 IE 依赖它加载兼容脚本，删了页面可能在旧浏览器白屏。raw elementsRAW 元素原样保留script、style、pre、textarea 四类元素内部不做任何处理，JS / CSS 代码、代码示例、用户输入的原始排版完整保留。void tags空元素不配对img、br、meta、input 等 14 个空元素（void elements） 按规范没有闭合标签，压缩器不把它们压入配对栈；</br> 这类多余闭合与浏览器行为一致，直接忽略。attribute标签内空白精简<div class="a" > → <div class="a">。属性之间多余空白折叠为一个、标签尾部空括号精简；属性值里的空格与引号内的 >（如 data-x="b > c"）不会被误判。script / style / pre / textarea 内容原样保留 —— JS / CSS 代码和用户输入不会被破坏。<!--[if IE]> 条件注释自动保留，老版本 IE 的兼容逻辑不受影响。a、span、b 等）之间的单个空格保留，避免相邻文字粘在一起。<br>、<img> 等 14 个空元素不参与标签配对校验，不会误报「未闭合」。gzip / brotli 传输压缩，HTML 体积还能再降 70% 以上——压缩 + 传输双重瘦身。使用说明
4 步快速入门使用场景
5 个真实案例部署前把 HTML 模板压缩到最小体积，减少首屏传输量，Lighthouse 评分肉眼可见提升。
EDM 邮件是表格布局 + 行内样式，代码极长；压缩后再粘贴到邮件平台，轻松通过体积限制。
工具栏实时显示本次压缩的省体积百分比，压缩前后对比一目了然，优化效果可量化。
拿到压缩成单行的 HTML？点「美化」按块级语义重排缩进，页面结构一目了然。
富文本编辑器输出的 HTML 常带冗余空白和注释，压缩后再入库或渲染，页面更干净。
常见问题
10 个问答HTML 压缩是什么？有什么用？
折叠空白、移除注释，把 HTML 文件变小且不改变渲染结果。也支持反向美化（重排缩进）和标签配对校验。
我的 HTML 会上传到服务器吗？
不会。所有解析在浏览器内存中完成，输入内容不上传任何服务器。可断网使用、关闭网络后再打开仍能正常使用。
压缩后页面排版会变吗？
绝大多数不会。行内元素（如 span、b）之间的空格有排版语义，工具会自动保留单个空格；块级元素之间的空白删除后不影响渲染。上线前建议在测试环境过一遍页面交互。
script / style 里的代码会被压缩吗？
不会。script、style、pre、textarea 四类元素内容原样保留，避免破坏 JS / CSS 代码和用户输入的原始排版。JS/CSS 请使用专门工具（如 Terser / cssnano）处理后再内联。
注释会被删除吗？IE 条件注释呢？
普通 <!-- 注释 --> 默认删除（可在工具栏关闭「去注释」）；<!--[if IE]> 条件注释自动保留，老版本 IE 的兼容逻辑不受影响。
支持多大的 HTML 文件？
建议 ≤ 5 MB。单遍扫描零依赖，1 MB 以内几乎瞬时（<100ms）。超大文件建议先拆分再处理，避免浏览器渲染卡顿。
错误位置如何定位？
标签配对出错时（未闭合 / 交叉嵌套 / 多余闭合），输出区会给出「第 X 行 第 Y 列 + 出错原因 + 💡修复建议」，输入区自动选中出错字符、红框标出并滚动到位。
压缩能省多少体积？
取决于源码书写风格。手写缩进规范的页面通常省 15%~35%；工具栏会实时显示本次压缩的省体积百分比，省多少一目了然。
与 html-minifier 等构建工具有什么区别？
构建工具功能更多（折叠布尔属性、合并样式等）但需要安装配置 Node 环境；本工具零安装、打开网页即可用，适合临时处理、快速验证和小项目上线。
移动端 / 离线能用吗？
都能。移动端输入/输出自动垂直堆叠；PWA 首次访问后浏览器缓存所有资源，断网后仍可使用。