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-Hant/html-formatter" width="100%" height="640" style="border:1px solid #e5e5e5;border-radius:12px;max-width:680px" loading="lazy" title="Monu Tools"></iframe>

相關工具