HTML 格式化与美化:把压缩成一行的脏代码读懂

线上页面查看源代码,整个 body 挤成一行,几千个字符连成一串,找一个 div 都要拿鼠标横拉半天。这种代码不是给人读的,是给浏览器读的。要让自己看懂、能改,得先把它重新排版开,让结构站出来。这件事就是 HTML 格式化,也叫 HTML 美化。

格式化到底在做什么

很多人以为美化就是随便加点空格换行。其实它做的是一件有规则的事:沿着标签的嵌套层级走一遍,让每个元素单独成行,再按它在树里的深度往右缩进。

举个最小的例子。一段压缩的 HTML:

<ul><li>一</li><li>二</li></ul>

格式化之后变成:

<ul>
  <li>一</li>
  <li>二</li>
</ul>

ul 在第一行,两个 li 各自成行并往里缩进一级,闭合的 ul 退回原位。一眼就能看清谁包着谁。缩进宽度通常可选 2 空格、4 空格或 Tab 三档,对齐你项目里原本的风格,贴回去不会和周围代码打架。

嵌套对齐是关键

格式化的核心难点,在于嵌套深度要算对。每进入一层子节点,缩进就多一级;每碰到闭合标签,缩进退回一级。表格、表单、嵌套列表这类层级深的结构,正是没缩进时最难读的。

我手上常碰到的是邮件模板。所见即所得编辑器导出的 HTML,经常是一坨嵌套五六层的 table 套 table,再加一堆内联样式,全压在一行里。格式化之后,table、tr、td 一层层缩进展开,哪个单元格套着哪个、哪个标签落了单没闭合,立刻看得清。手改的时候就不用再跟文本框里那一长串死磕。

空元素和受保护区域

光按层级缩进还不够,有两类东西要特殊对待,否则会出错。

第一类是空元素,也叫自闭合元素:br、img、input、meta 这些。它们装不下子节点,所以既不补闭合标签,也不该多缩进一级。处理对了,<img src="a.png"> 后面的同级元素会保持同一缩进;处理错了,后面的内容会被莫名其妙往里推一层。完整的空元素清单按 HTML5 规范来:area、base、br、col、embed、hr、img、input、link、meta、param、source、track、wbr。

第二类是受保护区域:pre、textarea、script、style 里的内容。这些地方对空白敏感,或者属于原始文本。pre 里的空格和换行直接决定渲染,script 里重新缩进可能弄坏代码。所以这些区域必须一字节不动地原样穿过,只缩进它们外面的标签。如果你看到 script 标签里的代码相对页面像是没缩进,那是正确行为,不是工具偷懒。

压缩是反着的另一半

格式化和压缩是一个来回。压缩工具去掉空白和换行,把文件缩小好上线;格式化工具把空白和换行加回来,让人能读能改。开发调试时用格式化把代码摊开,部署前再压缩回去发出去,渲染出来的页面两边完全一样。

需要反向把代码压回去,可以走 HTML 压缩工具。如果手上是 XML 而不是 HTML,结构原理一样,用 XML 格式化工具 即可;同理样式表交给 CSS 格式化工具。想把整理好的 HTML 转成 Markdown 写文档,有 HTML 转 Markdown。

一个常被忽略的细节:行内空白

有件事容易踩坑。普通标签之间的空白浏览器会忽略,加换行不影响渲染。但行内元素之间的空白是有意义的。两个 <a> 链接之间的那个空格,在页面上是真会显示出来的。

所以处理正文那种文字和行内标签混排的内容时,要让 span、a、b、i 这类行内元素留在同一行,别把 <a>one</a> <a>two</a> 拆成两行。拆开可能凭空多出或挪动一道缝。把行内同行的开关开着,一句话就不会被拆成一个词一行,也不会变形。

还有一点要分清:格式化只整理排版,不修语义。<div><p></div> 这种标签不匹配的进去,出来还是缩进过的不匹配。要的是可读性就用格式化,要的是正确性得另外跑校验。

一切在本地跑就够了

读别人页面的源码、整理工具吐出来的脏 HTML,这类活儿其实不需要上传到任何服务器。整个格式化过程是纯 JavaScript,在你浏览器标签页里完成,代码不离开本机。涉及未发布的模板或保密页面时这点尤其要紧:用复制按钮取走结果就行,别去分享带输入的链接,免得那段标签落进别人服务器的访问日志。

下次再撞上一行读不懂的压缩 HTML,直接丢进 HTML 格式化工具 摊开看结构,比横拉鼠标找标签快得多。

---

Made by Toolora · Updated 2026-06-13