HTML 格式化
HTML 格式化是把压成一行的网页源码按标签层级重排成统一缩进的在线工具。粘贴源码或拖入 .html、.htm、.vue 即可，HTML 缩进可选 2 空格、4 空格或 Tab。script、style、pre 与注释原样保留，内联元素不硬换行，排完版显示效果不变；li、td 等省略闭合写法正确出栈，不越缩越深。另有标签未闭合、id 重复等 6 类体检，只提示不改。HTML 不上传，免费免注册。
🔒 HTML 在你的浏览器内处理，未上传任何服务器；结果一律以纯文本展示，不做渲染预览， 只重排标签之间的空白，标签、属性与文本内容一个字符不改。
如何使用HTML 格式化
HTML 怎么格式化：先在上方文本框粘贴 HTML 源码，或把 .html / .htm / .vue 文件拖入（浏览器本地处理、HTML 不上传），也可以点「填入示例」先看效果。
默认就是 2 空格 HTML 美化，无需配置；按需切换缩进宽度、换行符、空行策略与「保留注释」「标签名转小写」，超过 200KB 会改成点「格式化」按钮再处理。
看一眼「结构体检」折叠面板，点任意一条能跳到输入框对应行；确认无误后「复制」或「下载 .html」，也可以「结果送回输入」继续处理。
关于HTML 格式化的常见问题
- HTML 格式化会上传我的网页源码吗？
- 不会。HTML 格式化全程在你的浏览器本地完成，源码不上传到任何服务器，关闭页面即清除。后台模板、邮件 HTML、抓下来的网页源码常带内网地址、token 和用户数据，所以 HTML 格式化不上传这一点很要紧：本工具只把缩进宽度这类排版偏好写进本机 localStorage，HTML 正文与结果一律不落盘（页面只加载访问统计脚本，它不读取也不上报你粘贴的内容）。想验证就断网再排一次版，照样出结果。
- 手机上能用 HTML 格式化在线工具吗？
- 可以。本 HTML 格式化在线工具是纯网页实现，手机、平板、电脑浏览器打开即用，无需安装软件，也无需注册登录。手机上做 HTML 排版和电脑上是同一套结果，输入区与结果区在窄屏会上下堆叠而不是并排，结果区支持横向滚动，长行不会被折断破坏缩进；结构体检面板在小屏默认折叠成一行，点开再逐条看。
- HTML 格式化缩进用 2 空格还是 4 空格？
- 看层级深度和团队约定，本工具默认 2 空格，参数区可切 4 空格或 Tab。同一份源码换缩进只差体积、不差结构：页面「填入示例」那段源码排完都是 21 行，2 空格 476 字符、4 空格 554 字符、Tab 437 字符，渲染结果完全一样。层级深的页面（这段示例最深 5 层）用 4 空格容易把内容顶出屏幕，2 空格更耐嵌套；项目里已有 .editorconfig 或团队约定的，按约定选，别在这里另起一套。换行符同理，跨平台协作统一选 LF 更省事。
- HTML 格式化会改动 script 和 style 里的代码吗？
- 不会。script、style、pre、textarea、title 的内容按原始文本整段透传，连里面的空格、空行和缩进都不动，更不会给 JS 或 CSS 重新排版。识别方式是从开标签扫到大小写不敏感的结束标签，中间全不解释，所以 script 里写 a < b、c > d 或字符串 "<div>" 都不会切错。要格式化 JS 或 CSS 本身请用专门工具，本页只管 HTML 排版。
- HTML 格式化会不会把页面的显示效果弄乱？
- 不会，这正是本工具最在意的一条。HTML 里换行就是空白，空白在内联上下文会被渲染成一个空格，所以给内联内容加缩进是有副作用的。像「价格 加粗的 ￥9.9 起」这种一行混排被拆成多行，页面上就会凭空多出空格；相邻的两个 span 之间本来没有空白，插了换行还会多出一条缝。本工具的做法是：直接含文字的元素整行原样输出绝不拆，原本没有空白的内联元素之间永不插入换行，只在块级边界换行。
- HTML 格式化能处理 Vue、模板语法和 PHP 吗？
- 能。花括号插值、模板控制语句、PHP 的开闭标签与 ASP / EJS 风格的尖括号百分号片段都会整段原样保留，里面的大于号小于号不会被当成标签切错；@click、:prop、v-if、x-on:click.prevent 这类框架属性在属性区不做任何名字校验，原文透传。片段也能直接排版，粘一个 div 或一段组件模板即可，不会给你补 html 与 body 骨架。
- HTML 格式化能检查标签有没有闭合吗？
- 会做 HTML 标签闭合检查，但只提示不自动改。共 6 类：标签未闭合、多余的闭合标签、给 br、img 这类空元素写了闭合标签、属性重复、id 全文重复、典型错误嵌套。每条给出第几行第几列和中文说明，点一下能跳到输入框对应行——想知道 HTML 标签未闭合怎么找，把源码粘进来看体检面板即可。这不是 W3C 有效性校验；li、td、p 等允许省略闭合的写法不会被误报。
- HTML 格式化支持多大的文件？有上限吗？
- 单次上限约 2MB，按 UTF-8 字节数计算，常见的网页源码、后台模板、邮件 HTML 与富文本存量数据都够用。几十 KB 的源码毫秒级完成，2MB 的极端输入实测也在半秒内。超过 200KB 会自动关掉「边输入边排版」，改成参数调好后点按钮再处理，免得每次击键都占住主线程；超过 2MB 会直接提示并拦截，请先拆分。结果区只预览前 8000 个字符，下载的文件是完整内容。
- HTML 格式化后 Git diff 变大怎么办？
- 先单独提一次「只做 HTML 格式化」的改动，再提业务改动，评审时排版噪音和真实改动就能分开看。本工具的输出是幂等的：参数不变再格式化一次，结果逐字节相同，所以第一次统一之后 diff 不会反复抖动。另外两个放大 diff 的常见原因都在参数区：换行符不一致（CRLF 与 LF 混用会让整份文件全红，跨平台协作建议统一选 LF）、缩进宽度和队友不一致。先把这两项对齐再格式化，diff 会小很多。
- HTML 格式化在线工具免费吗？需要注册吗？
- 免费，无需注册，不限次数，也没有会员额度。HTML 格式化跑在你自己的浏览器里，站方没有服务器转换成本，所以不设收费点，结果里也不插水印或广告标记。这一点你可以自己验证：页面打开后断网，再点一次格式化照样出结果，说明 HTML 源码格式化确实是在本地算的。唯一的硬限制是单次 2MB，那是为了不让浏览器主线程被卡住，与收费无关。
- HTML 格式化后中文乱码是怎么回事？
- 多半是文件本身不是 UTF-8 存的。拖入的 .html 一律按 UTF-8 读取，GBK/GB2312 存的网页源码读进来就已经是乱码，格式化只是把乱码原样排版，救不回来。解法是先用编辑器另存为 UTF-8 再拖入，或直接把文本粘进输入框。工具不改写 meta charset、不替你转码，也不解码 HTML 实体；输入带 UTF-8 BOM 时会提示并把 BOM 原样留在输出开头。
- HTML 格式化会把标签名和属性改成小写吗？
- 默认一律不改。大写的标签名、没加引号的属性值、布尔属性、XHTML 风格的自闭合斜杠都原样保留，标签配对时按小写比较所以大小写混写也能正确配对。需要统一时在参数区打开「标签名转小写」，它只动标签名这一段，属性名与属性值一个字符不碰；pre 与 script 里的内容属于内容不属于标签，也不会被小写。同理，本页不会替你补上缺失的闭合标签、不删多余的闭合标签、不给属性补引号、不重排属性顺序。
HTML 格式化到底会改动哪些东西
HTML 在线格式化（也就是常说的 HTML 代码美化）只重写标签与标签之间的空白，做的是 HTML 标签对齐这一件事。 下面这张保真对照表就是这个 HTML 格式化工具的完整承诺：左列的东西全部原样保留，唯一会被动的是空白本身。
| HTML 里的内容 | 本工具怎么处理 |
|---|---|
| script / style 的内容 | 逐字符原样，连里面的空格与空行都不动 |
| pre / textarea 的内容 | 整段原样，且不注入任何缩进（这里的空白会照原样渲染） |
| 注释 <!-- --> | 保留并独立成行；可选删除 |
| 条件注释 <!--[if lt IE 9]> | 整段原样，且不受「保留注释」开关影响，永不删除 |
| <!DOCTYPE html> 大小写 | 整块原样、独立成行、置于最前 |
| HTML 实体 & 中 | 不解码也不重新编码，原样输出 |
| 属性原文（引号风格 / 未加引号 / 布尔属性） | 原样保留，不补引号、不重排顺序 |
| 框架属性 @click :prop v-if x-on:click.prevent | 不做名字校验，原文透传 |
| 模板片段 花括号插值 / PHP / ASP 风格 | 整段原样，内部的尖括号不当标签解析 |
| 标签名与属性名的大小写 | 默认不改；仅「标签名转小写」开关会动标签名 |
| 缺失的闭合标签 / 多余的闭合标签 | 不补也不删，只在结构体检里点名 |
| 行尾空格、连续空行、文末换行 | 删除 / 折叠为一个（可调） / 补一个 |
| CRLF 换行与 UTF-8 BOM | 按所选换行符统一；BOM 原样保留在开头 |
还有一条安全边界要说在前面：本页不提供「预览渲染效果」，结果一律以纯文本展示。 把用户粘贴的 HTML 真渲染出来就等于自带一个 XSS 洞，所以实现里根本没有任何把输入当 HTML 注入 页面的路径。同理，本页只排版不做安全清洗，要把标签和脚本去掉请用下方的「去除 HTML 标签」。
为什么 HTML 格式化不能给内联元素随便换行
这是本工具和市面上多数在线 HTML 格式化最大的差别，也是最容易被忽略的一个坑：HTML 里换行就是空白，而空白在内联上下文会被渲染成一个空格。 于是「加缩进」这个看起来纯装饰的动作，在内联内容上是会改渲染的。先看被拆坏的经典反例：
<!-- 原文：页面显示「价格 ￥9.9 起」 -->
<p>价格 <b>￥9.9</b> 起</p>
<!-- 被某些格式化器拆行后：换行被渲染成空格，变成「价格 ￥9.9 起」 -->
<p>
价格
<b>￥9.9</b>
起
</p>
<!-- 更隐蔽的一种：两个 span 原本零空白相邻，插了换行就多出一条缝 -->
<span>A</span><span>B</span>本工具的换行规则只有三条，写在这里方便你核对结果：
| 情况 | 处理方式 | 为什么 |
|---|---|---|
| 元素直接含文字（如 p、li、td、a） | 从开标签到闭标签整段原样直出，绝不拆行 | 拆行会在文字与内联元素之间凭空多出空格 |
| 相邻内联元素之间原本没有空白 | 保持零空白相邻，绝不插入换行或缩进 | inline-block 场景下会多出一个空格宽的缝 |
| 相邻内联元素之间原本就有换行 | 允许重排成新的缩进 | 空白换空白，渲染完全等价 |
| 块级元素之间 | 正常换行加缩进 | 块级盒子之间的空白不参与渲染 |
| pre / textarea 内部 | 一个空白都不动 | 这里的空白会照原样渲染出来 |
判据里的「内联元素」用的是一张固定的标签表（a、b、span、img、code、strong、em、small、 label、input、button、select、svg 等）。一句话总结本工具的取舍：宁可一行长一点，也绝不给内联内容加一个空白；长行由结果区横向滚动兜住， 也可以在参数区把「内联行断行」调到 80 或 120，那时也只会在原本就有空白的地方断。
HTML 格式化前后对比示例：一份压成一行的页面源码
页面里「填入示例」用的就是下面这段源码，它一次踩满了 li 省略闭合、内联混排、pre 空白、 script 与 style 保真、void 元素与 HTML 实体六个容易被改坏的点：
<!DOCTYPE html><html lang="zh-CN"><head>
<meta charset="utf-8"><title>小鹿tools</title>
<style>body{margin:0} .btn{color:red}</style>
</head>
<body>
<div class="card"><p>价格 <b>￥9.9</b> 起，<a href="/buy?a=1&b=2">立即购买</a></p>
<ul><li>不上传<li>免注册</ul>
<pre> 保留 这里的
空格</pre>
<img src="a.png" alt="图">
</div>
<script>if (a < b && c > d) { console.log("<div>"); }</script>
</body></html>按默认的 2 空格美化后，实测输出是 21 行 / 476 字符 / 16 个标签 / 最深 5 层 / 隐式闭合 2 处 / 原样保留 4 段，结构体检 0 条：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>小鹿tools</title>
<style>body{margin:0} .btn{color:red}</style>
</head>
<body>
<div class="card">
<p>价格 <b>￥9.9</b> 起，<a href="/buy?a=1&b=2">立即购买</a></p>
<ul>
<li>不上传
<li>免注册
</ul>
<pre> 保留 这里的
空格</pre>
<img src="a.png" alt="图">
</div>
<script>if (a < b && c > d) { console.log("<div>"); }</script>
</body>
</html>六处细节值得对照着看：两个 li 同级而不是阶梯式越缩越深；p 那一行整段没拆，￥9.9 前后的空格 一个不多一个不少；pre 里多余的空格和第二行开头的缩进原样躺着，没被重新缩进；style 与 script 的内容（含 a < b、c > d 和字符串里的 div 标签）一个字符没动；meta 与 img 是空元素， 不给下一层加深度；HTML 实体没有被解码成裸的与号。这份结果还是幂等的—— 把它再格式化一次，输出与现在逐字节相同。
HTML 格式化时可以省略的闭合标签有哪些
「拿 XML 格式化器排版 HTML」最典型的翻车点就在这里。HTML5 允许省略一批闭合标签， 解析器会在遇到同级标签时自动出栈；不认这套规则的工具会把每一个 li 都当成还开着， 于是缩进越缩越深，一份长列表最后能缩到屏幕外面去。本工具按下面这张表出栈， 只让缩进正确，不替你补写任何闭合标签。
| 遇到这个开标签 | 会自动关掉栈顶的 | 常见写法 |
|---|---|---|
| li | li | <ul><li>a<li>b</ul> |
| dt / dd | dt、dd | <dl><dt>k<dd>v</dl> |
| option / optgroup | option（optgroup 还关 optgroup） | <select><option>a<option>b</select> |
| tr | td、th、tr | <table><tr><td>1<tr><td>2</table> |
| td / th | td、th | <tr><td>1<td>2 |
| thead / tbody / tfoot | td、th、tr、thead、tbody（thead 关 caption、colgroup） | <table><tbody><tr><td>1 |
| rt / rp | rt、rp | <ruby>汉<rt>hàn</ruby> |
| div、p、ul、ol、table、h1~h6 等块级标签 | p | <p>文字<div>块</div> |
统计条里的「隐式闭合 N 处」数的就是这些省略写法。要注意最后一行：p 被块级元素关掉时， 除了正确出栈还会额外记一条嵌套提示——那不是本工具挑刺，而是浏览器真的会在那里把段落断开， 和你写的结构不一样。
HTML 格式化能查出哪 6 类标签结构问题
HTML 没有「良构」这个契约，所以本工具永不因为语法有问题而拒绝出结果， 发现的问题一律作为非阻断提示列在结果旁（黄色，不是红色报错）。规则只有下面 6 条， 刻意不扩表——HTML 内容模型细则太多，多加一条就多一片误报。
| 问题 | 什么时候触发 | 不误报的关键 |
|---|---|---|
| 标签未闭合 | 开标签直到文末或被上层标签强行结束都没等到闭合 | li、td、p 等 HTML5 允许省略闭合的写法先按隐式闭合出栈，不算未闭合 |
| 多余的闭合标签 | 闭合标签往前找不到对应的开标签 | 空元素的闭合标签走下一条，不重复报 |
| 空元素写了闭合标签 | 出现 </br>、</img> 这类写法 | 空元素表复用站内已上线的同一份，不自造 |
| 属性重复 | 同一标签内出现两个同名属性 | 属性名按小写比较，只解析名字不解析值 |
| id 重复 | 同一份文档里出现两个相同的 id 值 | 只认静态字面量 id；:id、v-bind:id、值里含模板插值的一律跳过 |
| 错误嵌套 | p 里塞块级元素、a 套 a、ul 的直接子元素不是 li | 只查这三条最确定的，不扩表 |
每条都给「第 N 行第 M 列 + 中文说明 + 标签名」，点一下就跳到输入框对应行。 没有问题时显示「未发现结构问题」，而不是打一个绿色对勾——本页不做 W3C 有效性校验， 不能替浏览器承诺这份 HTML 一定合法。