HTML美化器
美化HTML代码
HTML美化器是什么
用 js-beautify 把压缩成一行的 HTML 重新缩进排版：默认 2 个空格缩进，内层元素也缩进。适合阅读别人压缩过的页面源码、对比两段结构的差异，或者把从浏览器复制出来的 DOM 整理干净再贴进文档。
所有计算都在你的浏览器本地完成，输入的内容不会上传到服务器。
怎么用HTML美化器
- 在上方文本框粘贴 HTML，输入框默认 8 行高
- 也可以直接在输入框里执行粘贴（Ctrl+V）：开启的 paste-html 会优先取剪贴板里的 HTML 源码而不是纯文本
- 缩进后的结果实时出现在下方输出框，按 html 语法高亮
- 点输出框上的复制按钮取走，或用下载按钮导出成 output.htm
示例
输入
<div><p>hi<span>inline</span></p><pre>a
b</pre></div>输出
<div>
<p>hi<span>inline</span></p><pre>a
b</pre>
</div>pre 与 span 属于 unformatted 标签，内容保持原样不拆行
常见问题
格式化会改变页面的渲染效果吗？
有可能。HTML 里连续空白会折叠成一个空格，但换行本身会影响行内元素之间的间距；被 unformatted 保护的 pre 内容不受影响，其余结构的换行可能让间距变化。
内联的 CSS 和 JS 会一起美化吗？
不会。它只处理 HTML 标签结构，<style> 和 <script> 里的代码保持原样，需要单独用对应的美化工具。
为什么粘贴进来的是网页的富文本而不是纯文字？
这个输入框开启了 paste-html，从网页里复制内容再粘贴时，取的是剪贴板中的 text/html 分支，这样能拿到带标签的源码。
HTML 内容会上传到服务器吗？
不会。js-beautify 在浏览器里执行，你粘贴的页面源码不会离开本机。
小提示
- code、pre、em、strong、span 这五个标签被写进了 unformatted 列表，它们的内容不会被拆行：所以 <pre> 里的换行原样保留，<span>内联</span> 也不会被撑成多行
- 它只负责缩进，不做标签闭合校验。少写了一个结束标签照样能给你缩进输出，别拿它当 HTML 检查器用
- 缩进固定是 2 个空格，页面没有 Tab 或 4 空格的选项，需要 4 空格只能格式化后再批量替换