HTML 格式化压缩工具 - 在线美化/诊断/清洗

输入
结果

点击"🔍 诊断"分析 HTML 结构问题。

点击"📊 类名统计"查看页面中的 CSS 类名和 ID。

HTML格式化工具解决的是什么问题

大多数在线 HTML 格式化工具只做一件事：加缩进、整理空格，把乱七八糟的代码变得好看一点。这当然有用，但远远不够。

现实情况是：你手里那段 HTML，可能来自 ChatGPT 或其他 AI 模型的输出、网页抓取脚本的结果、Word 或 WPS 的"另存为 HTML"、三年没人碰的老项目，或者是几个人接力修改过的页面。这些代码往往不只是"丑"，还夹带着结构问题、可访问性缺陷、SEO 硬伤，用普通格式化工具根本看不出来。

这个工具的出发点是：格式化是起点，不是终点。

格式化与压缩：细节决定效果

格式化支持 2 空格、4 空格、Tab 三种缩进风格，可以在操作栏切换。格式化结果保留原始的标签顺序和属性，不做任何内容修改。压缩模式会去除注释、多余空白和换行，适合发布前减小文件体积。两个操作都在浏览器本地完成，代码不会发送到任何地方。

智能诊断：找出你平时看不见的问题

点击"诊断"按钮，工具会分析整段 HTML 的结构，生成一份诊断报告：

诊断结果支持一键规则修复，目前可以自动补全缺失的 alt 属性、为无 label 的 input 添加关联。修复后在结果区显示改动内容，改了什么一目了然。

清洗 Word 导出的 HTML

从 Word、WPS 导出的 HTML 文件，通常包含大量 mso- 内联样式、<o:p> 标签、空的 <span>、奇怪的字体声明和 XML 命名空间声明。直接粘贴到网页里，会导致排版异常，还可能影响 SEO。"清洗Word"功能会批量清除这些特有的垃圾代码，保留干净的文字和基础结构。

提取纯文本与移除内联样式

"提取文本"从 HTML 源码层面抽取有意义的文字内容，过滤脚本、样式和空标签，保留段落换行，适合内容抽取和文本分析场景。"去内联样式"一键移除所有 style 属性，重构页面样式时很有用，特别是接手老代码或清理 AI 生成代码时。

CSS 类名统计：重构前先摸底

重构一套样式，先得知道页面里用了哪些 class 和 id。统计面板会列出所有类名和 ID，按出现频率排序。点击某个类名，可以跳转定位到输入区的对应代码行，找起来比用浏览器 Ctrl+F 要直接很多。

使用教程 & 代码示例

不知道从哪里开始？下面三个示例演示了最常见的场景：一键美化 HTML 代码、压缩 HTML 减小体积、清洗 Word 导出的脏代码。每个示例都附有格式化前后的对比，方便你直接观察工具效果。

1如何在线格式化 / 美化 HTML 代码
✗ 格式化前（压缩/混乱）
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>示例</title></head><body><div class="wrap"><h1>标题</h1><p>段落文字</p><ul><li>列表项一</li><li>列表项二</li></ul></div></body></html>
✓ 格式化后（2空格缩进）
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>示例</title>
</head>
<body>
  <div class="wrap">
    <h1>标题</h1>
    <p>段落文字</p>
    <ul>
      <li>列表项一</li>
      <li>列表项二</li>
    </ul>
  </div>
</body>
</html>

操作步骤：将左侧输入框粘贴 HTML 代码 → 点击工具栏"⚡ 格式化"按钮 → 右侧即显示缩进整齐的结果，可一键复制或下载。快捷键：Ctrl+Shift+F（Mac 用 ⌘+Shift+F）。

2如何压缩 HTML 代码（减小文件体积）
✗ 压缩前（含注释和空白）
<!-- 页面头部 -->
<header class="site-header">
  <nav>
    <a href="/">首页</a>
    <a href="/about">关于</a>
  </nav>
</header>

<!-- 主内容 -->
<main>
  <h1>欢迎</h1>
</main>
✓ 压缩后（去除注释与多余空白）
<header class="site-header"><nav><a href="/">首页</a><a href="/about">关于</a></nav></header><main><h1>欢迎</h1></main>

操作步骤：粘贴代码 → 点击"⬛ 压缩"→ 工具自动删除注释、多余换行和空格，保留 script/style 内部逻辑不变。快捷键：Ctrl+Shift+M。

提示：压缩只去除空白字符，不修改任何 HTML 标签或属性内容。JS 单行注释（//）会被保护，不会被意外删除。
3如何清洗 Word / WPS 导出的 HTML
✗ Word导出的脏代码
<p class="MsoNormal" style="mso-margin-top-alt:auto;
  mso-margin-bottom-alt:auto;mso-line-height-alt:12.0pt">
  <span style="font-family:Calibri,sans-serif;
    mso-fareast-font-family:宋体;color:#000000;
    mso-ansi-language:EN-US">正文内容</span>
  <o:p></o:p>
</p>
✓ 清洗后（保留纯净结构）
<p>正文内容</p>

操作步骤：复制 Word 文档"另存为 HTML"生成的代码 → 粘贴到左侧 → 点击"🧹 清洗Word"→ 所有 mso- 样式、<o:p>、XML 命名空间声明被批量清除，文字内容完整保留。

常见问题

代码会上传到服务器吗？
不会。所有处理逻辑都运行在你的浏览器里，没有任何网络请求。可以放心粘贴含密码、API Key 或用户数据的代码。
支持多大的 HTML 文件？
几十 KB 到几百 KB 的 HTML 文件处理起来没有问题，通常不超过半秒。超大文件（比如带内嵌 base64 图片的 Word 导出 HTML）会稍慢一点，但操作界面不会卡死。
格式化会改变代码逻辑吗？
不会。格式化只调整缩进和空白，不增删、不移动、不修改任何标签、属性或内容。压缩同样只去除空白，原始代码的逻辑完整保留。
清洗Word HTML后原始文字内容还在吗？
会完整保留。清洗操作只针对 Word 特有的样式声明和命名空间标签，正常的 p、h1-h6、table、a、img 等标签不受影响，文字内容也不会丢失。
诊断报告里的自动修复安全吗？
当前是规则型修复，只做"补全"操作：给缺少 alt 的 img 添加空 alt，为没有 label 的 input 包一个关联标签。不会删除或移动现有代码。修复结果显示在右侧，应用到左侧前你可以完整查看改了什么。