页面只能有一个，且必须直接位于下、包裹当前URL专属内容。需用开发者工具搜索确认唯一性，避免SPA中重复包裹、模板嵌套或语义错误（如嵌套在内），禁止放入全局导航、版权等可复用元素。
页面只能有一个 <main></main>，且它必须包裹当前 URL 对应的、不可跨页复用的内容——不是“看起来最重”的那块，而是“删掉页眉页脚侧栏后剩下的那部分”。
怎么确认页面真的只有一个 <main></main>
浏览器不报错，但 Lighthouse 会直接标红 Document has more than one main landmark，屏幕阅读器（如 VoiceOver）按 M 键可能跳到错误位置或完全失效。
- 打开开发者工具（F12），在 Elements 面板按
Ctrl+F（Windows）或Cmd+F（macOS），搜<main></main>，只允许匹配到一对<main></main> - 特别注意 SPA 场景：React/Vue 中别在每个路由组件里都写
<main>{children}</main>；应只由顶层路由出口（如App.tsx的Outlet外层）包裹一次 - 服务端模板（如 EJS、Twig）中，避免列表页和详情页共用同一段
<main></main>包裹逻辑，导致嵌套或并列渲染出多个
<main></main> 的父元素必须是 <header></header> 或 <nav></nav>
W3C 规范明令禁止 <main></main> 作为 <header></header>、<footer></footer>、<nav></nav>、<aside></aside> 或 <article></article> 的后代——这不是样式问题，是语义冲突。
- 检查
<main></main>的直接父节点：右键 → “Reveal in Elements panel”，确认它是否直属于 - 若发现被包在
<header></header>下（比如误把文章标题区块当网站头部），需整体剪切<main></main>并粘贴到层级，与<header></header>、<nav></nav>同级并列 -
<header></header>可以作为<main></main>的子元素存在，但仅限“本页专属标题+发布时间+作者信息”，不是全局 Logo + 主导航
<main></main> 里该放什么、不该放什么
判断标准极简：这块内容复制粘贴到另一个页面还能原样用？能 → 就不该进 <main></main>；不能 → 才是它的职责范围。
- ✅ 允许：
<h1></h1>（页面级标题）、<article></article>（博客正文）、<ol></ol>（商品列表）、<form></form>（独立提交表单）、<section></section>（如“用户评价”子模块） - ❌ 禁止：
<nav></nav>（全局导航）、<footer></footer>（版权信息）、<aside></aside>（固定侧栏）、含role="navigation"的容器、面包屑、登录框 - ⚠️ 容易误判：“热门推荐”区块——若它随路由变化主题（如从“科技新闻”切到“本地活动”），才可留在
<main></main>；否则只是通用模块，该用<section></section>或<div> <p>真正难的不是写对第一个 <code><main></main>，而是在多页复用布局、动态路由、服务端模板混合的项目里，持续保证它不被意外复制、不被嵌套、不被塞进全局结构——每次 DOM 更新后，都值得再按Ctrl+F搜一遍<main></main>。
