标签必须且只能出现一次，是强制规范而非建议，用于确保屏幕阅读器和键盘用户能准确定位页面唯一核心内容，缺失或错误使用将导致无障碍访问严重受损。

main 标签必须且只能出现一次

多个

会直接破坏屏幕阅读器的主内容跳转逻辑，Lighthouse 等工具也会报「document-has-one-main」错误。这不是建议，是强制规范——浏览器和辅助技术依赖它定位「当前视图唯一核心内容」。

常见错误现象包括：

• 在 SPA 中每次路由切换都新插入一个
  ，旧的没移除
• 服务端渲染时，布局模板里套了一层
  ，子页面又加一层
• 用
  包裹侧边栏或面包屑（即使视觉居中），因为它们属于全站复用内容

main 是屏幕阅读器“跳至主内容”的唯一锚点

键盘用户按 Ctrl+Alt+Insert+M（NVDA）或 D（JAWS）时，焦点直接落到

开始处。如果缺失或错位，用户得手动 Tab 数十次才能绕过导航进正文。

使用场景明确：

• 里可放多个
  （如博客列表）、多个
  （如产品介绍 + FAQ）
• 但不能包含
  （页头）、
  、
  、
  —— 即使它们 DOM 位置在
  内部
• 面包屑、版权声明、登录框等通用模块，哪怕视觉上在中间，也必须放在
  外

main 不代表“最重要”，而是“URL 主题强相关的内容”

搜索引擎和辅助技术不看权重高低，只认语义归属。比如一个商品详情页，

应包裹商品标题、描述、价格、购买按钮；而“猜你喜欢”推荐区属于延伸内容，应放在

或

里，且不在

中。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

参数差异与影响：

• 不加
  ：页面能正常渲染，但 Lighthouse 无障碍分扣 10 分，读屏软件失去快速入口
• 用 role="main" 替代：能骗过部分检测，但不符合 HTML5 规范，某些新版读屏器会忽略或报 warning
• 嵌套
  ：HTML 解析器会静默关闭前一个，导致结构断裂，实测 NVDA 会跳过中间段落

main 和 ARIA 的配合边界很窄

本身已自带 role="main"，无需额外写 role 属性。ARIA 只在原生语义不足时补位，而

就是为解决“主内容定位”这个原生问题设计的。

容易被忽略的复杂点：

• SPA 路由切换时，需用 JavaScript 显式移除旧
  并插入新节点，不能只改 innerHTML
• 服务端组件化（如 Next.js、Nuxt）中，确保 layout 文件不包裹
  ，由页面组件自己提供
• 当页面存在多语言版本时，
  内容必须随 lang 属性同步切换，否则读屏器语音引擎可能错乱

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！