HTML 缩进美化

HTML 美化：空元素、空白敏感与内联元素之间的空格

格式化需要知道哪些标签是"空元素"

HTML 里有一批空元素（void elements）——它们不能包含内容，也没有结束标签。格式化器必须知道这个清单，否则会给它们加上错误的闭合标签，破坏结构：

写 <br></br> 是无效的（HTML 解析器会忽略那个结束标签，但在 XHTML 语法下是错误）。同理给 <img> 加闭合标签会让后续的 DOM 结构与预期不符——这是"格式化之后页面坏了"的经典原因。

另外要注意：<script>、<style>、<pre>、<textarea> 的内部内容是原始文本，不能重新缩进。往 <pre> 里插空格会直接改变显示结果，往 <textarea> 里插空格会改变用户看到的初始值。工具会保持这几类元素的内部内容原样。

空白在 HTML 里有时有意义

这是格式化最容易被忽视的风险。HTML 默认会把连续空白折叠成一个空格，但折叠不代表可以随意增删换行：

所以：把原本连在一起的图标与文字拆成多行，可能会多出一个空格，导致按钮宽度变化、文字换行。排版敏感的导航条和按钮组要特别注意。这类问题在开发环境不明显，上线后才发现在某些字体或缩放下错位。

规避方式有两种：一是内联元素之间不换行（保持紧凑书写）；二是在 CSS 上用 display: flex 或 font-size: 0 的技巧（后者需要给子元素恢复字号，属于老做法）。现代项目更推荐前者或直接用 Flex/Grid 布局，让空白不再影响布局。

格式化的其他约束

• 属性引号。属性值无论是否含空格都可以加引号，格式化时应统一加上（不加引号的值里不能有空格、引号、等号等）。带特殊字符的值必须加引号并转义 & 与引号本身。
• 注释。HTML 注释不能出现在标签内部（<div <!-- x --> > 是无效的），也不能包含 -- 序列（历史上的解析限制）。格式化器处理注释时要格外小心。
• DOCTYPE 必须在最前。它是唯一合法出现在 <html> 之前的内容，前面任何空白或注释都会让浏览器进入怪异模式（quirks mode），导致 CSS 表现异常。
• HTML 与 XHTML 语法不同。XHTML 要求所有标签闭合、属性必须加引号、标签名小写。把 HTML 片段按 XHTML 规则处理（或反过来）会产生不兼容的输出。
• 格式化不修语法错误。缺失的结束标签不会被自动补上——浏览器会在解析时自行推断（并可能推断错），但格式化器只是按缩进重排文本。它不做 HTML 解析器的容错处理。

工具怎么用

粘贴 HTML 源码，点格式化，输出按标签层级缩进，script、style、pre、textarea 内部内容保持原样。适合整理从网页"查看源代码"复制来的压缩代码、检查标签嵌套层级、以及在提交前统一格式。

处理在浏览器本地完成。注意格式化是文本级的重排，提交到项目之前请用浏览器或校验器确认渲染结果没有变化——尤其是包含大量内联元素的片段。