HTML 压缩

如何使用HTML 压缩

关于HTML 压缩的常见问题

HTML 压缩会上传我的网页源码吗？

不会。HTML 压缩全程在你的浏览器里完成，源码不发到任何服务器，所以后台模板、邮件 HTML、带内网地址的页面都可以放心粘。本页只把压缩选项（标准还是保守、开了哪些开关）记在本机 localStorage，源码和结果一律不落盘，关掉页面就没了。想验证可以断网再压一次，照样出结果。

手机上能用 HTML 在线压缩吗？

能。HTML 在线压缩是纯网页实现，手机、平板、电脑浏览器打开即用，免安装免注册。窄屏上输入框、选项和结果框上下排列，选项按钮都按手指点按的尺寸做；压缩完可以直接复制结果，或下载成 .min.html 文件。

HTML 压缩后页面显示会变吗？

按浏览器默认样式不会变，这是本工具的底线。默认的「标准」档只删块级标签（div、p、li、tr 等）两侧的空白，内联内容（文字、b、a、span、img、select 下拉框、自定义组件）之间的一串空白折成一个空格而不是删光；pre 与 textarea 原样；两侧都是汉字的换行保留为一个换行。例外是页面用 CSS 改了 display 或 white-space，见下一条。

HTML 压缩后菜单间距变了怎么办？

多半是 li 被设成了 display:inline-block。这种写法下，标签之间的换行会被渲染成大约 4px 的缝，压缩把它删掉后菜单就挤紧了。两个解法：改用「保守」档（块级标签之间也留一个空格），或者用 htmlmin:ignore 注释把这一段前后包起来，中间整段原样不动。

HTML 压缩会改 script 和 style 里的代码吗？

script 一律不动，本页不压缩也不混淆 JavaScript，连里面的空格都原样。style 标签默认做一遍保守压缩：删 CSS 注释（感叹号开头的版权注释保留）、折叠多余空白、去掉花括号分号逗号两侧的空格和最后一个分号；字符串、url() 和 CSS 转义一个字符不碰，冒号两侧的空格也不动。不想动 CSS 就把「压缩内联 CSS」关掉。

HTML 压缩能保留条件注释和版权注释吗？

能，而且不受「删除注释」开关影响。IE 条件注释、感叹号开头的版权 / 许可注释、井号开头的 SSI 指令（include virtual 那种）、Knockout 的 ko 注释、Vue SSR 和 React SSR 的标记注释，这 6 类删了会出问题的注释一律保留；只有普通说明性注释才会被删。

HTML 压缩去掉属性引号会出错吗？

进阶选项默认全关，打开后才改写属性。HTML 去属性引号只对安全的值生效：class="nav" 变成 class=nav，而值里含空格、引号、等号、尖括号、反引号，或以斜杠结尾（比如 href="https://x.cn/"）时引号一律保留，避免浏览器把属性截断。另外三个开关：checked="checked"、disabled="" 简写成 checked、disabled；script 上的 type="text/javascript" 与样式表 link 上的 type="text/css" 删掉；br、img、input 这类空元素末尾的斜杠去掉。冒号、@、v-、x- 开头的框架属性不参与改写。这几项各省几个字节，gzip 后收益更小，追求极致体积时再开。

HTML 压缩支持 Vue 和模板语法吗？

支持。文本里的双花括号插值、花括号百分号控制语句、花括号井号注释，以及 PHP、ASP / EJS 风格的尖括号百分号片段都整段原样，片段外的空白才照常折叠；属性里出现模板语法的标签整个原样输出，计入「原样标签」。冒号、@ 开头和 v-、x- 开头的框架属性不参与去引号与布尔简写。

HTML 压缩能省多少体积？开了 gzip 还要压吗？

用本页「填入示例」那份源码实测：777 字节压到 576 字节，省 25.9%；各自 gzip 之后是 555 字节对 487 字节，仍然少 12.3%。服务器开了 gzip 时收益会变小但不归零，两者可以叠加。邮件 HTML 不走 gzip，Gmail 正文超过约 102KB 还会被截断，这种场景先压缩最直接。

HTML 压缩支持多大的文件？

单次上限约 2MB（按 UTF-8 字节计），常见网页、模板和邮件 HTML 都够用。200KB 以内边输入边压缩；超过 200KB 会关掉自动压缩，改成选好选项后点「开始压缩」，gzip 估算在结果出来后再算，避免每次击键都卡住页面；超过 2MB 会直接提示，请拆分后再来。

HTML 压缩后能再格式化回来吗？

能。把压缩结果贴进下方相关工具里的「HTML 格式化」，就能按标签层级重新展开缩进。但被删掉的普通注释回不来，原来的缩进风格也不会还原成一模一样；需要保留注释的话，压缩前先把「删除注释」关掉。

HTML 压缩去空格为什么不能全删光

HTML 里换行就是空白，而空白在内联上下文会被渲染成一个空格，所以「把空白全删光」的 HTML 去空格 做法会改坏页面。本工具把 HTML 去除空白这件事分成三种位置来处理，标准档与保守档的差别只在中间那一行：

对照着看「填入示例」那份源码：标准档输出 576 字节（省 25.9%）， 保守档输出 590 字节（省 24.1%）——保守档多出来的那几个字节， 就是块级标签之间留下的空格。内联元素之间的那一个空格两档都留，例如：

<!-- 原文 -->
<p>
  价格 <b>￥9.9</b> 起
</p>

<!-- 本工具（标准档）：p 两侧删，b 两侧各留一个空格 -->
<p>价格 <b>￥9.9</b> 起</p>

<!-- 删光空白的压缩器：页面上变成「价格￥9.9起」 -->
<p>价格<b>￥9.9</b>起</p>

HTML 压缩为什么把中文之间的换行留成换行

CSS 规范允许浏览器把「两侧都是中日文字符的换行」直接去掉而不渲染成空格。Firefox 实现了这一条， Chrome 与 Safari 目前仍渲染成空格。如果压缩器把所有换行统一折成空格，Firefox 用户就会在中文之间 看到凭空多出来的空格。本工具的规则是：一串要折成一个字符的空白，只要原文里含换行、且左右最近的可见 字符都是中日文（汉字、假名、全角标点，含扩展区汉字），就输出一个换行；否则输出空格。韩文不在此列， 因为 Firefox 对韩文保留空格。

换行与空格同样是 1 个字节，这条规则不增加体积，只是输出可能不是严格的「一行」。查找可见字符时会跨过 b、span 这类内联标签继续找，遇到块级标签、img 这类空元素或 script 就停。结果区的体积账本会标出 保留了几处中文换行。

HTML 压缩去注释哪些注释不能删

「删除注释」只删普通说明性注释。下面 6 类注释承担着功能，删了页面或构建流程就会出问题， 所以即使开着 HTML 去注释开关也一律保留：

另有一对特殊标记：用两个 htmlmin:ignore 注释把一段 HTML 包起来，中间整段原样不压， 两个标记本身会被删掉（与社区里 html-minifier 的约定兼容）。只写了一个时，从它开始到文末全部原样， 并在结果旁提示。

HTML 文件压缩体积实测：开了 gzip 还要不要压

用页面里「填入示例」那份 777 字节的源码，在三种设置下实测（gzip 为 level 6 估算值）：

结论：gzip 本来就很擅长压缩重复的缩进，所以开了 gzip 之后 HTML 压缩的收益会缩水，但不会归零—— 示例里 gzip 后仍少 12.3%，而且浏览器解析的是解压后的源码，少一些空白节点也能少一点 DOM 开销。没有 gzip 的场景收益最直接：邮件 HTML 压缩就是典型，Gmail 对超过约 102KB 的邮件正文 会截断并显示「查看完整邮件」；嵌进 JS 字符串、JSON 配置或小程序 / 设备固件里的页面也一样。

HTML 代码压缩能做什么、不做什么

HTML 怎么压缩才不出事，归结起来就三条：内联内容之间留一个空格、保真区一个字符不碰、 功能性注释不删。英文资料里这类工具叫 HTML minifier 或 HTML compressor，搜 HTML minify、 minify HTML online 找到的都是同一件事；本页的区别是 HTML 压缩不上传、按中文页面的习惯处理了中文换行。 要把压缩过的源码重新展开，用下方相关工具里的 HTML 格式化。

相关教程

遇到格式选择、乱码或校验问题，可以先看这些说明再动手处理。

• 文件知识Markdown 是什么？常用语法速查表与转 HTML 方法新手向 Markdown 语法速查：讲清 Markdown 是什么、标题列表加粗怎么写、表格和代码块怎么排、常见踩坑，以及怎么实时预览效果、把 Markdown 转成 HTML 网页，全程浏览器本地处理、内容不上传。