HTML 美化的工作原理
美化器逐个标签读取标记，追踪每个元素的嵌套深度，然后以一致的缩进重新输出。它不会改变页面的任何渲染效果——只改变源代码的布局方式。
- 解析标签. 库将输入扫描为一系列词元（token）：开始标签、结束标签、文本内容、注释，以及 script 和 style 块的内容。带引号的属性值以及 pre 和 textarea 元素的主体被视为单一单元，因此其内部的空白保持不变。
- 追踪嵌套. 在遍历词元流时，美化器维护一个实时缩进级别。每遇到非自闭合的开始标签，级别加深一层；每遇到对应的结束标签，级别退回。这个深度决定了输出中每行前方的缩进单位数量。
- 应用选项. 缩进选择（2 个空格、4 个空格或 Tab）确定一个缩进层级的宽度。换行列数值在属性或文本超过指定列数后将长行折断。空行上限将连续多行空行折叠至您设定的数量。
- 重新输出标记. 最后，格式化器按照计算好的缩进和换行规则打印标签。如果启用了内联格式化，每个 style 块的内容将通过 CSS 格式化器处理，每个 script 块的内容将通过 JS 格式化器处理，使嵌入代码与周围的标记对齐。
为什么要美化 HTML
- 阅读压缩页面. 生产 HTML 去除了换行以节省字节。美化可以还原结构，让您找到需要的部分、发现遗漏的结束标签，并理解文档的真实嵌套方式。
- 整理不一致的模板. 经多人编辑的标记往往出现混合缩进和标签位置混乱。一次美化能将整个文件统一为单一布局，使下一次提交只显示您真正做的修改，而不是满屏的空白重排。
- 不拖慢页面加载. 大多数在线格式化工具在您打开页面时就加载整个库。本工具只在您点击「美化」或开启实时模式时才延迟加载 js-beautify，因此打开页面只消耗几千字节而非几百千字节，页面保持快速响应。
- 代码不离开您的浏览器. 整个过程完全在您的设备上运行。您的标记从不上传到服务器——当页面属于客户、包含内部 URL 或受保密协议约束时，这一点尤为重要。
常见应用场景
凡是需要阅读并非为了可读性而编写的标记时，美化 HTML 就派上用场。
- 检查线上页面：从「查看源代码」粘贴压缩源代码，找出本地无法复现的布局 bug 背后的标记。
- 清理 CMS 输出：将页面构建器导出到一行的模板重新格式化，再提交回版本库。
- 无障碍与 SEO 审查：展开文档以核查标题顺序、地标结构和 alt 属性是否符合真实 DOM。
一个实际示例
取一个压缩片段：<div><p>hi</p><span>x</span></div>。将缩进设为 2 个空格，粘贴到上方并点击美化。您将得到一个可读的代码块：<div> 独占一行，<p>hi</p> 和 <span>x</span> 各自缩进一层，匹配的 </div> 对齐在下方。将缩进切换为 Tab，每个层级从两个空格变为 Tab 字符。添加一个 <style>a{color:red}</style> 块，开启「同时格式化内联 CSS 和 JS」，规则将展开到各自缩进的行，而不是压在一行。
FAQ
这在我的浏览器中运行吗？
是的。js-beautify 库在您第一次点击「美化」或启用实时模式时延迟加载，然后缓存。您的标记不会离开页面——没有服务器往返，也没有上传。
美化会改变页面的渲染效果吗？
不会。美化器只添加和删除标签之间的空白和换行。浏览器在构建页面时会忽略这些空白，因此渲染结果完全相同。唯一需要注意的是 pre、textarea 或内联元素内部的空白敏感内容，格式化器会刻意保持不变。
内联 CSS 和 JS 开关有什么作用？
关闭时，style 和 script 块的内容与您粘贴时完全一致。开启后，每个 style 块内的 CSS 通过 CSS 格式化器处理，每个 script 块内的 JavaScript 通过 JS 格式化器处理，使嵌入代码的缩进与周围标记对齐。
「换行列数」有什么作用？
它设置超过多少列后，具有多个属性的标签或长文本会被折断到多行。设为 0 则无论多长都保持单行。设为 80 或 120，格式化器会将超过该列数的内容换行，让宽元素在窄编辑器中保持可读。
浏览器端 HTML 美化让您无需构建步骤或上传就能获得可读的标记。粘贴压缩或混乱的页面，选择缩进和换行列数，决定是否重新格式化内联 CSS 和 JS，然后复制或下载结果。代码不离开您的设备，无需账户，库只在您需要时才加载——打开本页面只花费几千字节，而不是几兆字节。