HTML 格式化工具怎么用
- 把 HTML 粘贴到输入框：完整的网页、模板、邮件，或从浏览器开发者工具里复制的片段。粘贴后立即格式化。
- 选格式化用 2 个空格、4 个空格或制表符缩进；选压缩去掉浏览器不显示的空白。勾选缩进 <script> 和 <style> 里的代码，可以把这些代码块整体移到所在标签的缩进位置。
- 点击结果旁的复制，或点下载保存为 .html 文件。
- 如果有警告，看一下：未闭合和多余的标签都会列出行号和列号。
为什么格式化 HTML 可能改变页面，本工具怎么避免
浏览器排版时有两类盒子。块级元素——div、p、标题、列表和列表项、表格及其行和单元格、section、header 等——总是另起一行，它们旁边的空白永远不会显示。行内内容——文字、a、b、em、span、img、button、input——像句子里的词一样连续排列，在这里任何连续的空格、制表符和换行都会显示成一个空格。
这一点对中文网页影响更大：英文单词之间本来就有空格，多一个不太显眼；中文字之间没有空格，一旦多出一个就很明显。<b>北京</b><i>烤鸭</i> 显示为“北京烤鸭”，如果格式化工具把两个标签拆到两行，换行就会变成空格，页面上出现“北京 烤鸭”。（CSS 规范允许浏览器去掉中文字符之间由换行产生的空格，但并不是所有浏览器都这样做。）很多美化工具正是这样把页面改坏的。
本工具遵循与浏览器相同的规则：只在块级元素旁边加换行；两段行内内容之间，从不增加或删除空白；原来就有带换行的空白时，才可能调整那一行的缩进。注释和不可见的元素（script、style、meta、link、template）各占一行，除非两边都紧贴着文字，例如 甲<!-- -->乙 必须保持“甲乙”。
| 会改动 | 不会改动 |
|---|---|
| 块级元素旁边的换行和缩进 | 标签名、属性、属性值、引号和顺序 |
| 文本里已有换行的缩进 | 文字本身和字与字之间的空白 |
| 压缩：去掉块级元素旁的空白，其余连续空白缩成一个空格 | <pre>、<textarea>、<title> 的内容；未勾选选项时的 <script> 和 <style> |
| Windows 换行（CR LF）写成 LF，与浏览器的读取方式一致 | 注释、 等实体，以及你省略的结束标签 |
HTML 允许省略部分结束标签——</li>、</p>、</td>、</tr>、</option>——格式化工具像浏览器一样知道这些元素在哪里结束，但不会替你补上标签。不换行空格（ ）和中文全角空格“ ”在 HTML 里都不算空白，永远不会被改动。
计算示例
输入框里的示例是一个 498 字节、写在一行里的网页。按 2 个空格格式化后：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>营业时间</title>
<style>p{margin:0}</style>
</head>
<body>
<nav class="top"><a href="#home">首页</a> | <a href="#menu">菜单</a></nav>
<main>
<h1>营业<em>时间</em></h1>
<p>除周一外<b>每天</b>营业。
<ul>
<li>周二至周五：9:00–18:00
<li>周六、周日：10:00–16:00
</ul>
<pre> 订座电话 010-62345678
欢迎来电</pre>
<!-- 这里放地图 -->
</main>
<script>document.title += " ✓";</script>
</body>
</html>
导航链接和中间的“ | ”留在同一行，段落里的加粗文字也留在行内，“除周一外每天营业。”不会被拆开；列表项保持省略 </li> 的写法——按照 HTML 标准，<ul> 还会结束前面的段落。<pre> 块保留原来的空格。压缩后是 498 字节，因为原文本来就很紧凑。
警告
浏览器从不拒绝 HTML，它会自动修复，而修复的结果往往不是你想要的。格式化工具会列出它不得不修复的地方：
<div class="box"> <p>简介 <div>提示</div> </p> <span>未闭合 </div>
| 行 | 列 | 警告 |
|---|---|---|
| 2 | 21 | Stray </p>: a block such as <div> or <ul> inside a <p> closes the paragraph, so browsers add an empty <p></p> here |
| 3 | 3 | <span> is not closed before </div> |
- 没有闭合：必须写结束标签的元素，在父元素结束时还开着。浏览器会在那里替它关闭。
- 多余的结束标签：没有同名的元素处于打开状态，这个标签会被忽略。
<p>里放<div>或列表会让段落提前结束，所以上面的</p>是多余的。 - 斜杠被忽略：在 HTML 里
<div/>并不会关闭 div——只有<br>、<img>这样的空元素没有结束标签，加不加斜杠都一样。在<svg>和<math>里斜杠才有关闭作用。Vue 模板里常见的<my-comp />写法在纯 HTML 里同样不成立。 - 属性重复：浏览器保留第一个，忽略第二个。
限制与小技巧
- CSS 会改变规则。工具按每个元素的默认 display 处理。如果样式表把列表项设成
inline-block（做横向菜单的常见写法），</li><li>之间的换行会多出一点间隙；被 CSS 设成white-space: pre的元素会显示出新加的缩进。这类代码请保持压缩，或格式化后检查页面。 - 脚本和样式代码不会被重新排版。选项只整体移动代码块，不改代码本身。JavaScript 里跨行的模板字符串会多出缩进，这种情况请不要勾选。
- 服务端模板（PHP、JSP、Thymeleaf、Jinja）、Vue 单文件组件和 JSX 都不是纯 HTML，混在里面的标记可能格式化得不理想。
- 大页面：1 MB 的页面大约一秒就能格式化完，长结果也能流畅滚动。
- XHTML、SVG 文件和订阅源请用 XML 格式化检查更严格的 XML 规则；页面里嵌入的 JSON 数据可以用 JSON 格式化查看。
HTML 不会离开你的设备
一切都在你的浏览器里完成。粘贴的内容不会被上传或记录，也不会被保存：刷新页面就会清空。
常见问题
格式化会改变页面的显示效果吗？
在元素使用默认 display 的情况下不会：工具只在浏览器不显示空白的地方增删空白，也从不改动 <pre>、<textarea>、脚本和样式。用 CSS 改变了元素 display 或 white-space 的情况是例外，上文有说明。
为什么没有把每个标签都放到单独一行？
<a>、<b>、<span> 这样的行内标签是文字的一部分。在它们之间原本没有空白的地方加换行，页面上就会多出一个可见的空格，在中文里尤其明显，所以除非原来就有空白，它们会保持在一起。
能修复写错的 HTML 吗？
它会报告问题——未闭合和多余的标签、重复的属性、非空元素上的斜杠——但标签完全按你写的保留，不会在背后增删任何东西。请在源码里按警告修改后重新格式化。
压缩后的 HTML 还是同一个页面吗？
是的。压缩只去掉块级元素旁的空白，并把其他连续空白缩成一个空格，浏览器的显示完全一样。注释和脚本、样式里的代码会保留；服务器开启 gzip 或 Brotli 压缩后，节省的流量比压缩 HTML 更多。
我的 HTML 会被上传吗？
不会。页面在你的浏览器里完成格式化，所以可以放心处理内部模板和需要登录才能看到的页面，加载后断网也能使用。
最后更新：2026年10月16日