浏览器不报错是因为html解析器只校验语法合法性，而的唯一性是语义规范；lighthouse标红duplicate-main是因为其作为语义锚点，必须唯一以保障屏幕阅读器“m键直达”和搜索引擎主题提取，多个会导致识别错乱。
为什么浏览器不报错但 Lighthouse 会标红 duplicate-main
因为 main 是语义锚点，不是语法关键字——HTML 解析器允许写多个，但辅助技术和搜索引擎会直接拒绝识别。NVDA、VoiceOver 把 main 当作「按 M 键直达」的唯一入口；Google 把它当页面主题信号源。两个 main 就等于没有入口，工具只能报错，无法猜测你本意想留哪一个。
常见触发场景：
- React/Vue 中每个页面组件都写了
<main>{children}</main>，hydration 后 DOM 留下多个实例 - 服务端模板（如 EJS）未做路由判断，列表页和详情页共用同一套
<main></main>包裹逻辑 - SPA 路由切换时旧
<main></main>没被移除，新内容又塞进另一个<main></main>
如何验证当前页面是否只存在一个顶层 main
不用等上线再查，开发阶段就能确认：
- 打开浏览器开发者工具（F12），在 Elements 面板按
Ctrl+F（Windows）或Cmd+F（macOS），搜索<main>，确保只匹配到一对起始与结束标签</main> - 右键点击匹配到的
<main></main>→ “Reveal in Elements panel”，检查其直接父节点是否为；若父元素是<header></header>、<footer></footer>或<nav></nav>，立刻剪切并粘贴到下同级位置 - 用 Lighthouse 运行无障碍审计，重点看是否出现
Document has more than one <main> element</main>或<main> is not a top-level element</main>
SPA 中 safe 替换 main 内容的实操方式
关键原则：标签实例只存在一个，内容动态替换，而非重复创建。
- 在根组件（如
App.tsx或Layout.vue）中定义唯一<main></main>，子路由组件只负责填充内容，不包裹<main></main> - 避免把
<main></main>放进全局 Layout 组件内部——那会导致所有路由共享同一个<main></main>，语义上变成“全站主内容”，而非“当前视图主内容” - 如果使用服务端渲染（SSR），确保每个路由响应的 HTML 中，
<main></main>仅包裹该路由独有的主体内容，例如文章正文、商品详情、表单结果页，而非复用模块（如面包屑、搜索框）
main 里能放什么、不能放什么的边界判断
判断标准只有一个：这块内容是否随 URL 变化、不可复用？ 复制粘贴到另一个页面还能原样用？那它就不属于 <main></main>。
- ✅ 允许：
<article></article>（博客正文）、<form></form>（独立提交表单）、<section></section>（当前页专属推荐列表） - ❌ 禁止：
<nav></nav>（顶部主导航）、<footer></footer>（版权信息）、<aside></aside>（全站通用侧栏）、网站 Logo、全局搜索框 - ⚠️ 特殊允许：
<header></header>可作为<main></main>的直接子元素，但仅限本文标题、发布时间、作者等当前页面独有元信息，不是整个网站头部
最容易被忽略的是：即使某区块视觉上“看起来像主体”，只要它逻辑上可跨页复用（比如弹窗、卡片模板、分页导航），就不能硬塞进 <main></main>；该用 <section></section> + role="region" + aria-labelledby 替代。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
