关于 HTML 格式化工具
HTML 格式化工具基于 DOMParser API 在浏览器本地美化或压缩 HTML 代码。通过解析 HTML 生成 DOM 树后遍历节点重新格式化缩进，正确处理 void 元素（br、img、input、meta、link 等自闭合标签不加闭合标签）、原始文本元素（script 和 style 内容保持原样不缩进）、可转义元素（textarea 和 title）和 DOCTYPE 声明。提供 2 空格、4 空格和 Tab 缩进选项，美化和压缩模式一键切换。支持 HTML5 语义化标签（article、section、nav、aside）和 Web Components 自定义元素的正确缩进和闭合处理。所有解析与格式化在浏览器本地执行，HTML 代码不会被上传到服务器，适合整理模板文件、调试页面结构和压缩生产环境 HTML 输出。例如把压缩成一行、无缩进的 HTML 重排为带缩进的层级结构，并修正标签配对，方便阅读与维护。格式化后再配合代码评审，标签层级一目了然，能更快发现遗漏的闭合标签或属性冗余。
空白在被保留的元素里是内容而非排版，识别这类元素是格式化的第一道判断。原样展示文本的元素内部的空格、换行与制表符都会原样呈现，任何重排都会改变页面上看到的内容；而这些元素往往含有代码或诗歌一类对排版敏感的文本，改动造成的破坏尤其隐蔽。因此格式化应当跳过这些区域的内部，只在它们之外调整缩进。
行内元素之间的空白会参与渲染，这一点与块级元素完全不同。两个行内元素之间的换行在渲染时会变成一个空格，因此把标签重排到不同行会让原本紧贴的两个词之间多出一个间隙，从而改变版式。因此在处理包含行内元素的片段时，应当把整段视为不可随意重排的整体，或使用明确的注释来消除空白。
属性上的引号与自闭合写法需要在格式化前后保持一致，因为不同写法在解析与后续处理中的行为并不相同。属性值除引号外还有不加引号的写法，在含特殊字符时会失效；而某些空元素在严格语境下要求自闭合。因此格式化工具不应当擅自改写这类写法，保持原样比统一风格更重要。
模板语法与自定义标签会给格式化带来额外风险，因为它们的内容规则由框架定义而非标准定义。框架里常见的条件与循环标记会与普通标签混排，部分框架还把结构语义放在属性里，缩进规则与标准不同；若按标准规则重排，可能改变模板的行为。因此面对含模板语法的文件，应当选用能识别该框架的实现。
格式化的目的决定了应当改到什么程度，这需要在动手前明确。只为提升可读性时，只调整元素之间的缩进是安全且足够的；而若要统一属性引号、排序属性或合并空格，就属于风格规范的范畴，需要按团队的约定执行，并且往往要配套自动检查，否则不同人格式化出来的结果仍会不一致。
最后，格式化的产物必然产生大面积差异，因此应当与内容改动分开提交。把格式化与功能改动混在一次提交里，会让人无法看清真正的改动点，审查与回退都会变得困难；而单独提交格式化可以一次完成，后续的改动差异也会干净。这是使用任何格式化工具时都应当遵循的习惯。
实现原理
格式化按标签嵌套重排。与 XML 相比多了两类空白敏感区：预格式化元素内部保留空白，行内元素之间的空白会被渲染为一个空格——因此把两个行内元素换行会让它们之间多出一个可见空格，这是「格式化后间距变了」的常见原因。
<span>a</span><span>b</span>保留同行 → 渲染为 "ab"｜换行缩进 → 渲染为 "a b"（多出一个空格）本页实测数据
| 修复：pre 内空白被压缩 | <pre> keep </pre> 被输出成 <pre>keep</pre>——pre 的语义就是原样保留空白，压缩后代码块与 ASCII 图整体走形。现在 pre / textarea 走原样输出（连标签一起保留） |
|---|---|
| 结构与属性 | <div class="a"><p>hi</p></div> 保持嵌套与属性引号，缩进 2 空格 |
| 空元素 | <img src="x.png"><br> 保持为 <img> / <br>，不擅自闭合成 <img /> |
| 实体不二次转义 | <p>a & b</p> 输出仍是 &，没有变成 &amp;（这是最常见的双重转义 bug） |
HTML 美化的两难在空白该不该动（本页 1 处缺陷即由此而来）：普通标签之间可以随意加换行缩进，但 pre、textarea、以及 display:pre 的上下文里空白本身就是内容，动一下就改变渲染结果。本页原先走统一分支把文本 trim 掉，代码块会整体走形——现在对这两个标签原样输出。另一处经典坑是实体二次转义：把 & 再转一次就成了 &amp;，页面上会直接显示 & 而不是 &；本页实测未发生。使用提醒：格式化会改变文本节点里连续空格的显示（除非在 pre 内），依赖空格对齐的排版应先确认效果再替换原文件。
使用方法
- 打开「HTML 格式化工具」
- 选择源格式与目标格式
- 根据需要调整输出选项
- 点击「转换」按钮，结果实时显示
- 复制或导出结果
使用场景
- 标签嵌套检查 — 把压缩或自动生成的 HTML 展开为带缩进的层级，快速发现遗漏的闭合标签与错误嵌套。
- 模板整理 — 格式化 HTML 模板文件，使标签结构清晰，提升代码可维护性。
- 代码审查 — 在代码审查前格式化 HTML，使差异对比更清晰。
- 调试响应式结构 — 把后端渲染或模板引擎输出的一行 HTML 展开，快速检查嵌套与闭合问题。
- 发布前端压缩 — 将 HTML 压缩成单行，去掉多余空白，缩小推送体积。
常见问题
格式化会影响 HTML 功能吗？
不会。格式化只调整缩进和换行，不会改变 HTML 的结构、属性或功能。
支持 HTML5 特性吗？
支持。DOMParser 支持 HTML5 标签和特性，包括语义化标签、自定义元素、SVG 等。
我粘贴的 HTML 会泄露或被保存吗？
不会。格式化完全在你的本地浏览器内用 DOMParser 完成，处理过程中不会发起任何网络请求，代码不会离开你的设备，也不会被存储或发送到服务器。
script 和 style 里的内容会被重组吗？
不会。这两种是原始文本元素，内部内容保持原样不缩进，避免破坏 JS 或 CSS 的语义。
可以修复错误的标签嵌套吗？
DOMParser 会按浏览器规则自动补齐/修正标签配对并重新输出层级，因此大多数常见嵌套错误在格式化后会被纠正。
支持压缩模式吗？
支持。切换后移除缩进、多余空白与换行，生成紧凑的单行 HTML，适合放入生产构建产物。
格式化后 HTML 结构变了、页面显示异常？
格式化只应调整缩进与换行，不改标签结构。若页面异常，检查两点：是否把 <pre> 内的内容也重排了（pre 中的空白是有意义的）；内联元素之间插入换行会产生多余空格（如 <a> 与文字之间）。这两类内容建议排除在格式化外。
模板语法（Vue/blade 的 {{ }}、@if）被打乱了？
HTML 格式化器把模板指令当普通文本处理，跨行重排可能拆散指令与它的参数。模板文件建议用对应框架的专用格式化器（Prettier 带 Vue/Blade 插件），本工具适合纯 HTML 片段与静态页面。