必须且只能存在一个<main>标签，它应唯一挂载在<body>下作为语义锚点；所有页面组件不得自行包裹<main>，而应在顶层路由出口（如App.tsx或layout.tsx）统一声明<main><Outlet/><router-view/></main>，子组件使用<section><article>等替代，确保Lighthouse无“multiple main”警告且屏幕阅读器准确定位主内容。
<main></main> 必须且只能存在一个，无论路由怎么切换、组件如何复用，它都得是 DOM 中那个唯一的、直接挂载在 <body> 下的语义锚点——不是“看起来像主体”，而是“逻辑上不可跨页复用”的那块内容。
React/Vue 路由组件里别各自写 <main>
常见错误是每个页面组件（如 Home.vue、Profile.tsx）都包裹一层 <main>{children}</main>。hydration 或路由切换后，旧 <main> 没销毁，新 <main> 又挂载，DOM 里就堆出多个。
- 正确做法：只在顶层路由出口外层（如 React Router 的
App.tsx、Next.js 的app/layout.tsx）声明一次<main><Outlet /></main>或<main><router-view /></main> - 子组件一律用
<section>、<article>或普通<div>，不碰<main> - SPA 动态加载内容时，只替换
<main>内部 HTML，绝不新增或移除<main>标签本身
怎么确认当前页面真的只有一个 <main>
浏览器不会报错，但 Lighthouse 会标红 Document has more than one main landmark，VoiceOver 按 M 键可能跳空或卡住。必须手动验证：
- 打开开发者工具（F12），切到 Elements 面板，按
Ctrl+F（Windows）或Cmd+F（macOS），搜<main> - 匹配结果应仅有一对
<main>和</main>；注意滚动到底部再搜一次，避免漏掉异步加载后插入的残留节点 - 右键点击该
<main>→ “Reveal in Elements panel”，确认其父节点是<body>，而非<header>、<div id="app">等容器
<main> 里混了导航或面包屑怎么办
这类内容哪怕只在当前页显示，逻辑上仍是全站复用模块——放进 <main> 会污染语义边界，导致屏幕阅读器把导航当成“主内容”来读。
-
<nav class="breadcrumb">必须移出<main>，放到<nav aria-label="Breadcrumb">中，与<main>同级 - 侧边栏、登录框、版权信息、固定广告位，统统剪出去；它们属于
<aside>、<footer>或独立<section> - 判断标准极简：这块内容复制粘贴到另一个页面还能原样用？能 → 就不该在
<main>里
真正难的不是第一次写对 <main>，而是在多路由、服务端模板、动态组件混合的项目里，每次 DOM 更新后都保持它不被意外复制、不被嵌套、不被塞进全局壳层——它不是个装饰标签，是辅助技术定位页面心脏的唯一坐标。
