Monu Tools

HTML 格式化

以块级感知的缩进美化 HTML,或将其压缩。pre、textarea、script 和 style 的内容会被保留。

如何使用 HTML 格式化

  1. 01

    将你的 HTML 粘贴到输入框。

  2. 02

    选择美化以缩进它,或压缩以压缩它。

  3. 03

    选择缩进大小,然后复制结果。

What the HTML formatter does

This is an HTML formatter that beautifies markup with block and inline aware indentation, or minifies it by collapsing whitespace and stripping comments. You pick the indent size when beautifying.

Beautifying indents elements according to how they nest, so the structure of a document, which elements contain which, becomes obvious. That makes hand-written or generated HTML far easier to read and debug.

Both beautify and minify run entirely in your browser, so your markup never leaves your device.

Elements it leaves untouched

It deliberately leaves the contents of pre, textarea, script and style untouched, because whitespace inside those elements is significant: reformatting them would change preformatted text, what users type, or the meaning of your code.

How minifying works

Minifying removes comments and collapses runs of whitespace, which trims the file size browsers have to download. It is most useful as a build step for production pages.

Why it keeps a space between tags

The minifier keeps a single space between tags rather than removing it entirely, because whitespace between inline elements is actually rendered, and dropping it can shift your layout. This caution avoids the subtle visual bugs aggressive minifiers can cause.

常见问题

美化 HTML 有什么作用?

它根据元素的嵌套和结构进行缩进,同时保持 pre、textarea、script 和 style 的内容不变,因为那里的空白是有意义的。

HTML 压缩如何工作?

它移除注释并将连续空白合并为单个空格。它会保留标签之间的单个空格而非移除,因为内联元素之间的空白会被渲染,移除它可能改变布局。

我的 HTML 会发送到服务器吗?

不会。美化和压缩都完全在你的浏览器中运行,因此你的标记永远不会离开你的设备。

来源

嵌入此工具

将此工具添加到你自己的网站。复制下方代码片段即可,它会自动保持最新。

<iframe src="https://monu.tools/embed/zh/html-formatter" width="100%" height="640" style="border:1px solid #e5e5e5;border-radius:12px;max-width:680px" loading="lazy" title="Monu Tools"></iframe>

相关工具