一个页面只能有一个，且必须包裹当前URL对应、不可跨页复用的核心内容；需通过开发者工具搜索确认唯一性，禁止嵌套于header等语义元素内，内部不得含导航、页脚等全局内容，并建议添加aria-labelledby或aria-label提升可访问性。

一个页面只能有一个

，且它必须包裹「当前 URL 对应的、不可跨页复用的核心内容」——不是视觉居中那块，也不是最重要的那块，而是去掉导航、页眉、页脚、侧边栏后剩下的那部分。

怎么确认页面只有一个

浏览器不报错，但 Lighthouse 会明确提示 “Document has more than one main landmark”，屏幕阅读器（如 NVDA、VoiceOver）可能随机跳转或跳过主内容。实际排查要动手搜：

• 打开开发者工具（F12），在 Elements 面板按 Ctrl+F（Windows）或 Cmd+F（macOS），输入
  全文搜索
• 检查匹配结果是否仅有一对
  和 标签；特别注意 SPA 中多个路由组件各自渲染
  的情况
• 若发现冗余（比如在
  内部、
  下方、或服务端模板循环生成的片段里），只保留最外层路由容器包裹的那个，其余全部删掉

能不能嵌套在

或

里

不能。W3C 规范明令禁止

作为

、

、

、

或

的后代元素——语义冲突会导致辅助技术失效，Lighthouse 直接报错 “The element main must not appear as a descendant of the header element”。

• 定位当前
  的直接父元素，看是不是
  等语义区块
• 如果是，把整段
  剪切出来，粘贴到 下，与
  、
  并列
• 确保它不被任何已有语义边界的容器“套住”，它是 的一级子元素（或至少是语义中立容器如
  的直接子元素）

  里塞了导航或页脚为什么不行

  因为

  的职责不是“视觉上最显眼”，而是“逻辑上最专属”：它只承载该页面独有、无法模板化复用的内容。一旦混入全局结构，屏幕阅读器就无法准确定位“用户真正想读的那部分”。

  

  AI舌诊面诊问诊医疗系统+诊疗商城系统源码

  AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。

  下载

  • 逐行检查
    内部：是否存在
    、
    、role="navigation"、面包屑、版权信息、固定侧栏？这些全得移出去
  • 常见误用：把整个 Vue/React 根容器（如
    ）直接标为

    ；正确做法是只包裹路由切换后动态变化的那块内容（如 ）
  • 允许在
    内使用
    或
    组织子内容，但它们本身不能替代
    的页面级语义

  要不要加 aria-label 或 aria-labelledby

  不加不报错，但加了能显著提升可访问性精度——尤其当页面有多个标题层级或主内容无显式标题时，屏幕阅读器靠这个字段准确播报“主内容开始于……”。W3C 推荐，非强制，但别写错。

  • 如果
    内第一个子元素是
    （如博客标题），优先用 aria-labelledby="post-title" 指向该 ID
  • 如果没合适标题（如搜索结果页），可用 aria-label="搜索结果列表"，值要简洁、具体、中文
  • 绝对不要同时写
    ：原生
    已隐式携带 role="main"，重复声明可能触发双重播报

  最容易被忽略的点是动态场景：SPA 路由切换时，旧

  没卸载、新
  又挂载，导致 DOM 中短暂存在两个；服务端模板中，循环渲染文章卡片时误给每张卡都套
  。这些不会在静态 HTML 检查中暴露，必须结合运行时 DOM 快照验证。