ZeroTool Workbench
HTML 压缩美化工具
免费 HTML 压缩与美化工具。一键剥离注释、折叠空白或重新缩进,全程浏览器运行,无需上传也无需注册。
使用方法
- 把 HTML(片段或带 doctype 的完整文档)粘贴到输入框。
- 点击 压缩 去注释折叠空白,或点击 美化 重新缩进。
- 美化时可在缩进下拉选择 2 空格、4 空格或 Tab。
- 压缩后状态栏会显示节省情况(例如
12.4 KB → 8.1 KB (−34.6%))。 - 点击输出面板的 复制 按钮即可取走结果。
示例
压缩前
<!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 条件注释即使在压缩时也保留。