HTML 结构分析

功能

• 标题层级：按顺序列出 h1–h6 与各自的文本（标题里的行内标签会穿过，`<h2>Hello <em>world</em></h2>` 读作 `Hello world`）
• ⚠️ 跳级检测：`<h1>` 直接到 `<h3>` 会被指出来并说明为什么这是个问题
• ⚠️ 没有 h1 时说明「单页应用的骨架里这样是正常的」，而不是只给一个 0
• 链接：全部 `<a href>` 的地址与锚文本，并标出外链，附带 `rel` 与 `target`（没有就写「（无）」）
• ⚠️ 链接类型分类：内部 / 外部 / 锚点 / mailto / tel / javascript:（不安全，单独强调）/ 可下载 / 空链接，各类给数量与占比
• 图片：⚠️ 缺 alt 与 `alt=""` 分开统计 —— 前者是漏了，后者是明确的声明
• 标签频次：按出现次数排序并给出占比，看这段 HTML 主要靠什么标签搭起来
• 纯文本：剥掉标签后的正文（script 与 style 的内容不算），块级标签之间换行
• 文档信息：title、lang、meta description、meta viewport
• 统计：字节数、标签总数、正文字数、注释条数
• ⚠️ 不做标签纠错 —— 看的就是原始文本里写了什么，没闭合的标签照样是没闭合
• ⚠️ 属性值里的 `>`、script 里的 `<` 都不会把扫描带偏

使用方法

1. 把 HTML 粘进去（整页或片段都行）
2. 需要正文就勾上「一并输出剥掉标签后的纯文本」
3. 按分组看：文档信息 → 标题层级 → 跳级 → 链接 → 图片 → 标签频次

常见问题

为什么不用浏览器的 HTML 解析器？

因为解析器会纠正它认为错的 HTML，而分析工具恰恰要看原始文本里写了什么。一个没有闭合的 `<div>`、一个写在 `<table>` 里错位的标签，都是作者需要知道的事实 —— 被解析器悄悄补好就看不见了。另外，这个站的转换类工具一律是纯函数，一碰 `document` 就没法在没有浏览器的环境里测，所以全站共用一个不依赖 DOM 的解析器（HTML 转 Markdown、UBB 转换、XPath 三个工具用的也是它）。它不追求实现完整的 HTML5 解析算法，只做标签与文本的切分，这一点页面上写明了。

「没有 alt」和「alt=""」有什么不同？

区别很大。缺 alt 属性是漏了：屏幕阅读器不知道这张图是什么，只能把文件名念出来（「IMG_2043.jpg」）。而 `alt=""` 是明确的声明：「这是一张装饰图，读它没有意义」，屏幕阅读器会跳过它。把两者并成一类，会让一个正确写了 `alt=""` 的页面看起来和漏写的一样糟 —— 而修复方向恰恰相反：前者要补描述，后者要保持原样。

为什么没有 h1 有时候是正常的？

因为单页应用的 HTML 往往只是一个骨架：内容与标题都由 JavaScript 在浏览器里建出来，服务端发出的这份 HTML 里本来就没有 `<h1>`。搜索引擎对这种情况有自己的处理方式。而对服务端渲染的文档或博客文章来说，没有 h1 多半就是漏了。这个工具没法替你判断你的页面属于哪一种，所以只把两种可能都说出来。

标签频次有什么用？

用来一眼看出这段 HTML 是怎么搭起来的。一段满是 `<div>` 的片段说明布局靠容器堆；`<table>` 很多说明是表格或老式的布局；`<span>` 异常多通常是从编辑器里粘出来的产物，往往可以简化。它只给数量，不做评价 —— 数量本身不说明好坏，但它是继续往下看的线索。

剥出来的纯文本能直接拿去用吗？

看用途。它是「这段 HTML 大致讲了什么」的忠实摘要，用来做字数统计、提取摘要、或者快速看内容都在。但它不是渲染结果：CSS 里的 content、JS 动态插入的文本、`:before` 伪元素都不会出现。要精确的渲染文本，用浏览器的「查看源码」或者无头浏览器。

为什么 `javascript:` 链接要单独标出来？

因为它是这张分类表里唯一有安全含义的一类。`<a href="javascript:...">` 会在点击时执行脚本，是 XSS 的常见入口，也常常是模板拼接出错的痕迹。别类链接最多是风格问题，而它可能是一个真实的漏洞 —— 所以它单独成一类、显示为红色，并附一句说明，而不是混在「其它」里。