是html5中唯一标识页面“当前视图核心内容”的语义标签，必须且只能出现一次，用于界定与url主题强相关、不可复用的独有内容，是屏幕阅读器跳转主内容的唯一锚点，多个会破坏可访问性。
<main></main> 是 HTML5 中唯一标识页面“当前视图核心内容”的语义标签，不是视觉容器，也不是可选装饰——它直接决定屏幕阅读器跳转路径、搜索引擎摘要提取范围，以及 Lighthouse 等工具的无障碍评分。
为什么多个 <main></main> 会破坏可访问性
辅助技术（如 NVDA、VoiceOver）把 <main></main> 当作“按 M 键直达主内容”的唯一锚点。一旦出现两个，读屏器可能随机选一个、跳过全部，或反复播报“主内容开始”，用户完全无法预测行为。
- SPA 中每个路由组件都写
<main>{children}</main>→ 实际 DOM 留下多个<main></main>，Lighthouse 报duplicate-main - 服务端模板未做条件判断，列表页和详情页共用同一套
<main></main>包裹逻辑 → 渲染出嵌套或并列的多个 - 浏览器 DevTools 不报错，但 axe 测试直接标红，且 WCAG 2.1 明确要求“one main landmark per page”
什么该进 <main></main>，什么必须踢出去
<main></main> 只收“这个页面独有、不可复用、与 URL 主题强相关”的内容。它不看位置，只看语义归属。
- ✅ 应包含：文章正文、商品列表、表单主体、搜索结果页的卡片流
- ❌ 必须排除：面包屑（全局导航）、登录框（跨页通用）、页脚版权、侧边推荐栏（非当前页主题）
- ⚠️ 容易误判：首页的“热门推荐”区块——若它随路由变化而动态切换主题（比如从“科技新闻”切到“本地活动”），才可纳入；否则只是通用模块，用
<section></section>更合适
SPA 路由切换时如何安全更新 <main></main>
React/Vue 里最稳妥的做法是：只在根 Layout 组件中声明一次 <main></main>，所有子路由内容作为其直接子节点动态替换，而不是让每个页面组件自己渲染一个 <main></main>。
- ✅ 正确：用 React Router v6 的
<outlet></outlet>套在<main></main>内，或 Vue Router 的<router-view></router-view>作为<main></main>唯一子元素 - ❌ 错误：在
ArticlePage里写<main><article></article></main>，又在ProfilePage里重复 —— hydration 后 DOM 中残留多个 - ⚠️ 特殊情况（如 404 页面）：不能靠
<main>{error ? <notfound></notfound> : <page></page>}</main>，要确保整个应用生命周期内<main></main>节点只存在一个实例，可通过状态控制是否渲染该节点本身
兼容性和降级处理的关键细节
IE 完全不识别 <main></main> 的语义，但能渲染为普通块级元素；真正的问题出在 CSS 和动态创建上。
- CSS 必须显式重置：
main { display: block; }，否则 IE8 及更早版本会忽略规则 - 若用
document.createElement('main')动态插入（非 SSR 输出），需手动加role="main"补充语义 - 旧版读屏工具（如 JAWS 16 以下）对 innerHTML 插入的
<main></main>可能延迟识别甚至忽略，优先走 SSR 或 hydration 初始化 - 不要混用：
<main></main>和<div role="main"> 同时存在时，部分辅助技术会优先响应后者，导致原生语义失效 <p>最难的从来不是怎么写 <code><main></main>，而是每次路由跳转、CMS 模板渲染、甚至 A/B 测试分支上线时，你有没有重新审视：“此刻 DOM 中，到底哪个区块才配叫‘主’？”
