什么是 HTML 格式化工具？

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

如何美化压缩后的 HTML？

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

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

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

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

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

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

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

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

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

HTML 格式化工具

美化或压缩 HTML，格式化内联 CSS/JS 并预览结果。

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

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

关于 HTML 格式化工具

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

功能特性

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

如何使用 HTML 格式化工具

将你的 HTML 粘贴到输入框。
选择美化以格式化、压缩以压缩，或预览以渲染。
开关制表符以设置你的缩进风格。
从输出面板复制格式化或压缩后的 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 会被上传到任何地方吗？: 不会。所有格式化和预览渲染都在你的浏览器本地进行，因此你的标记不会离开你的设备。