HTML 格式化工具
什么是 HTML 格式化？
HTML 格式化会把压缩、混乱或难以阅读的标记整理成缩进一致、层级清楚、换行合理的代码。它能提升审查、调试、教学、交接和维护效率，尤其适合查找未闭合标签、错误嵌套、过长属性列表或生成代码中不易发现的问题。生产环境有时需要相反操作：压缩会移除多余空格、注释和换行，减少传输体积。这个工具可以在可读性和紧凑输出之间切换，但不会自动修复语义结构、无障碍问题、失效链接、不安全嵌入内容或框架模板错误，这些仍需要单独验证。
使用方法
使用方法
- 在左侧输入框中粘贴或输入 HTML 代码
- 选择缩进大小和换行行宽
- 点击「格式化」美化代码，或点击「压缩」减小体积
- 在右侧查看格式化后的代码（带语法高亮）
- 点击「复制」复制到剪贴板
选项说明
快捷键
- Ctrl + Enter格式化
- Ctrl + Shift + C复制结果
格式化技巧
- 格式化可以帮助发现错误的嵌套或可疑的内联脚本，但它不会清理 HTML 也不会让不安全的标记变得安全。
- 仅对用于发布的代码进行压缩。保留可读的源码以便审查、对比差异和进行无障碍检查。
使用场景
技术原理
HTML 格式化器遵循 WHATWG HTML 标准的树构建算法。字节流先进行解码（通常按 meta charset 或 BOM 指定的 UTF-8），词法分析器依次处理数据状态、RCDATA、RAWTEXT、script-data 以及 §13.2.5 中定义的多种属性状态，树构建阶段通过插入模式状态机（initial、before html、in head、in body、in table、in select 等）构建 DOM。解析器本身就是容错设计的：未闭合的 <p> 在遇到块级元素时会自动关闭，多余的 </tr> 会被忽略，位置错误的 <table> 会通过 foster parenting 机制重新挂载。浏览器级解析器通过 new DOMParser().parseFromString(src, 'text/html') 暴露此能力；Node 端工具则使用 parse5（WHATWG 参考实现）、htmlparser2 或 cheerio。 重排打印时遍历生成的树，按元素类别进行序列化。空元素——area、base、br、col、embed、hr、img、input、link、meta、source、track、wbr——在 HTML5 中不接受闭合标签（XHTML 的自闭合 /> 允许但非必需）。块级容器（div、section、article、header、footer、nav、main、ul、ol、li、table）独占一行，按 depth*indent 空格缩进；短语/行内内容（span、a、strong、em、code）保持内联，因为 CSS white-space: normal 会将连续空白折叠为单个字符。两类元素必须原样保留：<pre> 和 <textarea> 具有 white-space: pre 语义，其前导换行会被解析器消费；<script> 和 <style> 的内容属于 RAWTEXT，重新缩进会改变运行时行为——它们通常交给 JS 或 CSS 子格式化器处理后再嵌入。 属性序列化会规范化引号风格（单引号/双引号），并通过命名字符引用 &、<、>、" 和数字引用 ' 重新编码内嵌分隔符。属性顺序在 DOM 中无意义，因此格式化器通常采用稳定排序（id、class，然后按字母顺序）。超过配置的 printWidth 时触发换行：属性逐行拆分，闭合 > 可以独占一行（prettier-plugin-html 的 bracketSameLine: false）或紧贴最后一个属性。压缩则执行相反操作——移除块级标签间的空白、剥离注释（保留 IE 条件注释 <!--[if），并去掉属性值匹配 [A-Za-z0-9._-]+ 的引号。两种操作对输入长度均为 O(n)。
- 解析器：浏览器中通过 DOMParser('text/html') 使用 WHATWG HTML 树构建算法（§13），Node 端使用 parse5/htmlparser2/cheerio；插入模式状态机处理缺失/错位标签和 foster parenting。
- 空元素（无结束标签）：area、base、br、col、embed、hr、img、input、link、meta、source、track、wbr——HTML 现行标准共 14 个元素。XHTML 自闭合 /> 被容忍但多余。
- 保留空白的元素：<pre> 和 <textarea> 具有 CSS white-space: pre 语义，会消费一个前导换行；其内部字节永远不会被重新缩进，否则可见输出会改变。
- RAWTEXT 上下文：<script> 和 <style> 的内容不是 HTML——交给 JS/CSS 子格式化器处理（或原样保留）。在正则或字符串字面量内部重新缩进原始文本会破坏运行时语义。
- 属性规范化：选择引号风格（单引号/双引号），用五个命名引用（&、<、>、"、'）重新编码内嵌分隔符，应用稳定排序（id、class，然后按字母顺序），因为 DOM 中属性顺序无意义。
- 超过 printWidth 时换行（通常 80/100/120）：属性逐行拆分，闭合 > 独占一行或紧贴最后一个属性，与 prettier-plugin-html 的 bracketSameLine 选项行为一致。
- 压缩：折叠标签间空白，剥离注释（保留 <!--[if IE]> 条件注释），移除可选结束标签（</li>、</p> 后跟兄弟元素时），并去掉匹配 [A-Za-z0-9._-]+ 的属性引号；往返操作复杂度为 O(n)。
示例
压缩 HTML → 格式化（2 空格缩进）
输入:
<div class="card"><h2>Title</h2><p>Body text</p></div>
Formatted:
<div class="card">
<h2>Title</h2>
<p>Body text</p>
</div>格式化 → 压缩（生产部署）
Source (412 bytes):
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
Minified (96 bytes, -77%):
<nav><ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li></ul></nav>属性较多时自动换行
输入:
<input type="email" id="user-email" name="email" placeholder="you@example.com" required autocomplete="email">
Formatted (超过 80 字符自动换行):
<input
type="email"
id="user-email"
name="email"
placeholder="you@example.com"
required
autocomplete="email"
>保留自闭合标签和行内内容
输入:
<p>Click <a href="/docs">here</a> for help.<br><img src="icon.png" alt=""></p>
Formatted (行内同级元素保留在同一行):
<p>
Click <a href="/docs">here</a> for help.
<br>
<img src="icon.png" alt="">
</p>常见问题
它会格式化哪些内容？
HTML 标记本身：缩进、属性排布、空行处理，以及（可选）按指定列宽换行。不会改变页面渲染结果——页面看起来完全一样，只是源代码更易读。
<pre>、<textarea> 和 <script> 块会被破坏吗？
不会。pre、textarea、code、script 中的空白具有渲染意义（会显示在页面上），格式化器会原样保留。其他元素的空白则会被规整化。
为什么我的自闭合标签被改写了？
在 HTML5 中，<br/>、<img/>、<hr/> 和 <br>、<img>、<hr> 等价（不强制要求斜杠）。格式化器可能会统一为某一种风格。在 XHTML、JSX、Vue 模板中，请配置格式化器保留末尾斜杠。
它会校验 HTML 吗？
不会。它只对你粘贴的内容做格式化。校验请用 W3C Validator 或浏览器开发者工具。未闭合的标签、引号不匹配等问题会原样保留。
HTML 会被上传吗？
不会。格式化在浏览器中完成，粘贴的 HTML 不会经过网络。
它能压缩 HTML 吗？
如果存在压缩模式则可以。HTML 压缩会去除标签之间的空白，合并文本中连续的空格，并删去可省略的闭合标签。结果不便阅读但体积更小，适合生产环境。
内嵌的 CSS 和 JS 怎么处理？
如果工具支持，<style> 和 <script> 中的内容通常会调用各自的 CSS、JS 格式化器。否则会原样保留内部内容，避免破坏语法。