如何格式化和压缩 HTML 代码

HTML 格式化和压缩是两种相反的操作，用于不同目的。格式化让代码对开发者可读。压缩让代码对浏览器轻量。大多数项目两者都需要 · 开发时用格式化代码，生产时用压缩代码。

格式化：让 HTML 可读

格式化器接收压缩或杂乱的 HTML，添加适当的缩进、换行和一致的间距。结构一目了然。

之前：

<div class="card"><h2>标题</h2><p>这里有一些文字</p><a href="/link">阅读更多</a></div>

之后：

<div class="card">
  <h2>标题</h2>
  <p>这里有一些文字</p>
  <a href="/link">阅读更多</a>
</div>

如何格式化 HTML

1. 粘贴您的 HTML· 将杂乱或压缩的代码输入格式化器。
2. 设置首选项· 选择缩进大小（2 或 4 空格）以及是否保留行内标签。
3. 复制结果· 格式化后的 HTML 已准备好放入您的编辑器。

压缩：让 HTML 轻量

压缩器移除浏览器不需要的所有内容 · 空格、注释、可选的关闭标签和冗余的属性值。结果是单一、紧凑的字符串。

如何压缩 HTML

1. 粘贴您已格式化的 HTML· 输入带缩进、注释和空白的代码。
2. 配置选项· 选择移除注释、合并空白和优化属性。
3. 复制压缩输出· 在生产构建中使用它。

何时使用什么

小贴士

• 在构建流程中自动化· 大多数工具（Webpack、Vite、Gulp）可以在部署时自动压缩 HTML。编写格式化代码，交付压缩代码。
• 提交前先格式化· 干净、一致的 HTML 让 Git diff 更易读、代码审查更快速。
• 压缩不会破坏 HTML· 它只移除对渲染无影响的内容。注释、多余空白和可选标签可安全移除。
• 使用语法高亮· 格式化器和压缩器都提供语法高亮，帮助您核对输出是否正确。