HTML 格式化与压缩工具

HTML 格式化（也称美化或 Pretty Print）是将结构混乱、缩进缺失的 HTML 代码重新按层级缩进对齐的过程。它不改变代码语义，只调整可读性。常见场景：①从压缩工具还原源码；②阅读服务器模板渲染的 HTML；③整理 IDE 自动生成或复制粘贴的代码；④代码审查时统一缩进风格。本工具支持 2 空格、4 空格、Tab 三种缩进风格，可自定义保留注释、保留空白、小写化标签等选项。

压缩效果取决于原代码的空白与注释量。典型场景：含大量缩进与注释的源码压缩后可减小 30-50% 体积；已经是单行的代码压缩收益有限（约 5-10%）。本工具压缩模式提供「移除注释」「合并空白」「省略可选闭合标签」三个选项。注意：压缩后的代码可读性差，仅用于生产部署，开发环境应保留美化版本便于调试。

HTML5 规范定义了 14 个 void elements（空元素）：area、base、br、col、embed、hr、img、input、link、meta、param、source、track、wbr。这些元素不能有子节点，因此不需要闭合标签（即不需要 <br></br> 这样的写法）。XHTML 时代流行 <br /> 自闭合写法，HTML5 中两种写法都合法，但 <br> 更简洁。本工具统一输出 <br> 形式。

HTML5 规范允许省略多个元素的闭合标签，包括 </html>、</head>、</body>、</li>、</p>、</td>、</tr>、</option> 等。浏览器会自动补全闭合。省略后体积可减小 5-10%，但可读性变差且容易引发嵌套错误（如 <p> 内嵌 <div> 会自动断开 <p>）。本工具压缩模式提供「省略可选闭合标签」选项，默认关闭，仅在追求极致体积时开启。

不会。这四个元素属于 rawtext elements，其内容应原样保留：①<pre> 与 <textarea> 中的空白与换行有显示意义（用户看到的就是源码原样）；②<script> 与 <style> 内容是代码，缩进会破坏语法（如模板字符串中的换行）。本工具遇到这些元素时，会原样输出内容，不递归缩进、不归一化空白。这也是为什么格式化 JavaScript 应使用专门的 JS 格式化工具。

HTML5 规范虽然大小写不敏感（<DIV>、<Div>、<div> 等价），但推荐使用小写形式。原因：①XHTML 与 XML 严格区分大小写，小写形式兼容性更好；②代码风格统一更易读；③工具链（如 lint、IDE 提示）默认小写；④搜索引擎爬虫更友好。本工具默认开启小写化，可在选项中关闭以保留原始大小写。

校验模式基于浏览器原生 DOMParser 解析后输出统计与问题清单：①统计元素数、文本节点数、注释数、属性数、最大嵌套深度；②检测未编码的 < 与 & 字符（应写为 < 与 &）；③检测重复属性（同元素同名属性，浏览器只保留第一个）；④报告解析错误。注意 HTML5 是容错规范，浏览器会自动修复未闭合标签、错误嵌套等问题，校验模式不会阻止解析，只会提示潜在问题。

两者互补但不同：HTML 实体工具（/html-entities）处理「文本 ↔ HTML 实体」的字符级转换，如 & ↔ &，用于在 HTML 文档中安全显示特殊字符与防御 XSS；HTML 格式化工具（本工具）处理「HTML 代码结构」的层级缩进与压缩，不改变字符内容。典型流程：先用 HTML 实体工具编码用户输入，再将整个 HTML 文档用本工具美化或压缩。两者形成「HTML 处理」工具矩阵。

Markdown 渲染产物是 HTML 字符串。Markdown 预览工具渲染后的 HTML 通常缩进混乱、缺少换行，可以复制到本工具美化模式，得到层级清晰的可读 HTML 源码用于检查或调试。反向场景：本工具压缩后的 HTML 可粘贴到 Markdown 的 HTML 块中（Markdown 支持嵌入原生 HTML），减小嵌入体积。

不会。本工具完全在浏览器内运行，所有解析、美化、压缩、校验逻辑由 JavaScript 在你本地执行，输入内容不会发送到任何服务器。