最直接方式是打开elements面板，右键h1～h6元素选“inspect aria attributes”，查看aria-level是否连续且符合逻辑；accessibility面板会标红跳级、重复h1、section缺标题等问题。
Chrome DevTools 里怎么看标题层级是否健康
最直接的方式是打开 Elements 面板，右键任意 <h1></h1>～<h6></h6> 元素 → 选 “Inspect ARIA attributes”，看 aria-level 值是否连续、是否符合内容逻辑。这个值是浏览器引擎（Blink）内部计算出的实际语义层级，比单纯数标签名更可靠。
注意：浏览器不会弹窗报错，但 Accessibility 面板会把跳级、重复 <h1></h1>、<section></section> 缺标题等结构问题标为红色警告。
为什么 <section></section> 一加，<h3></h3> 就变子级了
标题的语义层级不是静态写死的，而是由它所在的**语义容器**动态决定的。同一个 <h3></h3>，在 <main></main> 下是平级，在 <section></section> 内就自动降为子节。
-
<main><h2>A</h2> <section><h3>B</h3></section></main>→ B 是 A 的子节 -
<main><h2>A</h2> <div><h3>B</h3></div></main>→ B 被识别为跳级（<div> 无语义，不构成新大纲上下文） <p>所以别只盯着标签名改，得看它被谁包裹、和谁并列。</p> <h3>服务端/框架里标题容易崩的三个典型场景</h3> <p>动态渲染时，标题结构最容易在看不见的地方被破坏：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>全局 Layout 组件硬塞一个 <code><h1>Logo</h1>，页面组件又输出一个<h1>文章标题</h1>→ 实际两个<h1></h1>，大纲分裂 - 富文本字段渲染后自动包裹
<p></p>，变成<p></p> <h3>xxx</h3>→ 违反 HTML 嵌套规范，部分读屏器直接忽略该标题 - SPA 路由切换后没更新
<h1></h1>文本，屏幕阅读器仍读旧标题，且搜索引擎可能索引到错误主标题
解析标题时，别漏掉 <title></title> 和 <meta name="description">
对爬虫和 SEO 来说，<title></title> 是页面主题的唯一锚点，必须每页唯一、含核心词、不能是通用文案；<meta name="description"> 虽不参与大纲，但影响搜索结果摘要展示。
它们都位于 ，且在 HTML 解析早期就被解析器提取——比 DOM 构建还早。如果用 JS 动态改 document.title，爬虫看不到；同理，服务端没吐出 <meta>，就不会有描述。
真正难的不是“找标题”，而是确认它出现在正确上下文、被正确容器包裹、且未被其他层覆盖或隔离。
