HTML 压缩与美化工具

这个工具是什么？

HTML 压缩移除对浏览器渲染无关的字符：标签间空白、HTML 注释（<!-- -->）、可选结束标签（HTML5 规范中的 </li>、</td>、</p> 等）和布尔属性值（disabled=“disabled” → disabled）。不同于 CSS/JS 压缩，HTML 压缩必须尊重空白敏感元素（<pre>、<textarea>、<script>、<style>）和内联元素中单词间距。

主要功能

• 空白和注释删除：折叠块级标签间的空白序列；删除 <!-- --> HTML 注释（可选保留 <!--[if IE]--> 条件注释）；不处理 <pre>、<code>、<textarea> 或脚本/样式块内的空白。
• 可选结束标签删除（HTML5）：在 HTML5 解析算法允许的情况下省略 </li>、</dt>、</dd>、</p>、</th>、</tr>、</td>、</thead>、</tbody> 而不改变 DOM 结构。
• 布尔属性压缩：将冗余值赋值（selected=“selected”、disabled=“disabled”）转换为 HTML5 规范的裸布尔形式。
• 可配置美化器：以可配置缩进（2/4 空格或制表符）重新格式化压缩的 HTML，适当嵌套块和内联元素。
• 属性引号规范化：在安全的地方将双引号属性值转换为无引号形式（class=“main” → class=main）。
• 压缩前后文件大小差异：显示原始字节数、压缩后字节数和压缩率。

常见用例

• 服务端渲染优化：在发送到浏览器前压缩 PHP、Django、Rails 或 Node.js 模板引擎的 HTML 输出；标记密集页面可减少 10-30%。
• 静态站点生成器后处理：在 Jekyll、Hugo、Eleventy 或 Next.js 静态导出的最终构建步骤中使用；结合 Brotli 压缩可实现 85-95% 的总传输削减。
• 调试压缩的 HTML：美化生产站点 view-source 或 API 响应中的 HTML，检查结构、head 元数据和 JSON-LD 标签。
• 模板审计：重新格式化 CMS（WordPress、Drupal）或表单构建器自动生成的 HTML，审查 ARIA 属性和标题层次结构。

美化功能的调整项

压缩功能的调整项

预估文件尺寸变化