实用工具
输入
结果
结果会显示在这里。服务端渲染的页面、邮件模板、爬虫抓下来的 HTML，通常都挤在一行里。这里用 js-beautify 的 HTML 格式化器重新缩进标签，并把每个内联的 <script> 和 <style> 块交给它的 JavaScript 和 CSS 格式化器处理，嵌在里面的代码也会变得可读。对空白敏感的元素会被尊重：<pre> 和 <textarea> 的内容保持原样，<b>、<a> 这类行内元素留在所在的那行文字里。
它是怎么工作的
- 过长的行按你设定的列数换行，设成 0 表示从不换行。
- 属性默认留在标签那一行，也可以每个属性一行——对齐排列，或者让结尾的 > 单独占一行。
- <head> 和 <body> 默认与 <html> 对齐，这是常见的写法；打开缩进选项会让它们多缩进一级。
你的数据去了哪里
哪也没去。本工具完全在你的浏览器里运行：你粘贴的文本由页面处理，不会传输到任何服务器，也不会写进任何日志。
本工具免费且无需登录，运行结果只存在于你当前的页面里，不会被保存到任何地方。
它要花多少
本工具完全免费，不需要登录，也不消耗积分。
常见问题
- 格式化会改变页面的显示效果吗？
- 几乎不会。块级元素之间的空白不影响布局，行内元素会留在原来那行，文字之间不会多出空隙。<pre> 和 <textarea> 里空白是可见的，这部分内容从不改动。
- 能格式化 JSX、Vue 或 Handlebars 模板吗？
- js-beautify 能识别 Handlebars 的 {{ }} 和 Django 风格的 {% %} 标签，并保持它们完整。JSX 和 Vue 单文件组件需要真正能解析它们的格式化工具，比如 Prettier，否则里面的表达式可能被排错。
- 为什么输出里的嵌套还是乱的？
- 格式化器只负责按原样重新缩进，不会修复结构。一个没闭合的 <div> 会被当作仍然打开来缩进，所以输出的缩进恰好能告诉你错在哪里。需要正式结论的话，用 W3C 验证器检查。
背后的开源项目
本工具运行在 beautifier/js-beautify 之上，以 MIT 许可发布。如果你需要在自己的程序里实现同样的能力，直接用这个库。
beautifier/js-beautify也常被称作
- html格式化
- html美化
- 在线html格式化
- html代码缩进
- html代码美化
- html排版