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