HTML 压缩与格式化工具

粘贴 HTML 代码，选择压缩（去除注释、多余属性和空白）或格式化（转成带缩进、易读的代码）。两种模式都基于真正的 HTML 解析器而非正则表达式，所以 <pre>、<textarea> 内的内容不会被误伤。

工具介绍

HTML 压缩会去掉浏览器渲染页面时并不需要的部分：注释、标签之间多余的空白、像 type="text/javascript" 这样的冗余属性，以及可省略的闭合斜杠。压缩后的 HTML 功能完全一致，但下载和解析更快。

本工具基于 html-minifier-terser（常见构建工具内置的同款压缩引擎），能真正理解 HTML 结构而不是盲目删空白，因此不会破坏 <pre>、<textarea> 或内联 <script>/<style> 中依赖格式的内容，并且还能顺带压缩嵌入其中的 CSS 和 JS。

为什么使用它？

基于真正的解析器而非正则，能安全处理 <pre> 块、内联脚本等边界情况。
同时压缩嵌入的 <style> 和 <script> 内容，而不只是外层标签。
直接显示压缩前后节省的字节数。
格式化模式可以把压缩成一行的 HTML 还原成便于阅读和编辑的样子。
全程本地处理——你的代码及其中的隐私内容不会离开浏览器。

使用方法

把 HTML 粘贴到输入框，或点击「加载示例」体验。
点击「压缩」进行压缩，或点击「格式化」以 2 空格缩进美化代码。
查看输入框下方的提示：压缩模式会显示体积缩减比例；如果 HTML 无法解析，会直接显示具体错误而不是生成损坏的结果。
点击「复制」获取结果。

示例

输入

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <!-- greeting -->
    <p class="greeting">
      Hello, world!
    </p>
  </body>
</html>

输出

<!doctype html><html><head><title>Example</title></head><body><p class="greeting">Hello, world!</p></body></html>

注释、缩进和换行都被删除，doctype 也被简化，但页面渲染效果完全一致。

实用建议

只在部署前压缩，开发阶段保留可读的源码，压缩仅作用于构建产物。
如果页面压缩后行为异常，检查是否有 JavaScript 依赖文本节点中的确切空白（较少见，但个别老组件会这样）。
把线上页面的压缩 HTML 格式化还原，是写爬虫或排查布局问题前快速了解结构的好方法。
如果构建流程把样式和脚本单独拆分成文件，可以配合下方的 CSS、JS 压缩工具一起使用。

在实际工作流中的位置

手写的静态网站、邮件模板和落地页往往带着开发时留下的缩进和注释一起上线。部署前压缩能实实在在地减少传输体积——对邮件 HTML 来说，字符数还可能影响 Gmail 的折叠阈值，所以更小的代码除了速度之外还有实际作用。

格式化方向同样常用：把从「查看网页源代码」拿到的压缩页面还原格式，往往是理解竞品落地页结构、或排查第三方嵌入代码问题最快的方式。

→ CSS 压缩工具 · JS 压缩工具

常见使用场景

上线前给静态落地页或邮件模板瘦身。
还原从查看源代码拿到的压缩 HTML 片段，了解其结构。
清理从可视化编辑器或 CMS 导出的、带有大量多余空白的 HTML。
快速检查手写 HTML 片段是否格式正确，解析失败会直接显示明确的错误信息。

常见问题

我的 HTML 会被上传吗？

不会。压缩和格式化都在浏览器本地通过 JavaScript 完成，粘贴的内容不会发送到任何服务器，适合处理内部模板或尚未发布的页面。

压缩会不会把页面弄坏？

一般不会——工具使用真正的 HTML 解析器（html-minifier-terser），能理解标签结构，会保留 <pre>、<textarea> 这类对空白敏感的元素，也不会错误地合并属性。压缩上线后，建议对关键页面（尤其是依赖特殊内联脚本的页面）做一次快速检查。

会不会顺便压缩 HTML 里的 CSS 和 JS？

会。内联的 <style> 和 <script> 内容会用与独立 CSS/JS 压缩工具相同的引擎就地压缩，不需要手动拆分出来。

HTML 通常能压缩多少？

取决于原始代码有多少空白和注释——手写的、缩进和注释较多的 HTML 通常能缩小 20%-40%；框架生成、本来就比较紧凑的 HTML 节省幅度会小一些。

能把压缩后的 HTML 还原成可读格式吗？

可以——粘贴压缩后的 HTML，点击「格式化」而不是「压缩」，即可得到带缩进、易读的代码。