HTML美化器

免费在线 HTML美化器和格式化工具。立即格式化压缩或混乱的 HTML，具有适当的缩进、标签对齐和属性整理。客户端处理 — 您的代码永远不会离开浏览器。

HTML美化器

🔒 100% 客户端处理 — 您的代码永远不会离开浏览器

快速示例

⚡ 压缩过的 HTML 🔀 混乱的缩进 📐 语义化布局 📝 表单元素

输入 HTML

输出

缩进:

排序属性

移除注释

保留内联元素

⚠ 标签警告

总标签数

唯一元素

最大深度

属性数

输入 (字节)

输出 (字节)

⟨/⟩ 标签细分

大小变化

', messy: '\n\n\n Blog Post\n \n\n \n

Understanding Flexbox

\n Jane Doe\n January 15, 2026\n

Flexbox is a powerful CSS layout module that makes it easy to design\n flexible responsive layout structures.

Key Concepts

Flex Container
Flex Items
Main Axis vs Cross Axis
Flex Wrap

\n
Flexbox changed how we think about CSS layouts forever.
\n

Read more about CSS Grid for two-dimensional layouts.

\n \n', semantic: '\n\n\n \n \n Semantic HTML5 Layout\n\n\n \n

Article Title

Published on March 7, 2026

Introduction

This article demonstrates semantic HTML5 elements that improve accessibility and SEO.

HTML5 semantic elements diagram — Semantic elements provide meaning to the document structure.

\n \n \n

\n \n\n', form: 'Registration Form

' }; function hbLoadExample(key) { document.getElementById('htmlInput').value = HB_EXAMPLES[key]; document.getElementById('htmlOutput').value = ''; hbHideStats(); } /* ── Utility Functions ───────────────────── */ function hbClearInput() { document.getElementById('htmlInput').value = ''; document.getElementById('htmlOutput').value = ''; hbHideStats(); } function hbPasteFromClipboard() { navigator.clipboard.readText().then(function(text) { document.getElementById('htmlInput').value = text; }).catch(function() {}); } function hbCopyOutput() { var text = document.getElementById('htmlOutput').value; if (!text) return; var btn = document.getElementById('hbCopyBtn'); navigator.clipboard.writeText(text).then(function() { btn.classList.add('copied'); btn.textContent = '✓ 已复制'; setTimeout(function() { btn.classList.remove('copied'); btn.textContent = '\u29C9 复制'; }, 1500); }).catch(function() {}); } function hbDownloadOutput() { var code = document.getElementById('htmlOutput').value; if (!code) return; var blob = new Blob([code], { type: 'text/html' }); var a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'beautified.html'; a.click(); URL.revokeObjectURL(a.href); } function hbHideStats() { document.getElementById('hbStatsRibbon').classList.remove('visible'); document.getElementById('hbTagBreakdown').classList.remove('visible'); document.getElementById('hbDiffBar').classList.remove('visible'); document.getElementById('hbWarnings').classList.remove('visible'); } /* ── HTML Element Classifications ─────────── */ var VOID_ELEMENTS = ['area','base','br','col','embed','hr','img','input','link','meta','param','source','track','wbr']; var INLINE_ELEMENTS = ['a','abbr','acronym','b','bdo','big','br','button','cite','code','dfn','em','i','img','input','kbd','label','map','object','output','q','samp','select','small','span','strong','sub','sup','textarea','time','tt','u','var']; var RAW_TEXT_ELEMENTS = ['script','style']; var PRESERVE_ELEMENTS = ['pre','code','textarea','script','style']; /* ── HTML Beautifier Engine ──────────────── */ function hbTokenize(html) { var tokens = []; var i = 0; var len = html.length; while (i < len) { // Comment if (html.substr(i, 4) === '', i + 4); if (end === -1) end = len - 3; tokens.push({ type: 'comment', value: html.substring(i, end + 3) }); i = end + 3; } // DOCTYPE else if (html.substr(i, 9).toUpperCase() === '', i); if (end === -1) end = len - 1; tokens.push({ type: 'doctype', value: html.substring(i, end + 1) }); i = end + 1; } // CDATA else if (html.substr(i, 9) === '', i + 9); if (end === -1) end = len - 3; tokens.push({ type: 'cdata', value: html.substring(i, end + 3) }); i = end + 3; } // Closing tag else if (html.substr(i, 2) === '', i); if (end === -1) end = len - 1; var tag = html.substring(i + 2, end).trim().toLowerCase(); tokens.push({ type: 'close', tag: tag, value: html.substring(i, end + 1) }); i = end + 1; } // Opening tag else if (html[i] === '<' && i + 1 < len && /[a-zA-Z]/.test(html[i + 1])) { var end = i + 1; var inQuote = false; var quoteChar = ''; while (end < len) { var ch = html[end]; if (inQuote) { if (ch === quoteChar) inQuote = false; } else { if (ch === '"' || ch === "'") { inQuote = true; quoteChar = ch; } else if (ch === '>') break; } end++; } if (end >= len) end = len - 1; var tagContent = html.substring(i + 1, end); var selfClosing = tagContent.charAt(tagContent.length - 1) === '/'; if (selfClosing) tagContent = tagContent.substring(0, tagContent.length - 1); // Parse tag name and attributes var spaceIdx = tagContent.search(/[\s\/]/); var tagName, attrStr; if (spaceIdx === -1) { tagName = tagContent.trim(); attrStr = ''; } else { tagName = tagContent.substring(0, spaceIdx).trim(); attrStr = tagContent.substring(spaceIdx).trim(); } tagName = tagName.toLowerCase(); var isVoid = VOID_ELEMENTS.indexOf(tagName) !== -1; // Parse attributes var attrs = hbParseAttributes(attrStr); tokens.push({ type: 'open', tag: tagName, attrs: attrs, selfClosing: selfClosing || isVoid, isVoid: isVoid, raw: html.substring(i, end + 1) }); i = end + 1; // Handle raw text elements (script, style) if (RAW_TEXT_ELEMENTS.indexOf(tagName) !== -1 && !selfClosing && !isVoid) { var closeTag = ''); return parts.join(''); } function hbBeautifyCode(html, opts) { var indent = opts.indent || ' '; var sortAttrs = opts.sortAttrs || false; var removeComments = opts.removeComments || false; var preserveInline = opts.preserveInline !== false; var tokens = hbTokenize(html); var output = []; var level = 0; var preserveStack = 0; function addIndent(d) { var r = ''; for (var j = 0; j < d; j++) r += indent; return r; } function isInline(tagName) { return preserveInline && INLINE_ELEMENTS.indexOf(tagName) !== -1; } function isPreserve(tagName) { return PRESERVE_ELEMENTS.indexOf(tagName) !== -1; } for (var i = 0; i < tokens.length; i++) { var token = tokens[i]; if (token.type === 'comment') { if (!removeComments) { if (preserveStack > 0) { output.push(token.value); } else { output.push(addIndent(level) + token.value); } } } else if (token.type === 'doctype') { output.push(token.value); } else if (token.type === 'cdata') { output.push(addIndent(level) + token.value); } else if (token.type === 'open') { var tag = hbBuildTag(token.tag, token.attrs, token.selfClosing, sortAttrs); if (preserveStack > 0) { output.push(tag); if (isPreserve(token.tag) && !token.selfClosing) preserveStack++; } else if (isInline(token.tag)) { // Check if previous output ends with text on the same line if (output.length > 0) { var last = output[output.length - 1]; // If last line has text content, append inline tag to same line var lastNewline = last.lastIndexOf('\n'); var lastLine = lastNewline === -1 ? last : last.substring(lastNewline + 1); if (lastLine.trim() && !lastLine.trim().match(/^<\/(div|section|article|main|header|footer|nav|aside|ul|ol|li|table|tr|td|th|thead|tbody|tfoot|form|fieldset|dl|dt|dd|details|summary|figure|figcaption|blockquote|p|h[1-6]|pre|hr)>/i)) { output[output.length - 1] = last + tag; } else { output.push(addIndent(level) + tag); } } else { output.push(addIndent(level) + tag); } if (!token.selfClosing) { // Don't increase indent for inline elements } } else { output.push(addIndent(level) + tag); if (!token.selfClosing) { if (isPreserve(token.tag)) preserveStack++; level++; } } } else if (token.type === 'close') { if (preserveStack > 0) { if (isPreserve(token.tag)) preserveStack--; output.push(''); } else if (isInline(token.tag)) { // Append closing inline tag to previous line if (output.length > 0) { output[output.length - 1] = output[output.length - 1] + ''; } else { output.push(''); } } else { level--; if (level < 0) level = 0; output.push(addIndent(level) + ''); } } else if (token.type === 'text') { if (preserveStack > 0 || token.preserve) { output.push(token.value); } else { var text = token.value; // Collapse whitespace for non-preserve context var trimmed = text.replace(/\s+/g, ' ').trim(); if (trimmed) { // Check if adjacent to inline elements var prevToken = i > 0 ? tokens[i - 1] : null; var nextToken = i < tokens.length - 1 ? tokens[i + 1] : null; var prevIsInline = prevToken && ((prevToken.type === 'open' && isInline(prevToken.tag)) || (prevToken.type === 'close' && isInline(prevToken.tag))); var nextIsInline = nextToken && ((nextToken.type === 'open' && isInline(nextToken.tag)) || (nextToken.type === 'close' && isInline(nextToken.tag))); if (prevIsInline || nextIsInline) { // Append to previous line for inline continuity if (output.length > 0) { output[output.length - 1] = output[output.length - 1] + trimmed; } else { output.push(trimmed); } } else { output.push(addIndent(level) + trimmed); } } } } } var result = output.join('\n'); // Clean up multiple blank lines result = result.replace(/\n{3,}/g, '\n\n'); return result.trim(); } function hbMinifyCode(html) { // Remove comments html = html.replace(//g, ''); // Collapse whitespace between tags html = html.replace(/>\s+<'); // Collapse internal whitespace html = html.replace(/\s+/g, ' '); // Trim return html.trim(); } /* ── Stats Calculation ───────────────────── */ function hbGetStats(html) { var stats = { totalTags: 0, uniqueTags: {}, maxDepth: 0, attrCount: 0, warnings: [], tagTypes: { block: {}, inline: {}, void_el: {}, semantic: {} } }; var SEMANTIC = ['article','aside','details','figcaption','figure','footer','header','main','mark','nav','section','summary','time']; var BLOCK = ['div','p','h1','h2','h3','h4','h5','h6','ul','ol','li','table','tr','td','th','thead','tbody','tfoot','form','fieldset','legend','blockquote','pre','dl','dt','dd','hr']; var tokens = hbTokenize(html); var stack = []; var depth = 0; for (var i = 0; i < tokens.length; i++) { var t = tokens[i]; if (t.type === 'open') { stats.totalTags++; stats.uniqueTags[t.tag] = (stats.uniqueTags[t.tag] || 0) + 1; if (t.attrs) stats.attrCount += t.attrs.length; // Classify tag if (SEMANTIC.indexOf(t.tag) !== -1) { stats.tagTypes.semantic[t.tag] = (stats.tagTypes.semantic[t.tag] || 0) + 1; } else if (VOID_ELEMENTS.indexOf(t.tag) !== -1) { stats.tagTypes.void_el[t.tag] = (stats.tagTypes.void_el[t.tag] || 0) + 1; } else if (INLINE_ELEMENTS.indexOf(t.tag) !== -1) { stats.tagTypes.inline[t.tag] = (stats.tagTypes.inline[t.tag] || 0) + 1; } else if (BLOCK.indexOf(t.tag) !== -1 || t.tag === 'html' || t.tag === 'head' || t.tag === 'body') { stats.tagTypes.block[t.tag] = (stats.tagTypes.block[t.tag] || 0) + 1; } else { stats.tagTypes.block[t.tag] = (stats.tagTypes.block[t.tag] || 0) + 1; } if (!t.selfClosing) { stack.push(t.tag); depth = stack.length; if (depth > stats.maxDepth) stats.maxDepth = depth; } } else if (t.type === 'close') { stats.totalTags++; // Find matching open tag var found = false; for (var j = stack.length - 1; j >= 0; j--) { if (stack[j] === t.tag) { // Warn about any unclosed tags above this for (var k = stack.length - 1; k > j; k--) { stats.warnings.push('未闭合的 <' + stack[k] + '> 标签'); } stack.splice(j); found = true; break; } } if (!found) { stats.warnings.push('意外的闭合标签'); } } } // Any remaining tags on stack are unclosed for (var s = 0; s < stack.length; s++) { stats.warnings.push('未闭合的 <' + stack[s] + '> 标签'); } return stats; } /* ── Display Functions ───────────────────── */ function hbShowStats(inputHtml, outputHtml) { var stats = hbGetStats(inputHtml); var inputSize = new Blob([inputHtml]).size; var outputSize = new Blob([outputHtml]).size; document.getElementById('hbStatTags').textContent = stats.totalTags; document.getElementById('hbStatUnique').textContent = Object.keys(stats.uniqueTags).length; document.getElementById('hbStatDepth').textContent = stats.maxDepth; document.getElementById('hbStatAttrs').textContent = stats.attrCount; document.getElementById('hbStatInputSize').textContent = hbFormatSize(inputSize); document.getElementById('hbStatOutputSize').textContent = hbFormatSize(outputSize); document.getElementById('hbStatsRibbon').classList.add('visible'); // Tag breakdown var grid = document.getElementById('hbTagGrid'); grid.innerHTML = ''; var types = [ { obj: stats.tagTypes.semantic, cls: 'tag-pill-semantic', label: 'semantic' }, { obj: stats.tagTypes.block, cls: 'tag-pill-block', label: 'block' }, { obj: stats.tagTypes.inline, cls: 'tag-pill-inline', label: 'inline' }, { obj: stats.tagTypes.void_el, cls: 'tag-pill-void', label: 'void' } ]; var hasAny = false; for (var t = 0; t < types.length; t++) { var keys = Object.keys(types[t].obj).sort(); for (var k = 0; k < keys.length; k++) { hasAny = true; var pill = document.createElement('span'); pill.className = 'tag-pill ' + types[t].cls; pill.innerHTML = '<' + keys[k] + '> ' + types[t].obj[keys[k]] + ''; grid.appendChild(pill); } } if (hasAny) { document.getElementById('hbTagBreakdown').classList.add('visible'); } // Warnings if (stats.warnings.length > 0) { var list = document.getElementById('hbWarningsList'); list.innerHTML = ''; // Deduplicate var unique = []; var seen = {}; for (var w = 0; w < stats.warnings.length; w++) { if (!seen[stats.warnings[w]]) { seen[stats.warnings[w]] = true; unique.push(stats.warnings[w]); } } for (var u = 0; u < unique.length && u < 10; u++) { var li = document.createElement('li'); li.textContent = unique[u]; list.appendChild(li); } document.getElementById('hbWarnings').classList.add('visible'); } // Diff bar var pct, isShrink; if (inputSize === 0) { pct = 0; isShrink = true; } else { var change = ((outputSize - inputSize) / inputSize) * 100; isShrink = change < 0; pct = Math.abs(change); } var fill = document.getElementById('hbDiffFill'); var cappedPct = Math.min(pct, 100); fill.style.width = cappedPct + '%'; fill.className = 'diff-fill ' + (isShrink ? 'shrink' : 'grow'); document.getElementById('hbDiffValue').textContent = (isShrink ? '-' : '+') + pct.toFixed(1) + '%'; document.getElementById('hbDiffBar').classList.add('visible'); } function hbFormatSize(bytes) { if (bytes < 1024) return bytes + ''; return (bytes / 1024).toFixed(1) + 'K'; } /* ── Main Actions ────────────────────────── */ function hbBeautify() { var input = document.getElementById('htmlInput').value; if (!input.trim()) return; var indentSel = document.getElementById('hbIndentSize').value; var indent; if (indentSel === 'tab') indent = '\t'; else indent = new Array(parseInt(indentSel) + 1).join(' '); var opts = { indent: indent, sortAttrs: document.getElementById('hbOptSortAttrs').checked, removeComments: document.getElementById('hbOptRemoveComments').checked, preserveInline: document.getElementById('hbOptPreserveInline').checked }; var output = hbBeautifyCode(input, opts); document.getElementById('htmlOutput').value = output; hbShowStats(input, output); } function hbMinify() { var input = document.getElementById('htmlInput').value; if (!input.trim()) return; var output = hbMinifyCode(input); document.getElementById('htmlOutput').value = output; hbShowStats(input, output); }

Embed HTML美化器 Widget

HTML美化器

HTML美化器是一个免费的在线工具，可以立即将混乱、压缩或结构不良的 HTML 重新格式化为整洁、缩进良好的代码。无论您是需要调试生产环境的标记、审阅他人的代码，还是仅仅想整理杂乱的模板，此工具都能一键搞定。所有处理均在您的浏览器中完成 —— 您的代码永远不会接触服务器。

如何使用 HTML美化器

粘贴您的 HTML 代码到左侧的输入编辑器中，或者点击快速示例按钮之一来加载示例代码。
配置您的偏好设置，使用选项栏：选择缩进大小（2 个空格、4 个空格或 Tab），切换属性排序、移除注释或保留内联元素。
点击“美化 HTML”立即格式化您的代码。输出结果将显示在右侧面板中。
查看统计栏以查看标签数量、嵌套深度、元素细分以及任何标签警告。
复制或下载结果，使用输出面板标题中的按钮。

主要功能

✦

智能缩进

正确缩进嵌套标签，同时尊重 <span>、<strong> 和 <a> 等应与周围文本保持在同一行的内联元素。

⟨/⟩

标签感知格式化

区分块级元素 (div, section)、内联元素 (span, em)、空元素 (br, img, input) 和语义元素 (header, nav, article)，进行符合上下文的格式化。

⚠

错误检测

格式化后检测未闭合标签和不匹配的嵌套，帮助您在 HTML 错误导致浏览器渲染问题之前捕获它们。

◁▷

压缩模式

一键压缩可去除 HTML 中所有不必要的空格和注释，减小文件大小，从而加快生产环境中的页面加载速度。

📊

实时统计

即时分析显示总标签数、唯一元素数、最大嵌套深度、属性计数、输入/输出大小以及可视化的标签类型细分。

🔒

100% 客户端处理

所有处理都在您的浏览器中完成。您的 HTML 永远不会被上传、存储或传输到任何服务器。保证完全的隐私。

何时需要美化 HTML

调试生产代码

压缩后的 HTML 几乎无法阅读。当您需要检查页面结构、追踪布局 Bug 或了解 CMS 如何渲染其输出时，请将压缩源码粘贴到此处，将其展开为可读的、有缩进的标记。

代码审查

一致的格式使拉取请求 (Pull Requests) 更易于审阅。在审阅前美化 HTML，以确保每个人看到的都是相同的整洁结构，使逻辑差异而非格式差异显现出来。

学习 HTML 结构

如果您正在学习 HTML 或教别人，格式良好的代码至关重要。正确的缩进揭示了元素之间的父子关系，使文档树结构在视觉上清晰可见。

清理生成的标记

所见即所得 (WYSIWYG) 编辑器、电子邮件构建器和 CMS 平台经常产生缩进不一致和属性多余的混乱 HTML。在手动编辑之前，使用此工具进行清理。

美化 vs. 压缩 HTML

方面	美化	压缩
目的	开发期间的可读性	生产环境的更小文件
空格	添加缩进和换行符	移除所有不必要的空格
注释	保留（可选移除）	移除
最适用于	调试、审阅、学习	部署、页面速度

HTML 格式化最佳实践

使用一致的缩进 — 选择 2 个空格、4 个空格或 Tab，并在整个项目中保持一致，以便在版本控制中获得清晰的差异 (diffs)。
每行一个块级元素 — 每个块级元素都应从新的一行开始，使文档结构清晰。
保持内联元素在行内 — <strong>、<em> 和 <a> 等元素应与周围文本保持在同一行，以保持可读性。
一致地排列属性 — 按字母顺序排列属性有助于团队快速找到属性并防止重复。常见的惯例是先放 id，然后是 class，最后按字母顺序排列。
使用语义元素 — 优先使用 <header>、<nav>、<main>、<article> 和 <footer>，而不是通用的 <div> 元素，以提高可访问性和 SEO。

常见问题解答

什么是 HTML 美化器？

HTML 美化器是一个在线工具，可以将混乱、压缩或缩进不良的 HTML 代码重新格式化为整洁、可读的格式，具有正确的缩进、一致的标签对齐和有序的属性布局。它使 HTML 更易于阅读、编辑、调试和维护。

使用此工具时我的 HTML 代码安全吗？

是的，非常安全。所有 HTML 格式化完全在您的浏览器中使用客户端 JavaScript 完成。您的代码绝不会被发送到任何服务器、存储或传输到任何地方。您的 HTML 完全保持私密。

美化和压缩 HTML 有什么区别？

美化将 HTML 展开为具有正确缩进和换行符的可读格式，非常适合开发和调试。压缩会移除所有不必要的空格、注释和换行符以减小文件大小，非常适合生产部署和更快的页面加载。

此工具是否能正确处理 span 和 strong 等内联元素？

是的。美化器会区分块级元素（div, section, article）和内联元素（span, strong, em, a）。文本内容中的内联元素将保持在同一行，以保留自然的阅读流，而块级元素则拥有自己的缩进行。

此工具能否检测到未闭合标签等 HTML 错误？

是的。美化后，统计面板会显示标签分析，包括任何未闭合的标签或嵌套不匹配。这有助于您发现可能导致浏览器渲染问题的常见 HTML 错误。

HTML美化器

Understanding Flexbox

Key Concepts

Article Title

Introduction

HTML美化器

如何使用 HTML美化器

主要功能

智能缩进

标签感知格式化

错误检测

压缩模式

实时统计

100% 客户端处理

何时需要美化 HTML

调试生产代码

代码审查

学习 HTML 结构

清理生成的标记

美化 vs. 压缩 HTML

HTML 格式化最佳实践

常见问题解答

什么是 HTML 美化器？

使用此工具时我的 HTML 代码安全吗？

美化和压缩 HTML 有什么区别？

此工具是否能正确处理 span 和 strong 等内联元素？

此工具能否检测到未闭合标签等 HTML 错误？

相关资源

文本修改工具:

常用工具: