如何使用 HTML 分析计算器
HTML 分析计算器是一款面向开发者、SEO 从业者和内容站站长的浏览器工具，帮助您快速了解任意 HTML 片段或完整页面的结构与元数据。使用时，只需将 HTML 源码粘贴到输入区域，HTML 分析计算器即会实时更新并在右侧面板显示统计结果。
- 粘贴 HTML — 从浏览器的”查看源代码”、CMS 导出或代码编辑器中复制 HTML 源码，粘贴到左侧文本框。
- 查看统计数据 — HTML 分析计算器右侧面板会立即显示字符数、标签数、节点数及资源引用情况。
- 检查 SEO 信号 — 向下滚动结果面板，查看页面是否包含 title、meta 描述、h1、canonical 链接、viewport meta 以及带 alt 属性的图片。
- 查看标签分布 — 条形图列出频率最高的前 20 个标签，便于发现过度使用的元素。
- 复制报告 — 点击”复制结果”，将所有统计数据导出为纯文本，方便分享或留档。
您也可以点击加载示例，用预置的 HTML 文档体验工具输出效果，再粘贴自己的代码。点击清空可重置所有内容。
公式与原理 - HTML 分析计算器
HTML 分析计算器通过一系列正则表达式和字符串处理对原始 HTML 字符串进行多轮扫描，无需 DOM 解析器，完全在浏览器本地运行，不依赖任何外部库。
总字符数 = html.length
去空白字符数 = html.replace(/\s+/g, '').length
标签数 = 匹配 /<\/?[a-zA-Z][a-zA-Z0-9]*(?:\s[^>]*)?\/?>/g 的数量
开标签计数 = { 标签名: 出现次数 }，由 /<([a-zA-Z][a-zA-Z0-9]*)[^>]*>/gi 统计
文本节点数 = 去除注释后，标签之间非空文本段落的数量
文件大小（字节） = TextEncoder('utf-8').encode(html).length
文件大小（KB） = 字节数 / 1024
SEO: 存在 title？ = /<title[^>]*>[^<]+<\/title>/i
SEO: 存在 meta 描述？ = /<meta[^>]+name=["']?description["']?[^>]*>/i
SEO: 存在 h1？ = 开标签计数['h1'] > 0
SEO: 存在 canonical？ = /<link[^>]+rel=["']?canonical["']?[^>]*>/i
SEO: 存在 viewport？ = /<meta[^>]+name=["']?viewport["']?[^>]*>/i
SEO: 缺少 alt 的图片数 = 图片总数 - 带 alt 的图片数| 指标 | 计算方式 |
|---|---|
| 标签总数 | 所有开标签、闭标签和自闭合标签 |
| 唯一标签类型数 | 开标签中不同的小写标签名 |
| 元素节点数 | 所有开标签出现次数之和 |
| 文本节点数 | 标签之间非空文本段落数 |
| 注释数 | <!-- ... --> 块的数量 |
| 内联样式数 | 匹配 style= 的属性数量 |
| 外链 CSS 数 | <link rel="stylesheet" ...> 标签数量 |
| 外链 JS 数 | 带 src 属性的 <script> 标签数量 |
假设与局限
HTML 分析计算器使用正则表达式而非完整的 HTML 解析器，因此速度快且无需依赖。对于标准的规范 HTML，结果准确；但对于属性值中包含 > 等特殊情况的畸形 HTML，可能存在一定偏差。如需精确的 DOM 解析，建议结合浏览器 DevTools 的 Elements 面板使用。
HTML 分析计算器的使用场景
无论您需要快速了解一段 HTML 的结构，还是在没有开发环境的情况下进行初步审查，HTML 分析计算器都能胜任。
- SEO 审查 — 快速确认页面模板是否包含 title、描述、h1、canonical 和 viewport meta 等关键 SEO 信号。
- 代码审查 — 检查组件或邮件模板是否存在多余的内联样式、缺失的 alt 属性或数量异常的 script 标签。
- 文件大小预算 — 在 gzip 压缩前估算原始 HTML 负载，判断标记是否导致页面加载缓慢。
- 标签结构优化 — 利用标签分布图发现过度嵌套的
div或span，从而提升可访问性和性能。 - CMS 内容检查 — 粘贴从 CMS 导出的 HTML，在发布前验证输出结构是否符合预期。
HTML 分析计算器设计轻量：不发起任何网络请求，不存储任何数据，无需登录，粘贴即分析，秒速出结果。