页面中必须且只能有一个<main>元素，多一个或少一个均违反规范，会导致屏幕阅读器跳转失效和Lighthouse报错；需手动在Elements面板搜索验证，避免SPA重复渲染、模板路由误判或静态HTML手写重复。
页面中只能有一个 <main></main>，多一个或少一个，都会让屏幕阅读器跳转失效、Lighthouse 直接报错，不是“建议”，是规范强制要求。
怎么快速确认页面只有一个 <main></main>
浏览器不会警告，但错误真实存在。必须手动验证：
- 打开开发者工具（F12），在 Elements 面板按
Ctrl+F（Windows）或Cmd+F（macOS），搜索<main></main> - 只应匹配到一对
<main></main>和；若出现多个，说明 SPA 组件重复渲染、服务端模板未做路由判断，或静态 HTML 手动写重了 - 特别注意：React/Vue 中每个页面组件都写
<main>{children}</main>是最常见翻车点——DOM 里会留下旧实例，导致并存
<main></main> 为什么不能嵌套在 <header></header> 或 <footer></footer> 里
这不是兼容性问题，是语义冲突：主体内容不可能“属于”页眉或页脚。
- 规范明文禁止
<main></main>作为<header></header>、<footer></footer>、<nav></nav>的子元素；Lighthouse 会报The element main must not appear as a descendant of the header element - 错误写法：
<header><main>...</main></header>→ 屏幕阅读器大概率跳过该<main></main>，或降级为普通<div> <li>正确结构只有一种：<code><header></header><main></main><footer></footer>，所有语义区块同级并列 - 例外：
<header></header>可以作为<main></main>的直接子元素，但仅限本页专属标题（如文章<h1></h1>+ 发布时间），不能是全站 Logo + 导航 - ✅ 应包含：文章正文、商品详情、搜索结果卡片流、表单主体、404 提示文案
- ❌ 必须排除：
<nav></nav>、<footer></footer>、面包屑、版权信息、登录框、“关注我们”模块等全站复用内容 - ⚠️ 容易误判：“热门推荐”是否进
<main></main>，取决于它是否随当前 URL 动态变化主题——若固定展示，就是通用模块，应移出 - SPA 路由切换时，别销毁再重建
<main></main>，而应复用唯一实例，只替换其innerHTML或通过框架的<outlet></outlet>/<router-view></router-view>动态注入内容
<main></main> 里该放什么、不该放什么
判断标准非常实在：如果这块内容复制粘贴到另一个页面还能原样用，那它就不该进 <main></main>。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的复杂点在于：SPA 中 <main></main> 实例必须全程存活，不能靠组件挂载/卸载来管理；服务端模板里，<main></main> 不能出现在 layout 层，而必须由具体页面决定是否渲染——否则 404 页面或弹窗场景极易意外生成空 <main></main> 或遗漏。
