HTML 格式化：把一团乱麻的标签理顺，或压成一行带走
那次我差点没认出自己写的页面
前阵子我接手一个老项目，要在后台改一段表格。HTML 是从浏览器里”检查元素”复制出来的，粘进编辑器后我愣住了：整段就两行，标签全挤在一块，<div><div><table><tr><td> 一路连下来，中间偶尔几个换行还全在奇怪的地方。我想找那个 <td> 改文字，得用眼睛一个一个数层数。
那一刻我意识到，人和机器对 HTML 的需求是两回事：浏览器不在乎缩进和换行，它能照常渲染；但人要看懂、要改、要定位问题，就必须有结构感。所以我养成了两个习惯——平时改代码把它格式化成缩进清晰的模样，上线前再把它压缩成最小体积。这篇就讲清楚这两个方向相反的动作。
HTML 到底是什么格式的”文本”
HTML 本质是纯文本。浏览器拿到 .html 文件后，会先按标签 <...> 把它”切”成一个个节点，再根据层级挂成树（这就是常说的 DOM）。这个”切”的过程，浏览器根本不关心你有没有换行、有没有空格、缩进几个字符——它只认标签的开 < 和闭 >。
所以：
-
你写
<div><p>hi</p></div>和写：<div> <p>hi</p> </div>对浏览器来说完全一样，渲染结果分毫不差。
-
同理，
<DIV>和<div>在很多解析器眼里也是同一个标签（HTML 标签名不区分大小写）。
既然”排版”不影响运行，那我们做美化和压缩，纯粹是为了人和传输，不是为了机器。
美化：给代码加上”层级感”
美化的核心就一件事——按层级缩进，让你能一眼看清谁嵌套在谁里面。
还是开头那段：
<div><div><table><tr><td>姓名</td><td>年龄</td></tr></table></div></div>
美化后变成：
<div>
<div>
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
</table>
</div>
</div>
现在 <td> 在第几层、属于哪个 <table>，闭着眼睛都能摸出来。本站的 HTML 格式化工具在美化时提供三个开关，下面逐个说。
缩进：2 空格、4 空格还是 Tab？
这是最常被争论的”宗教问题”。事实是：对浏览器无意义，对团队有意义——统一比选哪个更重要。
- 2 空格：紧凑，适合嵌套深的代码（HTML 很容易深）。
- 4 空格：宽松，初学者更好数。
- Tab：理论上”按编辑器设置自适应宽度”，但实际协作时不同人的 Tab 宽度不一致，diff 也容易乱，我个人在前端项目里偏向空格。
工具里三种都能选，选好一种就别在文件里混用。
折叠多余空白：别让空格”吃掉”你的布局
HTML 有个特性：连续的空白（空格、换行、Tab）会被折叠成一个空格。所以下面两种写法显示效果相同：
<p>Hello World</p>
<p>Hello World</p>
美化时勾选”折叠多余空白”，会把标签之间的大段换行和缩进压缩掉，只保留一个空格的位置。但注意：<pre> 标签、以及 CSS 里设了 white-space: pre 的元素，空白是受保护的，工具不会动它们——否则代码块里的格式就被破坏了。
标签名转小写：统一”门面”
虽然 HTML 标签名大小写不敏感，但 HTML5 规范推荐小写。老代码、尤其是从设计软件或某些 CMS 导出的 HTML，常混着 <DIV>、<Table> 这种大写。勾选”标签名转小写”能一次性统一，避免同一个项目里 <div> 和 <DIV> 并存，看着别扭也难检索。
属性名同理推荐小写，不过属性值（比如 class="Box"）的大小写往往是有语义的，工具不会动它，这点放心。
压缩：上线前该做的”瘦身”
美化是为了人看，压缩是为了机器传。
一个 HTML 文件里，缩进、换行、标签之间的空格，占了相当比例的体积——尤其嵌套深的页面。这些字符对用户渲染毫无帮助，却要跟着文件一起下载。所以生产环境通常会把 HTML 压缩成一行：
<div class="card"><h2>标题</h2><p>内容</p></div>
压缩做的是：去掉标签之间的换行和多余空格、把连续空白并成一个。体积小了，传输快了，首屏也早一点出来。
本站工具压缩时还有一个开关——保留注释。注释（<!-- ... -->）在开发阶段很有用，但上线后往往是”噪音”，而且可能泄露内部信息（比如 <!-- 这部分以后要接支付 -->）。默认去掉最干净；如果你用注释做条件标记（某些构建工具会读），就勾上保留。
美化还是压缩，取决于你在哪个阶段
简单记：
- 写代码、读代码、排查 bug、改别人页面 → 美化。让结构摊开在你面前。
- 部署上线、压测体积、塞进文档示例 → 压缩。让传输成本最低。
我自己是这么用的：从网页复制来一坨乱 HTML，先美化、改完内容，再压缩丢回项目。一套工具两个标签，不用切来切去。
几个你一定会遇到的坑
<pre>、<textarea>、<script> 里的空白不能乱动。 前两者是”原样保留空白”的，后者里的内容有时带模板字符串、有时带 > 符号，瞎折叠会改掉代码含义。好的格式化工具会识别这些”敏感区”——本站对 <pre>/<textarea> 内的内容原样保留，不强行缩进。
单标签别乱加闭合。 HTML 里 <br>、<img>、<input> 这类是”空元素”，标准写法不需要 </br>。美化时工具会按规则处理，不要手贱给它们补闭合标签，否则有些解析器会当成”后面的内容都是它的子节点”，DOM 直接错乱。
压缩不会帮你修语法错误。 如果你的 HTML 本身标签没闭合（比如漏了 </div>），压缩后照样是错的，只是”更短地错”。压缩前先确认结构正确，或者先美化看一眼层级对不对。
属性值里的空格是真的。 class="a b" 里 a 和 b 之间是分隔两个类名的，压缩时绝不能并成一个。这点工具会区分”标签之间的空白”和”引号里的空白”。
常用对照速查
| 场景 | 该用 | 说明 |
|---|---|---|
| 从浏览器复制的 HTML 看不懂 | 美化（2 空格） | 立刻露出层级 |
| 想统一老代码的标签大小写 | 美化 + 转小写 | 一次性规范化 |
| 前端上线部署 | 压缩（去注释） | 减小传输体积 |
| 文档里贴示例又要短 | 压缩 | 一行更整洁 |
代码块 <pre> 内的 HTML | 原样，不格式化 | 避免破坏展示格式 |
| 团队协作定风格 | 统一缩进 + 小写标签 | 比选哪种更重要 |
常见问题
Q: 美化之后页面显示变了，为什么？
绝大多数情况是碰到了 white-space: pre 的区域，或者 <pre>/<textarea> 里本来就有意保留的换行被折叠了。把”折叠多余空白”关掉、或确保工具识别了这些敏感区，通常就恢复了。若还变，检查是不是属性值里的空格被误并。
Q: 压缩会让 SEO 变差吗？
不会。搜索引擎抓取的是渲染后的内容，压缩只是去掉无意义的空白字符，对文本、链接、标签结构没有任何影响。相反，文件变小、加载变快，对排名是正向的。
Q: 为什么有的 HTML 压缩后还是很大？
空白只是体积的一部分。真正占地方的是内联的 CSS、JS、base64 图片、大量重复的结构。压缩 HTML 能省一点，但大头往往在那几处。要进一步瘦身得从资源入手。
Q: 标签名大小写到底重不重要？
对浏览器运行不重要（HTML 不区分），但对人和工具重要。小写是规范推荐，也方便全文搜索和 diff。建议统一小写。
Q: 能不能把美化结果直接覆盖原文件？
可以，但务必先备份或在版本控制里提交一次。美化是”重排”，理论上不改变语义，但万一遇到工具没覆盖到的边角情况（罕见），有回滚余地最稳。