用途

HTML 和 CSS 在线格式化、美化、压缩工具，自动缩进标签嵌套、对齐属性、整理 CSS 规则。HTML 模式支持 HTML5 自闭合标签、内联 SVG、模板字符串、Vue/React 风格 JSX 片段；CSS 模式支持媒体查询嵌套、CSS 变量、新一代选择器、@layer/@container 等现代特性。压缩模式可用于嵌入小程序、Email 模板、生产环境。所有处理在浏览器本地完成，无上传。

操作步骤

1. 选模式：HTML / CSS / 自动检测（看输入开头是 < 还是 {）
2. 粘贴或拖入文件；HTML 模式接受 .html / .htm / .vue template / .jsx 片段
3. 点「格式化」按 2 空格缩进展开，HTML 嵌套层级清晰，CSS 选择器和规则对齐
4. 点「压缩」去掉所有空白和注释，适合上线打包或嵌入字符串
5. HTML 自闭合标签（br / img / input / meta）按 HTML5 规范不强制 />
6. CSS 多媒体查询嵌套（@media inside @supports）正确解析
7. 错误高亮：标签未闭合、属性引号不匹配、CSS 大括号不平衡
8. 导出复制或下载格式化后文件

常见问题

Vue / React 模板里的 {{ msg }} / {msg} 会被破坏吗？

不会。本工具识别 Vue 的 {{ }} 双花插值、React 的 { } 单花表达式、Angular 的 {{ }}，格式化时保留原样不被当成 HTML 标签处理。

CSS-in-JS（styled-components）的模板字符串能格式化吗？

部分支持。如果是纯 CSS 字符串（不含 ${} 插值）格式化效果好；带 JS 插值的最好手动拆出 CSS 部分单独格式化，再拼回模板。

HTML 里的 <script> <style> 标签内容会一起格式化吗？

<script> 内 JS 代码不会被 HTML 格式化器处理（避免破坏 JS 语义），但 <style> 标签内 CSS 会自动启用 CSS 模式格式化。如果想格式化 JS 部分，复制出来用专门的 JS formatter。

为什么我的 SVG 路径数据被换行了？

SVG path 的 d 属性默认会保持单行（防止破坏路径语法）。如果你看到换行，可能是输入里本来就有换行；工具不主动添加 path 内部换行。

能否保留 HTML 注释 <!-- -->？

格式化模式保留所有注释（CSS / HTML）。压缩模式默认去掉注释；如果要保留（比如保留版权注释或条件注释），勾选「保留注释」选项。

应用场景

• 清理爬虫抓取的网页源码：网页源码经常是单行压缩，格式化后才能分析 DOM 结构
• 维护邮件模板：HTML 邮件模板有严格的内联样式要求，格式化后好维护和测试兼容性
• 编辑设计稿导出的 SVG：Figma / Sketch 导出的 SVG 通常是单行，格式化后好手动调整 path
• 排查微信小程序 wxml：wxml 是 HTML 方言，格式化后能看清条件渲染和列表渲染嵌套
• 清理老项目 CSS：万行单文件 CSS，格式化压缩切换查看，便于 Code Review 和重构

适用场景

前端排查爬虫网页源码、维护 HTML 邮件模板、整理 SVG 源码、阅读小程序 wxml、清理遗留 CSS 文件。前端、爬虫工程师、邮件营销、小程序开发的常用场景。Vue/React 模板兼容、SVG 不破坏、注释可选保留是关键差异点。