# HTML 格式化/压缩教程：一键美化页面代码，支持渲染预览
> 来源：工具派（https://gjupai.com） 原文页面：https://gjupai.com/tutorial/html-formatter-guide
## 工具简介
HTML 格式化/压缩是一款免费的在线 HTML 代码处理工具，支持美化、压缩、转义与反转义四种处理。压缩成一行的页面代码可以一键还原成层级清晰的缩进格式，标签自动换行对齐，还带语法高亮；写好的 HTML 也能一键压缩去注释，减小页面体积。工具在浏览器本地实时运行，输入即出结果，还提供 Source / Preview 双视图，格式化后可以直接预览页面渲染效果。
## 第一步：选择模式与格式化选项
打开工具派「HTML 格式化/压缩」页面，顶部工具栏提供全部选项：
1. **模式**：格式化（默认）美化代码，压缩精简到单行；
2. **缩进**：2 空格（默认）、4 空格或 Tab；
3. **保留注释**：默认勾选，保留 `` 注释；
4. **属性换行**：勾选后标签属性逐个换行，长标签更易读；
5. **属性排序**：勾选后按字母顺序重排标签属性。
右上角提供「加载示例」「上传文件」「复制结果」「清空」「下载 .html」五个操作按钮。
## 第二步：粘贴代码，右侧实时格式化
在左侧「输入」区域粘贴压缩的 HTML 代码，右侧「输出」区域立即显示格式化结果。
- 输出带行号和语法高亮，标签嵌套层级一目了然；
- 右上角实时统计原始大小、输出大小、压缩率和行数；
- 输出区支持 Source / Preview 切换，点 Preview 可以直接看到页面渲染效果，调样式时特别方便。
实测一段 148 字节的单行 HTML，格式化后展开为 8 行带缩进的规范代码。
## 参数说明
| 参数 | 类型 | 说明 |
| --- | --- | --- |
| 模式 | 下拉框 | 格式化（默认）/ 压缩 |
| 缩进 | 下拉框 | 2 空格（默认）/ 4 空格 / Tab |
| 保留注释 | 复选框 | 默认勾选 |
| 属性换行 | 复选框 | 默认不勾选，勾选后属性逐个换行 |
| 属性排序 | 复选框 | 默认不勾选，勾选后属性按字母排序 |
| 输入代码 | 文本域 | 直接粘贴或点「上传文件」载入本地 HTML |
| 输出视图 | 切换按钮 | Source 查看代码 / Preview 预览渲染效果 |
## 第三步：压缩代码并下载结果
要把 HTML 精简上线，把「模式」切换为「压缩」即可。
实测一段带注释、共 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)