HTML 格式化与美化器，免费

什么是 HTML 格式化？

HTML 格式化（也叫「美化」或 pretty-printing）是压缩（minification）的反向操作。一个格式化器接收任何形式的 HTML（压缩过的生产环境输出、从浏览器审查器粘贴出来的、由模板引擎生成的，或者只是手写得很乱的）并以一致的缩进、块级元素之间的换行以及可预测的视觉结构重新输出。浏览器在解析时会忽略多余的空白，因此格式化只会改变源代码的样子，绝不会改变页面的渲染。为什么要这么做？因为人眼解析带缩进的层级结构比解析视觉上平铺的「标签汤」要快得多。代码评审、调试、学习 HTML 结构、把标记交给另一位开发者、对照两个版本看差异，一旦文档树从缩进就一目了然，所有这些都会变得容易得多。

格式化器真正派上用场的五种现实工作流：(1) 从浏览器「查看源代码」或 DevTools 的「Copy outer HTML」拷贝出的压缩 HTML，粘回到调试器里看；(2) 从 CMS 的 textarea 里抽出的 HTML，所见即所得编辑器输出视觉上很干净，但源代码乱糟糟；(3) 调试模板引擎（Jinja、Twig、Handlebars、ERB）的输出，渲染出来的 HTML 跟预期不一致；(4) 把自动生成的 HTML（React 服务端渲染、Pandoc、文档转换器的产出）转成可读形式以便代码评审；(5) 整理邮件模板 HTML，再提交到那些导入时可能剥掉你格式的营销平台之前先理一遍。

主要的 HTML 格式化器

js-beautify（Einar Lielmanis，自 2007 年起）是 JavaScript 生态里资格最老的格式化器，一个库就处理 HTML、CSS、JavaScript 和 JSON。它的 HTML 格式化器是 beautifier.io 公开站点背后的引擎，也是历史上「在线格式化 HTML」类网站们普遍使用的实现。Prettier（James Long，2017 年）是后来居上、主宰现代前端生态的「有主见」型格式化器；HTML 支持是发布不久后到位的。Prettier 的设计哲学是「几乎不要配置」，一种缩进风格（默认 2 空格）、一个目标行宽（printWidth: 80）、一套属性换行规则。代价是个人自由度更少，好处是团队之间不再为格式争个不停。HTML Tidy（Dave Raggett 1997 年在 W3C，现由 HTACG 维护）是开山祖师，它早于现代 Web 的格式化器场景，最初设计目的就是去清理 1990 年代末那些破旧、过时、已弃用的 HTML。Tidy 至今仍是 macOS 默认随系统出货（/usr/bin/tidy）、也随大多数 Linux 发行版而来；2026 年用得少了，但因其严谨仍受尊重。在现代工作流里，新项目的默认是 Prettier，被集成进 VS Code（HTML 文件的默认格式化器）、JetBrains 系列 IDE，以及通过 Husky + lint-staged 接入的预提交 hook。本工具是为那些「手头没在跑 Prettier 的构建管线」的场景准备的，粘贴、格式化、拷走。

缩进约定

现代 HTML 里有三种缩进风格在竞争。2 空格是当代 Web 的默认，GitHub 的 HTML/CSS 风格指南、Google HTML/CSS 风格指南、Prettier 的默认、WHATWG 的样式示例、以及 npm 上发布的大多数前端包都在用。理由是：HTML 嵌套很深（一个典型组件可能 6–10 级缩进），2 空格能让行不至于跑出 80 列宽的右边缘。4 空格是更老的 Java / Microsoft 传统，在一些遗留项目和 PHP 的 PSR-12 标准里还活着；视觉层级更清晰，代价是水平空间。Tab则受 Linux 内核社区、部分 Go 项目、以及那些主张「tab 字符让每个浏览者按自己偏好设置可视宽度」的开发者青睐。「tab vs 空格」之争比多数读者都老，赢不了；务实做法是每个项目挑一种、让格式化器去强制执行。本工具三种都提供。

行内 vs 块级元素，空白的陷阱

HTML 格式化里最大的一个坑，是块级元素与行内元素的区分。块级元素（<div>、<p>、<section>、<article>、<ul>）以段落式区块流式排布；它们之间的空白渲染为不可见，所以格式化器可以自由地在它们四周加换行和缩进。行内元素（<span>、<a>、<strong>、<em>、<code>）则随文本流动；它们之间的空白会被渲染。看 <p>Hello <strong>world</strong>!</p>：「Hello」与开启的 <strong> 之间那个空格是真实空格字符，会出现在两个词之间。如果一个朴素的格式化器把这一行折开、把 <strong> 缩进到自己的一行上，渲染结果就会默默多出可见的空白，可能读起来变成「Hello world」多一个空格。更糟的是，那些把行内元素之间空白一并剥掉的格式化器，可能把相邻的词粘在一起：「Helloworld」中间没空格。「保留行内标签」选项（本工具默认开启）会让格式化器把行内元素和它们周围的文本留在同一行上，对绝大多数真实 HTML 来说，这才是安全行为。

受保护的内容，pre、textarea、script、style

有四个 HTML 元素，其内容的空白具有语义意义，不能被重新格式化：<pre> 按写的样子显示文本，包括换行与空格；<textarea> 的初始内容保留其中空白；<script> 里的 JavaScript 语义依赖于空白（或者至少加缩进会把源破坏）；<style> 里是 CSS，该交由懂 CSS 的格式化器去重排，而不是 HTML 格式化器。生产级 HTML 格式化器（Prettier、Tidy、js-beautify）会识别这些元素，并跳过对其内部内容的重新格式化。对本工具的诚实声明：本实现是手写的，而不是套用一个生产级库；行内 vs 块级 + 受保护内容的处理，做法保守但并非完美容错。如果你把重型生产 HTML 喂给它，结果在 <pre> 块里看着不对，或破坏了某段 script，更稳妥的选择是本地用 Prettier（一条命令就能装：npm install -g prettier，然后 prettier --parser html input.html）。对一般的模板与组件级 HTML，本工具能应付常见场景。

属性与自闭合标签的约定

HTML 属性自身也有格式化选择。短的属性列表能放在一行上（<a href="/zh/about" class="link">）；长的会按一行一个换行，常见做法是把结尾的 > 也放到独立一行。Prettier 默认的 printWidth: 80 触发换行的临界值就是 80 列，这是当代约定。一些团队会强制属性顺序（class 在先、然后 id、然后 data-*、然后 ARIA、最后是事件处理器）；多数格式化器保留现有顺序而不重排，因为重排可能在一些微妙情形下改变行为（CSS 特异性、JavaScript 按类查找）。自闭合标签：HTML5 不要求空元素（<br>、<hr>、<img>、<input>、<meta>、<link>（HTML5 里一共 14 个空元素）末尾带斜杠，但 XHTML 与 JSX 要求（<br />）。格式化器或保留已有的斜杠、或去掉它（HTML5 风格）、或加上它（XHTML 友好），取决于配置。本工具尊重你的输入）源里有 <br /> 就保留，源里是 <br> 就保留为 <br>。

常见用途

• 代码审查· 在与同事分享或审阅前清理 HTML。
• 调试· 格式良好的代码能更容易地发现缺失的标签或错误的嵌套。
• 清理模板· 重新格式化由模板或构建工具生成的 HTML。
• 开发者交接· 让协作开发者更容易阅读代码。
• 学习· 通过观察缩进模式更好地理解 HTML 结构。
• 邮件模板审视。邮件模板构建器（Mailchimp、ConvertKit）经常生成带大量内联样式的 HTML，难以阅读；格式化一遍能让结构变可见，再去提交改动会更稳。

现代管线，Prettier 在保存时跑

在有构建管线的项目里，2026 年的默认做法是：编辑器里保存时 Prettier 自动跑，提交时通过预提交 hook 再跑一次。VS Code 安装扩展后默认就把 Prettier 作为 HTML 格式化器；用 Format Document（Windows/Linux 上 Shift+Alt+F，macOS 上 Shift+Option+F）触发，或在设置里启用 "editor.formatOnSave": true。JetBrains 系列 IDE（WebStorm、IntelliJ）通过 Settings → Languages & Frameworks → JavaScript → Prettier 接入。预提交 hook方面，Husky + lint-staged 会在允许提交前对每个暂存的文件跑一遍 Prettier，确保没有未经格式化的 HTML 流入仓库。CI 检查则在 PR 上跑 prettier --check，把格式漂移挡在合入之外。对那些「从别处粘过来的一次性片段」，上面这些都不沾边，这正是本工具的用武之地。长期项目要走 Prettier，本工具是为其它一切场合提供「零摩擦」选项。

隐私：为什么「只在浏览器里跑」在这里很重要

HTML 里经常装着你不愿被第三方看到的东西：内部管理后台的模板、还没发布的产品页标记、A/B 测试变体（实验假设可能就明写在 class 名里）、含个性化内容的邮件模板、占位符里塞着 PII 的客户仪表盘。服务器端的格式化器会把你的 HTML 上传到第三方服务，并留存在日志里。本工具完全在你的浏览器里通过 JavaScript 运行，点 Format 时打开 DevTools 的 Network 选项卡验证，或者页面加载完后切到离线（飞行模式），格式化照样能跑。对未发布的产品模板、内部管理页、A/B 测试变体，或任何你不愿被复制到陌生人硬盘上的 HTML，都可放心使用。

常见问题

什么是 HTML 美化？

HTML 美化通过添加缩进和换行重新格式化您的代码，让其更易读。这样更方便调试和编辑，但不会改变浏览器对 HTML 的渲染效果。

格式化会改变我的 HTML 在浏览器中的外观吗？

不会。格式化只添加空白和缩进。浏览器会忽略 HTML 中多余的空白。格式化后的 HTML 显示效果与原始版本完全一致。

什么是行内标签？

行内标签（如 <span>、<a>、<strong>）嵌入到文本中，不产生换行。「保留行内标签」选项可防止它们被换行放置，使其与内容保持在一起。

2 空格、4 空格，还是 Tab？

2 空格是当代 Web 的默认，GitHub、Google HTML/CSS 风格指南、Prettier、WHATWG 样式示例、以及大多数 npm 包都在用。4 空格在更老的 Java / Microsoft / PHP 传统里延续。Tab 受 Linux 内核与部分 Go 项目偏爱。这场争论比多数读者都老、赢不了；务实做法是匹配你项目已有的（或团队的主流）约定，让格式化器去强制执行。对没有项目上下文的一次性片段，2026 年最安全的默认值是 2 空格。

如果我已经在用 Prettier，我还需要这个吗？

大概率不需要，你编辑器里的 Prettier 集成保存时就做了同样的事，而且它具备完整的 HTML AST 感知能力，以及生产级格式化器所需的「受保护内容」处理。本工具是给你构建管线覆盖不到的场景准备的：从浏览器审查器粘出的 HTML、邮件或聊天里的片段、想要看一眼的模板引擎产出、在任何项目上下文之外的一次性格式化。长期项目工作请本地装上 Prettier；要追求零摩擦的临时活儿，本工具的形态正合适。

我的 HTML 文件会被上传吗？

不会。格式化完全在你的浏览器里通过 JavaScript 运行。你粘进来的 HTML 不会过网络，点 Format 时打开 DevTools 的 Network 选项卡验证，或者页面加载完后切到离线（飞行模式），工具照样工作。对未发布的产品模板、内部管理页、A/B 测试变体、含个性化内容的邮件模板，或任何你不愿被复制到陌生人硬盘上的 HTML，都可放心使用。

相关工具