压缩会破坏和标签内的 JavaScript 或 CSS 吗？

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

HTML 压缩美化工具

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

在浏览器中处理
数据不离开你的设备
免费 · 无需注册

压缩会删除普通注释并折叠 HTML 空白；美化会重新缩进解析后的标记。按钮会选择后续输入时使用的模式；Ctrl/⌘+Enter 执行压缩。

清除会清空两栏、状态和排队的处理任务。焦点在工具内时，Ctrl/⌘+L 执行相同操作。

缩进：为美化选择 2 个空格、4 个空格或 Tab。改变此选项会立即按当前模式重新处理。

HTML 输入输入 HTML 片段或完整文档。停止输入 300 毫秒后会按最近选择的模式处理；浏览器解析器会修复不完整的标记。

输出结果是序列化的 HTML。压缩后的状态行显示原始与输出字节数及变化百分比；内联 JavaScript 和 CSS 不做压缩。

复制完整输出文本。输入面板另有复制按钮，用于复制原始文本。

示例、说明与常见问题带实际输出的示例、与同类工具的差别，以及常见问题。

示例

压缩前

<!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>

状态栏：已压缩 — 211 B → 159 B (−24.6%)。注释被删除，每段缩进变成一个空格。标签之间的空格之所以保留，是因为工具把只含空白的文本节点一律保留为一个空格：在 <p>Hello <strong>world</strong>!</p> 里，<strong> 前的空格是看得见的，工具不去判断哪些空格可以安全删掉。html-minifier-terser 这类构建期压缩器可以用 collapseWhitespace 等选项删得更多。

会被压缩的内容

标签之间的空白（inter-tag whitespace）会折叠。
HTML 注释被删除——IE 条件注释（<!—[if IE]>）除外。
disabled="" 这类布尔属性会简化为 disabled。
文本中连续的空白折叠为一个空格。标签之间只有空白的文本变成一个空格，不会删掉，因为解析器无法判断哪些空格是可见的。
<p>、<h1> 这类块级元素内只有文本时，文本首尾的空白被去掉。<strong>、<a>、<span> 等行内元素两端各保留一个空格，因为这个空格看得见：<strong>Note: </strong>read this. 保持不变。

会原样保留的内容

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

什么时候手动压缩 HTML

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

限制

行内元素两端保留折叠后的空格，即使 CSS 会把它藏起来（例如在行首）。工具不读取你的 CSS，无法判断 display 或 white-space 是否改变了空格的显示。
只折叠 HTML 空白（空格、制表符、换行、换页、回车）。不换行空格会保留：Price:  10 EUR 输出后仍是三个不换行空格，只是写成字符 U+00A0 而不是  。全角空格 U+3000 同样保留。
片段中被 HTML 解析器移出 <body> 的内容会按原顺序写回：第一个元素之前的 <!—[if mso]> 这类条件注释，以及正文之前的 <title>、<meta>、<link>、<style>。普通注释无论在哪里都会删除。
内联 JavaScript 与 CSS 原样复制，不做压缩。
HTML 由浏览器的 DOMParser 解析，不合法的标记输出时已被修正（补上缺失的结束标签、丢掉多余的标签），doctype 写成 <!doctype html>。

FAQ

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

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

HTML 会被上传吗？

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

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

取决于输入的缩进量和注释多少，内联脚本与样式不会被改动。下方示例从 211 字节压到 159 字节（24.6%）。每次压缩后状态栏会显示原始体积、输出体积与节省百分比。

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

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

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

会。doctype、所有属性值、布尔属性以及 onclick / onload 等内联处理函数原样保留。IE 条件注释在压缩时保留，放在片段第一个元素之前的也一样。

示例

压缩前

压缩后