🧹

HTML 格式化

「从线上扒下来的 HTML 全挤在一行，怎么看？」——粘贴即美化（缩进 2/4 空格可选、属性不换行、行内元素不强制换行），一键压缩（去注释去多余空白，pre/textarea/script/style 内容原样保留），还能提取内联 CSS（style 属性自动生成 class 与 style 块）。纯本地 tokenizer 引擎，不接 AI、不上传。

✨ 美化：缩进 2/4 可选 🗜️ 压缩：保留 pre/script 原样 🎨 提取内联 CSS → class 🔒 纯本地不上传 🌙 黑夜模式

📥输入 HTML0 字符 · 0 行

⚙️处理方式

美化缩进

2 空格 4 空格

美化：块级元素独占行、行内元素（a/span/strong 等）不强制换行、属性保持一行不断行；压缩：去除注释与标签间多余空白，pre/textarea/script/style 内容原样；提取：style 属性自动生成 class 与 <style> 块，相同样式复用同一类名。

📤输出结果0 字符 · 0 行

💡使用提示

行内元素a/span/strong/img 等不换行，保持文本流

raw 元素pre/textarea/script/style 内容永不重排

畸形代码未闭合标签尽力输出，不报错不丢内容

数据安全全部本地处理，不接 AI 不上传服务器

📐

处理口径：本工具使用自研 tokenizer 级引擎（不依赖外部库）：美化时块级元素独占一行并按层级缩进（2/4 空格可选），行内元素与文本保持同行，标签属性不拆行；压缩时去除 HTML 注释与标签间多余空白（单词间必要空格保留），pre/textarea/script/style 内容三种模式均原样保留；提取内联 CSS 时把 style 属性值转为 .hf-N 类规则并复用相同样式，元素自动补 class，样式块插入输出头部。未闭合、错嵌套的畸形 HTML 按尽力原则输出，不崩不丢字符。

为什么需要 HTML 格式化工具

CMS 导出、线上抓取、构建产物里的 HTML 经常挤成一团：没有换行、没有缩进，改一处样式要在一行几千字符里翻半天。格式化工具把「看不懂」变成「看得懂」：美化让结构层级一目了然，压缩让上线文件更小，提取内联 CSS 则把散落的 style 属性收拢成可维护的样式表。

三种模式怎么选

美化适合阅读与改造：块级元素独占行、按层级缩进，a/span/strong 等行内元素不强制换行，文本流不被打断；压缩适合上线发布：去注释、去标签间空白，且 pre/textarea/script/style 内容原样保留，不会压坏代码与预排版文本；提取内联 CSS适合重构：把 style="..." 自动转成 class 与集中的 style 块，相同样式复用同一类名，HTML 瞬间清爽。

使用方法

左侧粘贴 HTML（完整文档或片段均可）；
需要美化时先选缩进（2/4 空格），再点「✨ 美化」；
点「🗜️ 压缩」得到去注释去空白的单行结果；
点「🎨 提取内联 CSS」把 style 属性转为 class + style 块；
右侧查看结果与字数统计，一键复制或下载 .html 文件。输入自动保存在本浏览器。

更新记录

1.02026-10-16全新上线：tokenizer 级纯 JS 引擎（不依赖外部库）；美化（缩进 2/4 可选、属性不换行、行内元素不强制换行）；压缩（去注释去多余空白）；提取内联 CSS（style→class+style 块，相同样式复用类名）；pre/textarea/script/style 内容原样保留；输入输出双栏 + 字数统计 + 复制/下载；畸形 HTML 不崩；纯本地不接 AI，支持黑夜模式。

常见问题

压缩会改动 script 或 pre 里的内容吗？

不会。pre、textarea、script、style 属于 raw 元素，引擎识别后对其内容原样透传，三种模式都不会重排或去空白——美化只把它们的开始/结束标签独立成行，内容一字不动。

提取内联 CSS 后样式会变吗？

不会。引擎把 style 属性值原样搬进 .hf-N 类规则，并给元素补上对应 class；相同样式值的元素复用同一个类名，视觉效果与内联时完全一致（同优先级下 class 与 style 属性等效，且此处无其他同名类冲突）。

HTML 没闭合或写错了会怎样？

工具按尽力原则处理：未闭合的标签在末尾自动收尾输出，多余的闭合标签独占一行不报错，孤立的 < 号按文本保留。不会崩、不丢字符，但也提醒：美化结果不能替代语法校验，严重错误建议先用校验器排查。

内容会被上传到服务器吗？

不会。所有处理都在浏览器本地完成，工具不接 AI、不上传任何代码，粘贴的内容只存在你的浏览器里。