，确保只匹配一对开始与结束标签，并检查其父元素是否为；若发现多个或嵌套于等语义元素内，须立即删除冗余、调整层级。
main 标签必须且只能出现一次，否则屏幕阅读器按 M 键跳转时会失效、Lighthouse 报 duplicate-main、SEO 摘要可能错乱——这不是兼容性建议，是 W3C 规范强制要求。
怎么快速确认页面只有一个 main？
别靠肉眼扫代码，浏览器不报错不代表合规。实际开发中，SPA 动态挂载、服务端模板复用、多路由组件各自包裹 main 都容易留下冗余节点。
- 打开开发者工具（F12），切到 Elements 面板，按
Ctrl+F（Windows）或Cmd+F（macOS），搜<main> —— 只应匹配到一个起始标签和一个结束标签</main> - 滚动到底部再搜一次，SPA 场景下异步加载的模块可能在 DOM 底部插入第二个
<main></main> - 若发现多个，不要改 class 或加
aria-hidden试图“隐藏绕过”，直接删掉所有，只保留包裹当前路由视图核心内容的那个
为什么 main 不能嵌套在 header 或 footer 里？
这不是样式或布局问题，是语义冲突：main 表示“整页唯一主体”，它不可能“属于”页眉或页脚。W3C 明文禁止它是 header、footer、nav 的后代。
- 错误写法：
<header><main></main></header>→ Lighthouse 报错The element main must not appear as a descendant of the header element，NVDA/VoiceOver 很可能直接跳过该main - 正确结构只有一种：
<header></header><main></main><footer></footer>，所有语义区块平级并列于body下 -
header可以作为main的子元素，但仅限本页专属标题（如<h1>今天学了什么</h1>+ 发布时间），不是网站 Logo + 全局导航
main 里该放什么、不该放什么？
判断标准极简：如果这块内容复制粘贴到另一个页面还能原样用，那它就不该进 main。它不看视觉权重，只认语义归属。
- ✅ 允许：
<h1></h1>（页面级标题）、<p></p>（文章正文）、<ol></ol>（商品列表）、<form></form>（独立提交表单）、<section></section>（如“用户评价”子模块） - ❌ 禁止：
<nav></nav>（全局导航）、<footer></footer>（版权信息）、<aside></aside>（侧边推荐）、<header></header>（网站 Logo + 主导航）、面包屑、广告位 - ⚠️ 容易混淆：产品页里的“客服入口”按钮、搜索框、登录入口——它们服务主题但不构成主题本身，应放在
header或section，而非main
React/Vue 中如何安全更新 main？
最常见翻车点是每个路由组件都写 <main>{children}</main>，hydration 后 DOM 里就堆出多个实例。
- ✅ 正确做法：只在根 Layout 组件中声明一次
<main></main>，用<outlet></outlet>（React Router v6）或<routerview></routerview>（Vue Router）作为其唯一子节点，由路由系统动态替换内容 - ❌ 错误做法：在
ArticlePage.tsx和ProfilePage.vue里各自包裹<main></main> - ⚠️ 特殊情况（如 404 页面）：不能靠
<main>{error ? <notfound></notfound> : <page></page>}</main>，要确保整个生命周期内main节点只存在一个实例；可通过状态控制是否渲染该节点本身，而不是让它条件性地“切换内容”
最容易被忽略的一点：main 不是视觉容器，不带默认样式，也不提供布局能力——它纯粹是给机器看的语义锚点。写对位置、保唯一、剔除复用内容，这三件事做错任何一件，可访问性和 SEO 就已经受损了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
