在线 HTML 格式化工具

HTML 格式化

重排 HTML 标签与结构

输入 HTML

HTML 结果

试用 HTML 格式化案例

载入案例会替换当前输入，并显示上方的格式化结果。案例只在本页作为文本处理，不会渲染为网页或执行其中代码。

普通嵌套 HTML

<section><h2>Example</h2><ul><li>One</li><li>Two</li></ul></section>

✅ 此样例的标签按两空格缩进，并增加换行。

内嵌 script

<div><script>const message="<tag>";if(message){console.log(message);}</script><p>Done</p></div>

⚠ JavaScript 的空格和换行会改变；格式化不会执行或校验脚本。

内嵌 style

<style>.card{color:red;padding:0 4px;}@media(max-width:600px){.card{display:block;}}</style><div class="card">Hello</div>

⚠ CSS 会重新排版；复制后应检查选择器、层叠关系与实际页面。

pre 预格式化文本

<pre>  first
    second

  &lt;tag&gt;	end</pre><p>After</p>

✅ 此样例 pre 内部的空格、制表符和空行保持原样，外围标签会重新排版。

自定义元素

<user-card data-name="Ada"><span slot="name">Ada</span></user-card>

⚠ 此短样例保持原样，但未验证组件行为或渲染效果。

Vue template

<template><my-card v-if="ready" :title="name"><span>{{ name }}</span><input v-model="name" /></my-card></template>

⚠ 此模板样例保持原样；工具不编译 Vue，也不校验指令或表达式。

缺失闭合标签

<div><p>Unclosed<span>text</div>

⚠ 能生成输出且没有校验错误，但不会补全缺失的闭合标签。

行内元素空白

<p><span>A</span><span>B</span> C</p>

⚠ 此样例保持原样；对空白敏感的布局仍需在浏览器中复核。

这些案例的实测兼容性

结果只针对上面的具体样例，不代表任意文档都兼容。保留原始源码，发布前请在目标页面验证输出。

输入类型	实测结果与限制
普通嵌套 HTML	✅ 此样例的标签按两空格缩进，并增加换行。
内嵌 script	⚠ JavaScript 的空格和换行会改变；格式化不会执行或校验脚本。
内嵌 style	⚠ CSS 会重新排版；复制后应检查选择器、层叠关系与实际页面。
pre 预格式化文本	✅ 此样例 pre 内部的空格、制表符和空行保持原样，外围标签会重新排版。
自定义元素	⚠ 此短样例保持原样，但未验证组件行为或渲染效果。
Vue template	⚠ 此模板样例保持原样；工具不编译 Vue，也不校验指令或表达式。
缺失闭合标签	⚠ 能生成输出且没有校验错误，但不会补全缺失的闭合标签。
行内元素空白	⚠ 此样例保持原样；对空白敏感的布局仍需在浏览器中复核。

HTML 格式化实际改变什么，有哪些限制

粘贴 HTML，或载入编辑器下方的案例，对比两空格缩进与换行后的源码，再复制结果或下载 index.html。内嵌 JavaScript 和 CSS 也可能被重新排版。

工具处理源码文本，不会渲染页面。生成结果不代表 HTML 已通过校验、缺失标签已修复、危险代码已过滤或渲染效果完全不变。保留原始源码，并在发布前复核输出。

使用边界与限制条件

格式化会改变空白和缩进；行内元素之间的空白可能影响实际页面间距。
pre 实测样例保留了内部文本，但一个样例不能保证所有空白敏感文档都无变化。
自定义元素和 Vue 模板只作为文本输入，不会编译或验证组件；大输入采用同步格式化，可能暂时阻塞界面。

常见问题与技术解答 (FAQ)

HTML 格式化工具实际会改什么？▼

本页普通嵌套样例会增加缩进和换行，内嵌 JavaScript、CSS 也会重排。可在兼容性表中查看每个样例的实测结果。

HTML Formatter 可以替代 HTML Validator 吗？▼

不能。缺失闭合标签的样例仍能生成输出且没有校验错误，也不会补全标签。请另用 HTML 校验器，并测试实际页面。

pre 和 Vue template 是否保证完全无变化？▼

不作通用保证。本页具体样例的 pre 内文与 Vue 模板保持原样；请复核自己的文档，并用 Vue 编译器校验模板。