HTML 格式化在线工具

用 Prettier 美化或压缩标记并格式化内联 CSS 和 JS 的 HTML 格式化工具。

你的 HTML 完全在你的浏览器中美化、压缩和预览——不会上传到任何服务器。

由 Udit Agarwal 开发和维护

也在清理样式表？试试 CSS 格式化工具。

关于 HTML 格式化工具

这款 HTML 格式化工具会美化或压缩原始标记，并使用 Prettier 自动格式化任何内联的 CSS 和 JavaScript。粘贴杂乱的模板输出、抓取的页面或手写标记，一步即可得到整洁、缩进一致的 HTML，或切换到压缩模式以剥离空白并为生产环境精简文档。沙盒化预览让你在禁用脚本的情况下安全渲染标记，因此嵌入的脚本绝不会执行。作为 HTML 美化和美化器工具，它专为前端开发者、QA 工程师，以及任何需要在线格式化 HTML 而无需切换上下文的人打造。所有处理都在你的浏览器本地完成，因此你的数据不会离开你的设备。可为缩进选择制表符或空格以匹配你的项目风格。

功能特性

• 用一致、可读的缩进美化 HTML
• 压缩 HTML 以移除空白并精简输出
• 通过 Prettier 格式化内联 <style> 和 <script> 块
• 沙盒化预览在禁用脚本的情况下渲染标记
• 在制表符和空格之间切换缩进
• 处理完整页面或部分标记片段
• 一键复制格式化或压缩后的输出
• 完全在你的浏览器中运行

如何使用 HTML 格式化工具

1. 将你的 HTML 粘贴到输入框。
2. 选择美化以格式化、压缩以压缩，或预览以渲染。
3. 开关制表符以设置你的缩进风格。
4. 从输出面板复制格式化或压缩后的 HTML。

示例

输入

<div   class="card"><h1>你好</h1><p>你好   世界</p></div>

输出

<div class="card">
  <h1>你好</h1>
  <p>你好 世界</p>
</div>

美化模式重新缩进标记并归一化空白。

常见错误与故障排除

• 嵌入的脚本不会在预览中运行。 — 这是有意的——预览是禁用脚本的沙盒化 iframe，让页面安全渲染。请在你自己的环境中测试交互式代码。
• 内联 CSS 或 JS 未被重新格式化。 — 请确保代码位于正确的 <style> 或 <script> 标签内；Prettier 在美化期间只格式化可识别的内联块。
• 格式有误或未关闭的标签产生了意外缩进。 — 请在源代码中关闭不匹配的标签——格式化工具会重排有效结构，但无法猜测预期的嵌套。
• 压缩后的输出难以阅读。 — 切换回美化模式；压缩旨在用于生产环境体积，而非可读性。

常见问题

什么是 HTML 格式化工具？

HTML 格式化工具是一款浏览器内工具，使用 Prettier 美化或压缩 HTML 标记、格式化内联 CSS 和 JavaScript，并在沙盒化 iframe 中预览结果。

如何美化压缩后的 HTML？

将你压缩后的 HTML 粘贴到输入框并选择美化。HTML 格式化工具会重新缩进标记，并为可读性重新格式化任何内联 <style> 和 <script> 块。

HTML 格式化工具会格式化内联 CSS 和 JavaScript 吗？

会。作为美化页面的一部分，Prettier 会自动格式化 <style> 和 <script> 块。

我既可以压缩 HTML 也可以美化它吗？

可以。切换到压缩模式以剥离空白，并为生产环境生成最小的等效标记。

我可以选择制表符而非空格吗？

可以。在 HTML 格式化工具中切换制表符选项以用制表符缩进，或保持关闭以使用空格。

格式化时我的 HTML 会被上传到任何地方吗？

不会。所有格式化和预览渲染都在你的浏览器本地进行，因此你的标记不会离开你的设备。

相关工具

• CSS / SCSS 格式化工具 — 美化或压缩 CSS/SCSS/LESS，排序属性并去除重复项。
• JS / TS 格式化工具 — 使用 Prettier 选项美化 JavaScript、TypeScript 和 JSX/TSX，或压缩纯 JavaScript。
• XML 格式化工具 — 美化、压缩和验证 XML，并在 XML ↔ JSON 之间转换。
• HTML 转义 / 反转义 — 转义和反转义 HTML 特殊字符与实体。
• Markdown 预览 — 将 Markdown 渲染为 HTML 并实时预览。
• SVG 优化工具 — 压缩 SVG：移除注释、元数据和编辑器残留，并合并空白。
• JSON 格式化工具 — 美化、压缩并验证 JSON，并定位错误位置。
• SQL 格式化工具 — 为 MySQL、PostgreSQL、SQL Server、SQLite、BigQuery 和 Oracle 格式化 SQL。

更多代码格式化工具

• XML 格式化工具 — 美化、压缩和验证 XML，并在 XML ↔ JSON 之间转换。
• SQL 格式化工具 — 为 MySQL、PostgreSQL、SQL Server、SQLite、BigQuery 和 Oracle 格式化 SQL。
• GraphQL 格式化工具 — 格式化或压缩 GraphQL 查询和模式，验证语法并提取操作。
• Dockerfile 格式化工具 — 格式化 Dockerfile 并获取最佳实践和 lint 建议。
• MongoDB 查询格式化工具 — 格式化 MongoDB shell 查询和聚合管道。
• 对比度检查工具 — 检查两种颜色之间的 WCAG 对比度以及是否通过 AA/AAA。
• Mermaid 图表渲染器 — 在浏览器中将 Mermaid 图表（流程图、时序图、甘特图）渲染为 SVG。
• SVG 优化工具 — 压缩 SVG：移除注释、元数据和编辑器残留，并合并空白。
• MongoDB 查询美化工具 — 在浏览器中美化并缩进 MongoDB 查询和 find() 语句。
• MongoDB 聚合美化工具 — 在浏览器中美化并缩进 MongoDB 聚合管道。
• MongoDB 浏览器 — 浏览 MongoDB 文档或集合样本，并推断其字段架构和类型。
• OpenAPI / Swagger 格式化工具 — 格式化并验证 OpenAPI / Swagger 规范（JSON 或 YAML），并统计路径与操作数量。

查看全部代码格式化工具 (32) · 全部工具