一个页面只能有一个，且必须包裹当前URL对应、不可跨页复用的核心内容；需通过开发者工具搜索确认唯一性，禁止嵌套于header等语义元素内，内部不得含导航、页脚等全局内容，并建议添加aria-labelledby或aria-label提升可访问性。
一个页面只能有一个 <main></main>，且它必须包裹「当前 URL 对应的、不可跨页复用的核心内容」——不是视觉居中那块，也不是最重要的那块，而是去掉导航、页眉、页脚、侧边栏后剩下的那部分。
怎么确认页面只有一个 <main></main>
浏览器不报错，但 Lighthouse 会明确提示 “Document has more than one main landmark”，屏幕阅读器（如 NVDA、VoiceOver）可能随机跳转或跳过主内容。实际排查要动手搜：
- 打开开发者工具（F12），在 Elements 面板按
Ctrl+F（Windows）或Cmd+F（macOS），输入<main></main>全文搜索 - 检查匹配结果是否仅有一对
<main></main>和标签；特别注意 SPA 中多个路由组件各自渲染<main></main>的情况 - 若发现冗余（比如在
<article></article>内部、<footer></footer>下方、或服务端模板循环生成的片段里），只保留最外层路由容器包裹的那个，其余全部删掉
<main></main> 能不能嵌套在 <header></header> 或 <nav></nav> 里
不能。W3C 规范明令禁止 <main></main> 作为 <header></header>、<footer></footer>、<nav></nav>、<aside></aside> 或 <article></article> 的后代元素——语义冲突会导致辅助技术失效，Lighthouse 直接报错 “The element main must not appear as a descendant of the header element”。
AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。
- 定位当前
<main></main>的直接父元素，看是不是<header></header>等语义区块 - 如果是，把整段
<main></main>剪切出来，粘贴到下，与<header></header>、<nav></nav>并列 - 确保它不被任何已有语义边界的容器“套住”，它是
的一级子元素（或至少是语义中立容器如<div> 的直接子元素） <h3> <code><main></main>里塞了导航或页脚为什么不行因为
<main></main>的职责不是“视觉上最显眼”，而是“逻辑上最专属”：它只承载该页面独有、无法模板化复用的内容。一旦混入全局结构，屏幕阅读器就无法准确定位“用户真正想读的那部分”。- 逐行检查
<main></main>内部：是否存在<nav></nav>、<footer></footer>、role="navigation"、面包屑、版权信息、固定侧栏？这些全得移出去 - 常见误用：把整个 Vue/React 根容器（如
<div id="app">）直接标为 <code><main></main>；正确做法是只包裹路由切换后动态变化的那块内容（如<articledetail></articledetail>） - 允许在
<main></main>内使用<section></section>或<article></article>组织子内容，但它们本身不能替代<main></main>的页面级语义 - 如果
<main></main>内第一个子元素是<h1></h1>（如博客标题），优先用aria-labelledby="post-title"指向该 ID - 如果没合适标题（如搜索结果页），可用
aria-label="搜索结果列表"，值要简洁、具体、中文 - 绝对不要同时写
<main role="main"></main>：原生<main></main>已隐式携带role="main"，重复声明可能触发双重播报
要不要加
aria-label或aria-labelledby不加不报错，但加了能显著提升可访问性精度——尤其当页面有多个标题层级或主内容无显式标题时，屏幕阅读器靠这个字段准确播报“主内容开始于……”。W3C 推荐，非强制，但别写错。
最容易被忽略的点是动态场景：SPA 路由切换时，旧
<main></main>没卸载、新<main></main>又挂载，导致 DOM 中短暂存在两个；服务端模板中，循环渲染文章卡片时误给每张卡都套<main></main>。这些不会在静态 HTML 检查中暴露，必须结合运行时 DOM 快照验证。 - 逐行检查
