<h2>工具简介</h2>
<p>HTML 格式化/压缩是一款免费的在线 HTML 代码处理工具，支持美化、压缩、转义与反转义四种处理。压缩成一行的页面代码可以一键还原成层级清晰的缩进格式，标签自动换行对齐，还带语法高亮；写好的 HTML 也能一键压缩去注释，减小页面体积。工具在浏览器本地实时运行，输入即出结果，还提供 Source / Preview 双视图，格式化后可以直接预览页面渲染效果。</p>
<p><img src="/api/file/download?path=article/202607/1783857766805_6116.png" alt="HTML 格式化选项"></p>
<h2>第一步：选择模式与格式化选项</h2>
<p>打开工具派「HTML 格式化/压缩」页面，顶部工具栏提供全部选项：</p>
<ol>
<li><strong>模式</strong>：格式化（默认）美化代码，压缩精简到单行；</li>
<li><strong>缩进</strong>：2 空格（默认）、4 空格或 Tab；</li>
<li><strong>保留注释</strong>：默认勾选，保留 <code>&lt;!-- --&gt;</code> 注释；</li>
<li><strong>属性换行</strong>：勾选后标签属性逐个换行，长标签更易读；</li>
<li><strong>属性排序</strong>：勾选后按字母顺序重排标签属性。</li>
</ol>
<p>右上角提供「加载示例」「上传文件」「复制结果」「清空」「下载 .html」五个操作按钮。</p>
<h2>第二步：粘贴代码，右侧实时格式化</h2>
<p>在左侧「输入」区域粘贴压缩的 HTML 代码，右侧「输出」区域立即显示格式化结果。</p>
<p><img src="/api/file/download?path=article/202607/1783857768026_8363.png" alt="HTML 格式化效果"></p>
<ul>
<li>输出带行号和语法高亮，标签嵌套层级一目了然；</li>
<li>右上角实时统计原始大小、输出大小、压缩率和行数；</li>
<li>输出区支持 Source / Preview 切换，点 Preview 可以直接看到页面渲染效果，调样式时特别方便。</li>
</ul>
<p>实测一段 148 字节的单行 HTML，格式化后展开为 8 行带缩进的规范代码。</p>
<h2>参数说明</h2>
<table>
<thead>
<tr>
<th>参数</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>模式</td>
<td>下拉框</td>
<td>格式化（默认）/ 压缩</td>
</tr>
<tr>
<td>缩进</td>
<td>下拉框</td>
<td>2 空格（默认）/ 4 空格 / Tab</td>
</tr>
<tr>
<td>保留注释</td>
<td>复选框</td>
<td>默认勾选</td>
</tr>
<tr>
<td>属性换行</td>
<td>复选框</td>
<td>默认不勾选，勾选后属性逐个换行</td>
</tr>
<tr>
<td>属性排序</td>
<td>复选框</td>
<td>默认不勾选，勾选后属性按字母排序</td>
</tr>
<tr>
<td>输入代码</td>
<td>文本域</td>
<td>直接粘贴或点「上传文件」载入本地 HTML</td>
</tr>
<tr>
<td>输出视图</td>
<td>切换按钮</td>
<td>Source 查看代码 / Preview 预览渲染效果</td>
</tr>
</tbody></table>
<h2>第三步：压缩代码并下载结果</h2>
<p>要把 HTML 精简上线，把「模式」切换为「压缩」即可。</p>
<p><img src="/api/file/download?path=article/202607/1783857768991_9826.png" alt="HTML 压缩效果"></p>
<p>实测一段带注释、共 220 字节的 HTML，压缩后只剩 148 字节，压缩率 32.7%，注释和多余空白全部移除，输出为单行。确认结果后点击「复制结果」粘贴到项目里，或点击「下载 .html」保存为本地文件。</p>
<h2>常见问题</h2>
<p><strong>Q1：代码会上传到服务器吗？</strong><br>不会。格式化、压缩全部在浏览器本地完成，输入的代码不会离开电脑，可以放心处理内部项目的页面代码。</p>
<p><strong>Q2：格式化后能直接看页面效果吗？</strong><br>可以。输出区右上角点「Preview」即可切换到渲染预览，不用另开浏览器标签页测试。</p>
<p><strong>Q3：压缩会把注释删掉吗？</strong><br>压缩模式为追求最小体积会移除注释。需要保留版权信息等注释时，请使用「格式化」模式并勾选「保留注释」。</p>
<p><strong>Q4：标签属性太多一行看不清怎么办？</strong><br>勾选「属性换行」，每个属性会单独一行显示；再勾选「属性排序」可以按字母顺序重排，长标签也能轻松阅读。</p>
<h2>总结与相关工具</h2>
<p>HTML 格式化/压缩把代码美化、精简和渲染预览集成在一个页面，本地实时处理、一键复制下载，是前端调试和上线优化的实用工具。</p>
<p>处理样式和脚本可以搭配「<a href="/tools/css_formatter">CSS 格式化/压缩</a>」和「<a href="/tools/js_formatter">JavaScript 格式化/压缩</a>」；写文档需要在 Markdown 和 HTML 之间转换时，可以用「<a href="/tools/markdown_converter">Markdown ⇄ HTML 互转</a>」。</p>
<p>立即体验：<a href="/tools/html_formatter">HTML 格式化/压缩</a></p>


## 工具简介

HTML 格式化/压缩是一款免费的在线 HTML 代码处理工具，支持美化、压缩、转义与反转义四种处理。压缩成一行的页面代码可以一键还原成层级清晰的缩进格式，标签自动换行对齐，还带语法高亮；写好的 HTML 也能一键压缩去注释，减小页面体积。工具在浏览器本地实时运行，输入即出结果，还提供 Source / Preview 双视图，格式化后可以直接预览页面渲染效果。

![HTML 格式化选项](/api/file/download?path=article/202607/1783857766805_6116.png)

## 第一步：选择模式与格式化选项

打开工具派「HTML 格式化/压缩」页面，顶部工具栏提供全部选项：

1. **模式**：格式化（默认）美化代码，压缩精简到单行；
2. **缩进**：2 空格（默认）、4 空格或 Tab；
3. **保留注释**：默认勾选，保留 `` 注释；
4. **属性换行**：勾选后标签属性逐个换行，长标签更易读；
5. **属性排序**：勾选后按字母顺序重排标签属性。

右上角提供「加载示例」「上传文件」「复制结果」「清空」「下载 .html」五个操作按钮。

## 第二步：粘贴代码，右侧实时格式化

在左侧「输入」区域粘贴压缩的 HTML 代码，右侧「输出」区域立即显示格式化结果。

![HTML 格式化效果](/api/file/download?path=article/202607/1783857768026_8363.png)

- 输出带行号和语法高亮，标签嵌套层级一目了然；
- 右上角实时统计原始大小、输出大小、压缩率和行数；
- 输出区支持 Source / Preview 切换，点 Preview 可以直接看到页面渲染效果，调样式时特别方便。

实测一段 148 字节的单行 HTML，格式化后展开为 8 行带缩进的规范代码。

## 参数说明

| 参数 | 类型 | 说明 |
| --- | --- | --- |
| 模式 | 下拉框 | 格式化（默认）/ 压缩 |
| 缩进 | 下拉框 | 2 空格（默认）/ 4 空格 / Tab |
| 保留注释 | 复选框 | 默认勾选 |
| 属性换行 | 复选框 | 默认不勾选，勾选后属性逐个换行 |
| 属性排序 | 复选框 | 默认不勾选，勾选后属性按字母排序 |
| 输入代码 | 文本域 | 直接粘贴或点「上传文件」载入本地 HTML |
| 输出视图 | 切换按钮 | Source 查看代码 / Preview 预览渲染效果 |

## 第三步：压缩代码并下载结果

要把 HTML 精简上线，把「模式」切换为「压缩」即可。

![HTML 压缩效果](/api/file/download?path=article/202607/1783857768991_9826.png)

实测一段带注释、共 220 字节的 HTML，压缩后只剩 148 字节，压缩率 32.7%，注释和多余空白全部移除，输出为单行。确认结果后点击「复制结果」粘贴到项目里，或点击「下载 .html」保存为本地文件。

## 常见问题

**Q1：代码会上传到服务器吗？**
不会。格式化、压缩全部在浏览器本地完成，输入的代码不会离开电脑，可以放心处理内部项目的页面代码。

**Q2：格式化后能直接看页面效果吗？**
可以。输出区右上角点「Preview」即可切换到渲染预览，不用另开浏览器标签页测试。

**Q3：压缩会把注释删掉吗？**
压缩模式为追求最小体积会移除注释。需要保留版权信息等注释时，请使用「格式化」模式并勾选「保留注释」。

**Q4：标签属性太多一行看不清怎么办？**
勾选「属性换行」，每个属性会单独一行显示；再勾选「属性排序」可以按字母顺序重排，长标签也能轻松阅读。

## 总结与相关工具

HTML 格式化/压缩把代码美化、精简和渲染预览集成在一个页面，本地实时处理、一键复制下载，是前端调试和上线优化的实用工具。

处理样式和脚本可以搭配「[CSS 格式化/压缩](/tools/css_formatter)」和「[JavaScript 格式化/压缩](/tools/js_formatter)」；写文档需要在 Markdown 和 HTML 之间转换时，可以用「[Markdown ⇄ HTML 互转](/tools/markdown_converter)」。

立即体验：[HTML 格式化/压缩](/tools/html_formatter)

HTML 格式化/压缩教程：一键美化页面代码，支持渲染预览