HTML 格式化和美化工具

粘贴 HTML，点击“格式化”得到缩进统一、整洁的代码，或点击“压缩”减小体积。下面的示例是一封被挤成五行长代码的订单邮件。

输入（761 字节）

输出

如何格式化 HTML

  1. 把 HTML 粘贴到输入编辑器（也可以保留示例，看看效果）。
  2. 选择项目使用的缩进方式，以及长行在多少个字符处换行。
  3. 点击 格式化。在输出面板复制或下载结果。

示例

  • 被压成几行的邮件模板。 邮件编辑器导出的代码常常只有寥寥几行超长代码。以上面的示例为例，格式化会把挤在五行里的约 700 个字符整理成带缩进的文档，表格行、按钮和脚本都一目了然。
  • 从浏览器复制来的代码。 从开发者工具或“查看网页源代码”里拿到的代码保留着原来的缩进，而且往往不统一。用 2 个空格格式化一遍，再和你的版本做 diff 就好读多了。
  • 发布静态页面。 上传落地页，或把 HTML 粘贴到有长度限制的 CMS 字段之前，压缩功能会去掉注释和空白。每个面板上方的字节数会显示你省下了多少。

HTML 格式化常见问题

我的代码会发送到服务器吗？

不会。格式化用开源库 js-beautify 在浏览器里完成，压缩则由本页的一个小函数完成。不会上传或保存任何内容。

HTML 里的 CSS 和 JavaScript 也会格式化吗？

会。<style> 和 <script> 标签里的代码会用同一个库的 CSS 和 JavaScript 美化器缩进。行内 style 属性保持原样。

格式化会把页面弄坏吗？

它只修改标签之间以及 <style> 和 <script> 内部的空白。<pre> 和 <textarea> 的内容从不改动。行内元素之间的空白（例如两个 <span> 标签之间）可能影响显示，格式化工具会把它们留在同一行。

压缩会去掉什么？

注释、换行、连续的空格，以及块级标签之间的空白。它不会重命名任何东西，不会删除可选标签，也不会改写你的 CSS 和 JavaScript，所以页面的渲染结果和之前完全一样。

HTML 格式化和 HTML 美化有什么区别？

实际上没有区别。两个说法指的都是重新缩进代码，让每个嵌套元素按正确层级各占一行。本页可以做这件事，也能一键做相反的操作（压缩）。