h1必须且只能出现一次，代表文档主标题，多用会引发seo降权和读屏混乱；h2–h6须严格嵌套，不可跳级，应配合section/article重置层级，工具校验优于人工。
h1必须且只能出现一次，别为了SEO硬塞多个
页面语义结构里，<h1></h1>代表整个文档的主标题，浏览器、屏幕阅读器和搜索引擎都按这个逻辑解析。塞两个<h1></h1>不会提升排名，反而可能触发爬虫降权或读屏混乱。
常见错误是首页放一个<h1></h1>，又在轮播图、活动Banner里各加一个——这些应该用<h2></h2>或<div>配合<code>aria-label处理。
- 单页应用（SPA）注意：路由切换时要动态更新
<h1></h1>内容，不能静态写死 - 后台系统或仪表盘类页面，若无明确“主标题”，可用
<h1></h1>包裹当前模块名（如“用户管理”），而非留空或删掉 - 避免用
<h1></h1>做视觉装饰——改CSS样式，别靠降级用<h2></h2>冒充<h1></h1>
h2–h6必须严格遵循嵌套逻辑，不能跳级
HTML5规范不强制要求视觉层级连续，但语义层级必须连续。比如出现<h3></h3>，前面必须有<h2></h2>作为父级；<h2></h2>前面必须有<h1></h1>或<section></section>/@#@#@#@#@#@#@#@#@#@0，粘贴HTML或输URL，它会在“Outline”标签页生成结构树，一眼看出断层或重复
<li>浏览器插件：<code>axe DevTools（Chrome/Firefox），运行后点“Heading order”，红色报错项直接定位到具体<h></h>标签
html-validate（npm包），配置规则"heading-order": "error"，提交即卡住不合规代码Vue/React里动态生成标题要小心key和条件渲染
组件化开发中，v-if或{condition && <h2>}</h2>容易导致标题意外消失或重复，进而破坏整页层级。
比如一个卡片列表组件，每个卡片带<h3></h3>，但某张卡片数据为空时被v-if移除——剩余卡片的<h3></h3>还在，但父级<h2></h2>可能已被另一个条件隐藏，结构就断了。
- 优先用
v-show或visibility: hidden替代v-if隐藏标题，保持DOM结构完整 - 动态标题内容务必绑定
key，避免Vue复用节点导致<h2></h2>残留为<h3></h3> - SSR场景下，服务端渲染的标题层级必须和服务端逻辑一致，否则Hydration时React/Vue会警告并降级处理
axe检查加进PR checklist，比写文档管用。
