HTML 格式化工具

HTML 格式化工具可在浏览器中实时将压缩或凌乱的标记转换为整洁、缩进规范的 HTML。粘贴一行式页面或一团嵌套标签，格式化结果会立即显示在右侧面板，缩进一致、属性排列整齐。

基于 Prettier 及其 HTML 解析器构建，因此标签、属性以及内嵌的 CSS 或 JavaScript 都会按照可靠的行业标准风格进行格式化。

常见使用场景

展开压缩页面

将单行压缩的 HTML 文档展开为可读、带缩进的标记，便于检查和编辑。

清理标记

规范化从多种来源复制的 HTML 的缩进、换行和属性间距。

审阅与学习

在重复使用之前，让页面源代码、邮件模板或生成的标记易于阅读。

如何格式化 HTML

粘贴你的标记

在左侧的输入面板中键入或粘贴 HTML。你也可以上传 .html 文件，或点击示例加载样例。

即时查看输出

在你输入时，带语法高亮的格式化标记会自动显示在右侧面板。行号和实时大小计数器让大文档更易于浏览。

调整选项

设置缩进（2、3、4、8 个空格或 Tab）、行宽、属性的换行方式，以及闭合括号的位置。输出会立即重新格式化。

复制或下载

点击复制获取结果，或点击下载将其保存为 .html 文件。使用编辑在导出前手动微调输出。

所有处理均在本地完成。你的标记完全在浏览器中格式化，绝不会上传到服务器。

功能与选项

格式化选项

这些选项可让 Prettier 的 HTML 输出贴合你偏好的标记风格。每次更改都会立即重新格式化结果。

选项	可选值	控制内容
缩进	2 · 3 · 4 · 8 空格 · Tab	每个嵌套层级所用的缩进宽度和字符。
行宽	80 · 100 · 120	在长标签和文本换行之前的目标行长。
属性	自动换行 · 每行一个	属性保持在同一行，还是每个属性单独成行。
括号	另起一行 · 同一行	多行标签的闭合 `>` 是否换到新行。

会被格式化的内容

标签与属性

一致的嵌套、整洁的属性间距，以及对自闭合和空元素的正确处理。

内嵌 CSS 与 JS

<style> 和 <script> 块内的代码会与标记一并格式化。

内置工具

实时格式化

输出随输入即时更新，带有语法高亮和行号。

上传与下载

加载本地 .html 文件，或一键导出格式化结果。

可编辑输出

将结果面板切换到编辑模式，在复制前进行手动微调。

第一次使用？点击示例加载一段刻意凌乱的页面，看它如何被即时格式化。

常见问题

HTML 格式化工具有什么作用？

它会把原始、压缩或凌乱的 HTML 重新缩进为整洁、易读的标记，间距和换行都保持一致。“HTML 格式化”和“HTML 美化”指的是同一件事——让标记易于阅读和维护。

格式化会改变页面的渲染效果吗？

不会。美化只会为可读性调整空白和缩进。标签、属性和内容保持不变，因此页面的外观和行为与之前完全一致。

我的 HTML 会被发送到服务器吗？

不会。所有格式化都在你的浏览器本地完成。你的标记绝不会被上传、记录或存储，因此格式化专有或未发布的页面也很安全。

它会格式化页面内的 CSS 和 JavaScript 吗？

会。<style> 和 <script> 标签内的代码会与周围的 HTML 一起行内格式化，使整个文档保持一致。

我可以让每个属性单独成行吗？

可以。将属性选项设为“每行一个”，即可将每个属性拆分到单独一行；或保持“自动换行”，让 Prettier 根据你选择的行宽决定。

它也会压缩 HTML 吗？

不会。本工具是美化工具——它会展开并缩进标记以提升可读性，而不是压缩它。若要为生产环境缩小页面，请使用专门的 HTML 压缩工具。

如果标记格式有误会怎样？

如果解析器无法处理输入，工具会显示描述问题的信息，而不会产生损坏的输出。修复所报告的问题后，格式化结果会重新出现。