一个页面必须且只能有一个，且标题须严格连续嵌套（h1→h2→h3…），跳级或重复会破坏屏幕阅读器导航与搜索引擎理解；多h1致读屏器卡在首个h1，忽略后续，因工具默认其为唯一锚点。
一个页面必须且只能有一个 <h1></h1>，且所有标题必须严格连续嵌套（<h2></h2>→<h3></h3>→<h4></h4>），跳级或重复会直接破坏屏幕阅读器导航和搜索引擎理解。
为什么多个 <h1></h1> 会让读屏器“卡住”
NVDA、JAWS 等工具在“标题模式”下按 H 键遍历时，遇到第一个 <h1></h1> 就认为是页面锚点；第二个 <h1></h1> 不会被当作新章节，而是被忽略或误判为结构错误。常见触发场景包括：
- Layout 组件里写了
<h1>Logo</h1>，页面组件又输出一个<h1>文章标题</h1> - Next.js 的
_app.tsx中渲染了<header></header>里的<h1></h1>，而pages/article.tsx又塞了一个 - SSR 渲染时
<h1></h1>被display: none或aria-hidden="true"隐藏，但仍在 DOM 中——读屏器照读不误
怎么安全地让组件支持不同 heading 级别
别写死 <h2></h2> 或用条件判断切换标签（如 {isSub ? <h3> : <h2>}</h2>
</h3>），这会导致 Lighthouse 无法静态分析、SSR 失效。正确做法是透传 level 属性并做边界控制：
const Header = ({ level = 2, children }) => {
const Tag = `h${Math.min(Math.max(level, 1), 6)}`;
return <Tag>{children}</Tag>;
};
// 使用：<Header level={1}>首页主标</Header>
// <Header level={3}>小节说明</Header>
关键点：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 服务端必须确定
level值，不能靠客户端 JS 动态算（爬虫看不到） - 禁止用 CSS 类名模拟标题，比如
<div class="h3"> —— 语义为零 <li>富文本编辑器插入的 <code><h4></h4>若前面没<h3></h3>，得在渲染层自动补一层逻辑占位（哪怕不可见），否则 Chrome DevTools 的 Accessibility 面板立刻标红 - 读屏器用户听到 “标题二级” → “标题四级”，中间两层完全消失，上下文断裂
- AI 摘要工具提取内容时漏掉整块子模块（因语义链中断）
- CMS 富文本中用户手打
####却忘了前面该有###，后端模板未校验就直出，问题藏在数据流里
<h2></h2> 到 <h6></h6> 跳级为什么比多 <h1></h1> 更难排查
跳级（如 <h2></h2> 后直接 <h4></h4>）不会触发控制台报错，但会切断辅助技术构建的“大纲树”。它不像多 <h1></h1> 那样被 Lighthouse 明确标为 heading-levels 错误，而是表现为：
最稳妥的防御方式：在构建阶段用 axe-core 或自定义 HTML 解析器做标题层级断言，把 <h2></h2> 后是否紧接 <h3></h3> 或同级 <h2></h2> 当成 CI 检查项。
真正难的不是写出符合规范的 HTML，而是在组件嵌套、CMS 输入、SSR 拼接、富文本解析这些环节中，始终让每个 <h3></h3> 都能回答清楚：“我的父级 <h2></h2> 在哪？我兄弟的 <h3></h3> 是否语义一致？”
