开发者工具 · JSON / 数据格式

HTML 格式化

缩进/多种风格

✓本地处理 · 不上传 ✓免费 · 无需登录 ✓无次数限制 累计 127 次使用
输 入 HTML
处理结果 HTML
就绪 · 粘贴 HTML,美化缩进或压缩去空白,全程本地处理
第一节

关于本工具

About

接手一段被不同编辑器揉乱的 HTML,缩进层次全乱,标签挤成一团。这个工具把混乱的代码重新排成清晰的树状结构,支持缩进空格数、引号风格等细节调整。前端完全在浏览器内处理,代码不会离开设备。

使用场景

壹

代码审查改缩进

同事提交的 HTML 代码缩进混乱,2 空格、4 空格、Tab 混用,review 时根本无法看清标签层级。审查者把这段代码粘贴进工具,选择「4 空格缩进」,2 秒后得到结构清晰的版本,能快速定位到未闭合的 div 和错误的嵌套顺序,审查效率从 20 分钟降到 5 分钟。

贰

邮件模板统一风格

市场部给 200 个客户发活动邀请邮件,用的是外包写的 HTML 模板,缩进全用 Tab,且 <head> 里 mixin 了 <body> 的内容。运营同事把源码丢进工具,切换「压缩风格」去掉了所有多余的空格和换行,文件体积从 12KB 降到 6KB,同时用「展开风格」检查了一遍标签闭合,确保 Outlook 和 Gmail 渲染一致。

叁

从 CMS 导出后清理

从旧版织梦 CMS 导出整站文章,每篇 HTML 里都嵌着编辑器自动加的 style 属性和大量空行。编辑把 3000 行的导出文件分段粘贴进工具,用「紧凑风格」一次性移除所有冗余换行和连续空白,再手动批量替换掉内联 font-size,最终导入新站时没有出现任何样式冲突。

肆

调试第三方嵌入代码

开发者在调试微信 JS-SDK 的分享接口,第三方文档给的示例代码缩进全乱,且 script 标签里混了 PHP 变量输出。他把代码复制进工具,选择「2 空格缩进」格式化后,发现一处花括号位置错误(else 写在了 if 块外面),修正后分享功能立即生效,省去了逐行数花括号的 15 分钟。

伍

交接遗留项目代码

接手一个离职同事留下的活动专题页,HTML 文件里缩进用 8 个空格,注释和代码混在一起。新开发者把整个文件粘贴进工具,选「4 空格缩进 + 展开」风格,5 秒后得到了按标签层级清晰排列的代码,一眼看出轮播图组件的外层容器没有闭合,修复后页面不再白屏。

第二节

使用指南

Getting Started

使用步骤

  1. 1在代码编辑区粘贴或输入原始 HTML 代码,编辑器自动高亮标签与属性
  2. 2从「缩进风格」下拉菜单选择一种预设(如 2 空格、4 空格或 Tab),代码区立即重排缩进
  3. 3勾选「移除多余空行」或「统一引号」等可选开关,格式化结果同步更新
  4. 4点击「复制结果」按钮将格式化后的 HTML 存入剪贴板,按钮短暂显示「已复制」反馈

输入输出示例

输入输出说明
<div><p>Hello</p></div><div> <p>Hello</p> </div>常规:最基础的嵌套结构,验证缩进层级是否正确,标签闭合是否对齐。
<ul><li>A</li><li>B</li></ul><ul> <li>A</li> <li>B</li> </ul>常规:列表平级元素,验证同级标签缩进一致,无多余空行。
<html><head><title>Test</title></head><body><h1>Title</h1><p>Content</p></body></html><html> <head> <title>Test</title> </head> <body> <h1>Title</h1> <p>Content</p> </body> </html>常规:多层嵌套的完整 HTML 骨架,验证深层缩进是否正确(每层增加 2 空格)。
<div><p>Line1<br>Line2</p></div><div> <p>Line1<br>Line2</p> </div>边界:自闭合标签 <br> 的处理——不应被缩进或换行破坏,保持与文本同行。
<div><!-- comment --><p>Text</p></div><div> <!-- comment --> <p>Text</p> </div>边界:HTML 注释的缩进——注释应与普通标签同级缩进,不丢失内容。
<div><span>Text</span></div><div> <span>Text</span> </div>边界:单层嵌套,验证最小有效输入是否正常格式化,无多余空行或错误换行。
<div><p>Hello</p><p>World</p></div><div> <p>Hello</p> <p>World</p> </div>易错:连续同级标签——容易错误地将第二个 <p> 与第一个 <p> 的内容混排,需保持各自独立行。
<div> <p> Spaced </p> </div><div> <p>Spaced</p> </div>易错:输入中已有不规则空格——格式化应去除多余空白,但保留标签间必要缩进,避免破坏内容。

常见错误对照

1.缩进不一致导致层级混乱

✗ 错误<div> <p>文本</p> <span>内容</span> </div>
✓ 修复<div> <p>文本</p> <span>内容</span> </div>

HTML 格式化依赖一致的缩进层级来反映 DOM 嵌套关系。混用不同空格数会破坏可读性,工具输出通常基于 2 或 4 空格规则,手动缩进应与之对齐。

2.自闭合标签错误加结束标签

✗ 错误<img src="a.jpg"></img>
✓ 修复<img src="a.jpg">

HTML5 中 img、br、input 等是 void 元素,不允许有结束标签。工具格式化时可能自动移除多余结束标签,但手动保留会导致解析歧义。

3.属性值未用引号包裹

✗ 错误<div class=container id=main>
✓ 修复<div class="container" id="main">

HTML 规范要求属性值在包含空格、特殊字符时必须加引号。即使不含空格,不加引号也属于非标准写法,工具格式化时可能自动补全,但原始输入应规范。

4.注释嵌套导致解析中断

✗ 错误<!-- 外层注释 <!-- 内层注释 --> 继续 -->
✓ 修复<!-- 外层注释 --> <!-- 内层注释 -->

HTML 注释不支持嵌套,第一个 --> 会结束所有注释。后续内容会被当作普通文本显示,破坏页面结构。工具格式化无法修复逻辑错误,只会按语法解析。

5.标签属性顺序随意,影响 diff 对比

✗ 错误<a href="#" class="link" id="top">
✓ 修复<a id="top" class="link" href="#">

工具格式化通常按固定规则排序属性(如 id→class→href),不遵循此顺序会导致版本控制 diff 出现大量无关变更,增加代码审查负担。

6.实体编码与原始字符混用

✗ 错误<p>© 2024 &amp; 公司</p>
✓ 修复<p>&copy; 2024 &amp; 公司</p>

© 在 HTML 中应使用 &copy; 实体,直接输入原字符在某些编码环境下会显示异常。工具格式化不会自动转换实体,需手动确保编码正确。

7.多余空白字符未清理

✗ 错误<p> 文本内容 </p>
✓ 修复<p>文本内容</p>

HTML 中连续空白字符会被折叠为单个空格,但多余空白会增加文件体积。工具格式化通常保留文本内空白,建议手动去除首尾空格以保持整洁。

第三节

工作原理

How It Works

核心公式

缩进深度 = 当前标签在 DOM 树中的层级 × 缩进单位(空格数)

变量说明

  • 当前标签层级标签在 DOM 树中的嵌套深度,根为 0
  • 缩进单位每层缩进使用的空格数,可选 2/4/8

示例

输入 HTML:<div><p><span>文本</span></p></div>,选择缩进单位 4 空格。根 div 层级 0 → 缩进 0 空格;p 层级 1 → 缩进 4 空格;span 层级 2 → 缩进 8 空格。输出:<div>\n <p>\n <span>文本</span>\n </p>\n</div>

原始 HTML 代码解析 DOM 结构识别标签嵌套拆分元素层级应用缩进规则按风格调整换行属性排序与清理格式化后的 HTML 代码(带缩进 / 换行 / 风格统一)
用户输入 本地处理 输出结果
第五节

常见问题

Q & A
问我有一段 HTML,里面带中文,格式化完中文变成乱码了怎么办?+
答

本工具完全在浏览器本地运行,不涉及服务器转码,因此编码问题通常来自原始文件本身。格式化前请确认 HTML 文件头部有 <meta charset="UTF-8"> 或 <meta charset="gbk"> 等声明。如果原始 HTML 是 GBK 编码但未声明,浏览器可能误判为 UTF-8 导致乱码。建议用记事本另存为 UTF-8 格式后再粘贴,或者先手动在 <head> 里补上正确的 charset 声明。

问为什么我格式化完,缩进没变,还是挤在一行?+
答

如果输入本身就是一行没有换行的 HTML,格式化后仍可能显示为一行,是因为工具需要先解析 DOM 结构。请检查输入是否包含完整的 <html><body> 等闭合标签。不完整的片段(如只有 <div><p>)会被解析器自动补全,补全后结构可能不符合预期。建议先补全缺失的根标签,或使用“智能缩进”模式,它会强制按标签嵌套换行。

问这个工具能格式化 Vue 或 React 的模板语法吗?比如 v-if 和 {{ }}?+
答

可以处理基础模板语法,但有限制。工具核心是标准的 HTML 解析器,能识别 v-if、v-for 这类 Vue 自定义属性并保留原样,同时正确处理 {{ }} 插值表达式。不过如果模板里混入了 JSX 的 {} 或 Vue 的复杂指令(如 v-bind:class 里的对象语法),解析器可能将其当成纯文本,不会额外处理。建议只对 .html 或 .vue 文件中的 <template> 部分单独使用,不要包含 <script> 块。

问格式化后的代码能一键复制到别的编辑器里用吗?+
答

可以。结果区右上角有“复制”按钮,点击后会将格式化后的完整 HTML 复制到剪贴板。复制的内容保留了所有缩进和换行,可以直接粘贴到 VS Code、Sublime Text 等编辑器中。注意:如果原始 HTML 包含特殊字符(如 &nbsp;),复制后仍为 HTML 实体,不会自动转回空格,粘贴后可能需要手动替换。

问我有一段很长的 HTML,格式化后浏览器卡住了,是不是工具坏了?+
答

不是工具坏了,是浏览器处理大文件时的性能瓶颈。本工具完全在浏览器端运行,对于超过 1MB 的 HTML 文件,解析和重排 DOM 会消耗大量内存和 CPU,导致页面暂时无响应。建议分段处理:先复制一半代码,格式化后再处理另一半。如果必须一次性格式化超大文件,可以尝试使用桌面端的代码编辑器(如 VS Code 的格式化插件),它们对超大文件有优化。

问这个工具和在线压缩 HTML 的工具有什么区别?+
答

功能相反。本工具是“格式化”(美化、缩进),目的是让 HTML 可读性更强,适合调试和编辑;压缩工具则是去掉所有空格、换行和注释,让文件体积最小化,适合生产环境部署。两者可以配合使用:先用本工具格式化后修改代码,上线前再用压缩工具去掉多余空白。注意:不要对压缩后的 HTML 直接格式化,因为压缩后的代码可能丢失了必要的换行信息,格式化结果会变得奇怪。

问我格式化后保存,再打开发现缩进又乱了,怎么回事?+
答

这种情况通常是因为保存时编辑器自动重新格式化了。很多代码编辑器(如 VS Code)默认开启了“保存时自动格式化”功能,且可能使用了不同的格式化规则。解决方案:在编辑器设置中关闭“Format On Save”,或者将默认格式化器改为 Prettier 并配置与工具一致的缩进(如 2 空格)。另外,如果 HTML 里混有 PHP、JSP 等服务器端标签,编辑器可能无法正确识别,导致缩进错乱。

问能不能只格式化选中的那一段,而不是整个页面?+
答

本工具目前不支持选区格式化。所有输入框中的内容会被整体解析后重新生成。如果只想格式化某个片段,可以先将该片段复制到输入框单独处理,处理完后粘贴回原文件。注意:单独的片段(如 <li> 项)缺少父标签,解析器会补全 <html><body>,结果会多出一些标签,需要手动删除多余部分。

隐私保证所有计算与处理均在你的浏览器本地完成,输入数据不会上传服务器,也不会保存或共享。

↑↓选择 ↵打开 ⌘+↵新窗口 esc关闭