什么是 HTML 格式化？

HTML 格式化工具（也称为 HTML 美化工具或 HTML 整理工具）是一种为 HTML 标记添加一致缩进、换行和间距的工具，使其嵌套结构清晰可见。浏览器在渲染 HTML 时会忽略空白字符，因此写在单行的文档与精心缩进的文档渲染结果完全相同。区别完全在于人的阅读体验：格式化后的 HTML 更易于阅读、调试和维护。

HTML 规范（由 WHATWG 以 HTML Living Standard 形式维护）定义了 110 余个元素，每个元素都有其内容模型。块级元素（如 <div>、<section> 和 <article>）通常从新行开始，并对其子元素进行缩进。空元素（如 <br>、<img> 和 <input>）没有结束标签，也没有需要缩进的子元素。好的格式化工具能理解这些区别，按规则应用缩进，而不是在每个标签后盲目添加空白。

格式化在开发阶段最为重要。压缩或机器生成的 HTML、CMS 平台输出的内容、以及从浏览器开发者工具复制的标记，通常都是密集的单行文本。缺乏适当缩进时，找到缺失的结束标签或追踪深层嵌套结构会耗费大量时间。HTML 格式化工具能一步将这堵文字墙转换为缩进整齐、结构清晰的树形视图。

为什么使用这款 HTML 格式化工具？

粘贴任意 HTML，立即获得正确缩进的输出。无需安装插件，无需编写配置文件，无需创建账号。

⚡

即时格式化

输出随输入实时更新。粘贴任意来源的压缩 HTML，无需等待构建步骤或命令行工具，立即查看缩进结果。

🔒

隐私优先处理

所有格式化操作均在浏览器中通过 JavaScript 完成。您的 HTML 不会离开本机，因此粘贴包含 API 密钥、令牌或内部 URL 的标记也是安全的。

🎯

可配置缩进

一键在 2 个空格和 4 个空格缩进之间切换。格式化工具会将您的选择一致应用到每个嵌套层级。

📋

一键复制

单击按钮即可将格式化输出复制到剪贴板，直接粘贴到编辑器、PR 审查或文档中。

HTML 格式化工具使用场景

前端开发

在提交到版本控制前格式化 HTML 模板。一致的缩进可减少拉取请求中的差异噪音，使代码审查更高效。

后端模板调试

Django、Rails 或 PHP 等框架输出的服务端渲染 HTML 通常没有缩进。将渲染输出粘贴到此处，验证嵌套结构并找出未闭合的标签。

DevOps 与 CI 流水线

验证构建工具生成的 HTML 结构是否正确。在目视检查前，对静态站点生成器或 HTML 邮件构建工具的输出进行格式化。

质量保证与测试

比较测试运行之间 HTML 输出的格式化快照。适当的缩进使对比两个版本页面时的结构差异一目了然。

数据工程

网页抓取流水线会产生需要检查的原始 HTML。将抓取的页面格式化，在编写提取选择器前先理解其 DOM 结构。

学习 HTML

学员可以粘贴任意网站的源代码，观察元素如何相互嵌套。格式化后的树形视图使标签之间的父子关系清晰易懂。

HTML 缩进规则

HTML 格式化工具对每种元素类型的处理方式取决于其内容模型。下表列出了常见元素在 2 个空格和 4 个空格设置下的缩进方式。两种设置在浏览器中的渲染效果完全相同，区别仅在于可读性。

标签	元素类型	2 个空格缩进	4 个空格缩进
<div>	Block element	New line, indent children	New line, indent children
<span>	Inline element	New line, indent children	Inline with parent text
<br>	Void element	New line, same level	New line, same level
<img>	Void element	New line, same level	New line, same level
<!-- -->	Comment	New line, same level	New line, same level
<!DOCTYPE>	Document type	First line, no indent	First line, no indent
<script>	Script block	New line, preserve inner	New line, preserve inner
<pre>	Preformatted	New line, preserve inner	New line, preserve inner

格式化工具 vs. 压缩工具 vs. 代码检查工具

这三种工具都作用于 HTML，但用途不同。格式化与压缩是相反的操作；代码检查工具在不改变空白的情况下检查错误。

格式化工具（本工具）

添加缩进和换行，使 HTML 具有可读性。不改变 DOM 结构，不删除任何内容。输出在浏览器中的渲染效果与输入完全相同。

压缩工具

删除空白、注释和可选的结束标签以减小文件体积。与格式化相反。用于生产构建，不适合阅读或编辑。

代码检查工具（HTMLHint / W3C）

检查 HTML 中的错误，如缺少 alt 属性、重复 ID 或已废弃标签。报告问题，但不改变缩进或格式。

代码示例

如何在主流语言和工具中以编程方式格式化 HTML：

JavaScript (js-beautify)

import { html as beautify } from 'js-beautify'

const ugly = '<div><p>Hello</p><ul><li>One</li><li>Two</li></ul></div>'

const formatted = beautify(ugly, {
  indent_size: 2,
  indent_char: ' ',
  wrap_line_length: 80,
  preserve_newlines: false,
})
// → <div>
// →   <p>Hello</p>
// →   <ul>
// →     <li>One</li>
// →     <li>Two</li>
// →   </ul>
// → </div>

Python (BeautifulSoup)

from bs4 import BeautifulSoup

ugly = '<div><p>Hello</p><ul><li>One</li><li>Two</li></ul></div>'

soup = BeautifulSoup(ugly, 'html.parser')
print(soup.prettify(formatter='minimal'))
# → <div>
# →  <p>
# →   Hello
# →  </p>
# →  <ul>
# →   <li>One</li>
# →   <li>Two</li>
# →  </ul>
# → </div>

Go (goquery + x/net/html)

package main

import (
    "bytes"
    "fmt"
    "golang.org/x/net/html"
    "strings"
)

func main() {
    ugly := "<div><p>Hello</p></div>"
    doc, _ := html.Parse(strings.NewReader(ugly))

    var buf bytes.Buffer
    html.Render(&buf, doc)
    fmt.Println(buf.String())
    // renders normalized HTML — pair with indent logic for pretty output
}

CLI (Prettier)

# Format a single file in place
npx prettier --write index.html

# Format and print to stdout (pipe-friendly)
npx prettier --parser html index.html

# Format with 4-space indentation
npx prettier --tab-width 4 --parser html index.html

# Format HTML from stdin
echo '<div><p>Hello</p></div>' | npx prettier --parser html

常见问题

HTML 格式化与 HTML 验证有什么区别？

格式化是添加缩进和换行，使标记具有可读性。验证则检查标记是否符合 HTML 规范，报告缺少必要属性或元素嵌套错误等问题。格式化工具不修复错误；验证工具不改变空白。

格式化 HTML 会影响页面渲染效果吗？

大多数情况下不会。浏览器在渲染时会将连续的空白字符折叠为单个空格。例外情况包括：设置了 white-space: pre 或类似 CSS 规则的元素，以及 <pre> 和 <textarea> 元素，在这些元素中空白字符是有意义的。良好的格式化工具会完整保留这些元素的内容。

HTML 缩进应该用几个空格？

2 个空格和 4 个空格都很常见。Google 的 HTML/CSS 风格指南推荐 2 个空格。Prettier 格式化工具默认也使用 2 个空格。4 个空格与 Python 的 PEP 8 规范一致，部分团队为了跨语言统一而选择 4 个空格。选定一种并通过格式化工具或编辑器配置强制执行即可。

可以格式化包含内嵌 JavaScript 或 CSS 的 HTML 吗？

本工具格式化 HTML 结构（标签和属性）。内联 <script> 和 <style> 块保持原样不变。如需同时格式化内嵌的 JavaScript 和 CSS，请使用 Prettier 等专用格式化工具，它可以在单次处理中解析和格式化三种语言。

HTML 中制表符与空格之争还存在吗？

大多数 HTML 风格指南和格式化工具默认使用空格。2023 年 Stack Overflow 开发者调查显示，约 55% 的受访者在 Web 开发中使用空格。制表符的优势在于可以让每位开发者在编辑器中设置自己偏好的视觉宽度。两种方式均可行；项目内部的一致性比选择本身更重要。

为什么格式化后的 HTML 看起来不同了？

格式化工具添加了原始标记中没有的空白字符（空格和换行符），这改变了源代码的外观，但不影响渲染结果。如果在浏览器中看到视觉差异，通常是由于内联元素之间添加的空白字符产生了额外的空格，可通过 CSS 解决（在父元素上设置 font-size: 0，或使用 flexbox 布局）。

如何在团队中统一 HTML 格式化规范？

在 CI 流水线中使用自动化格式化工具。Prettier 支持 HTML，可通过 Husky 或 lint-staged 作为 pre-commit 钩子运行。在仓库中添加 .prettierrc 配置文件，指定 tabWidth、printWidth 和 htmlWhitespaceSensitivity。这样每次提交都将遵循相同的格式化规则，与每位开发者的编辑器设置无关。

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

两者是相同的操作。「格式化工具」和「美化工具」都是指为 HTML 标记添加缩进和换行。部分工具使用「美化」（js-beautify），另一些使用「格式化」（Prettier）。输出结果相同：缩进正确、易于阅读的 HTML。「Pretty-print」（美观打印）是文档和搜索查询中常用的另一个同义词。

HTML 格式化工具