ZeroTool Workbench

HTML 压缩美化工具

免费 HTML 压缩与美化工具。一键剥离注释、折叠空白或重新缩进,全程浏览器运行,无需上传也无需注册。

100% 浏览器端运行 数据不离开你的设备 免费 · 无需注册

使用方法

  1. 把 HTML(片段或带 doctype 的完整文档)粘贴到输入框。
  2. 点击 压缩 去注释折叠空白,或点击 美化 重新缩进。
  3. 美化时可在缩进下拉选择 2 空格、4 空格或 Tab。
  4. 压缩后状态栏会显示节省情况(例如 12.4 KB → 8.1 KB (−34.6%))。
  5. 点击输出面板的 复制 按钮即可取走结果。

示例

压缩前

<!DOCTYPE html>
<html lang="zh">
  <head>
    <!-- 页面元信息 -->
    <title>你好</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>一段 <strong>加粗</strong> 文本。</p>
  </body>
</html>

压缩后

<!doctype html><html lang="zh"><head><title>你好</title></head><body><h1>Hello World</h1><p>一段 <strong>加粗</strong> 文本。</p></body></html>

会被压缩的内容

  • 标签之间的空白(inter-tag whitespace)会折叠。
  • HTML 注释被删除——IE 条件注释(<!—[if IE]>)除外。
  • disabled="" 这类布尔属性会简化为 disabled
  • 文本节点首尾空白被裁掉,内部多个空白折叠为单个空格。

会原样保留的内容

  • <script><style><pre><textarea><code><samp><kbd> 内的内容。
  • 属性值,包括带引号的空白和内联事件处理函数。
  • <!DOCTYPE> 声明。

什么时候手动压缩 HTML

现代构建链路(Vite、Webpack、Astro、Next.js)通常会在 bundle 阶段自动压缩 HTML。这个工具适合一次性场景——从 CMS 导出的代码、想对比压缩前后体积、或检查手写模板。美化则是日常使用:把生产环境的一行式 HTML 粘进来,拿到可读副本用于调试或 diff。

FAQ

压缩会破坏 <script> 和 <style> 标签内的 JavaScript 或 CSS 吗?

不会。内联脚本与样式块原样保留。压缩只处理标签之间的结构性空白和 <script>/<style> 之外的 HTML 注释。

HTML 会被上传吗?

不会。处理全部在浏览器中通过原生 DOMParser API 完成,标记永远不会离开你的设备,没有任何服务器往返。

压缩通常能减少多少体积?

典型 HTML 文件可缩减 15%–40%,具体取决于缩进深度和注释密度。每次压缩后状态栏会显示原始体积、输出体积与节省百分比。

美化和我编辑器里的格式化有什么不同?

美化会从头重新解析并按层级缩进——适合统一来自 CMS / 模板引擎导出的不规范代码,或展开一行式压缩 HTML 进行调试与 diff。

doctype、属性值和内联事件处理函数会保留吗?

会。doctype、所有属性值、布尔属性以及 onclick / onload 等内联处理函数原样保留。IE 条件注释即使在压缩时也保留。