标签是文档中唯一代表核心内容的语义化容器，必须且只能出现一次，不可嵌套于 等元素内，错误使用会损害可访问性与 SEO。
<div>，用错反而会破坏可访问性和 SEO。
<h3>为什么不能多个 <main> 或嵌套使用</main>
</h3>
<p>浏览器和读屏软件（如 NVDA、VoiceOver）把 <code><main></main> 当作“当前视图唯一主要内容入口”。规范强制要求：整个文档中最多一个 <main></main>，且不能是 <article></article>、<aside></aside>、<nav></nav>、<footer></footer> 的子元素。
常见错误现象：
- 在 SPA 中每个路由组件都塞一个
<main></main>→ 读屏器反复播报“主内容开始”，用户困惑 - 把侧边栏
<aside></aside>包进<main></main>→ 语义冲突，Lighthouse 报“<main></main>contains non-main content” - 服务端渲染多页共用同一模板，未动态控制
<main></main>出现次数 → 实际生成两个<main></main>
和 的区别在哪
二者都能被读屏器识别为主内容区，但语义强度和校验行为不同。现代开发中优先用原生 <main></main>，除非要兼容 IE（它完全不支持）。
立即学习“前端免费学习笔记（深入）”；
关键差异：
DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur
下载
-
<main></main> 是 HTML5 内置语义标签，无需额外 ARIA 属性，浏览器自动赋予 role="main"
<div role="main"> 是降级方案，但若同时存在 <code><main></main>，部分旧版辅助技术可能忽略 role="main"
- W3C 验证器对
<main></main> 做严格计数检查；对 role="main" 不校验数量，容易埋下多个主内容的隐患
示例（正确）：
<body>
<header>...</header>
<main><h1>文章标题</h1><p>正文</p></main>
<aside>相关链接</aside>
<footer>版权</footer>
</body>
SPA 路由切换时如何安全更新
单页应用里，<main></main> 必须随视图变化而“移动”，而不是重复渲染。React/Vue 中常见错误是每次 render() 都新建 <main></main>，导致 DOM 中残留多个。
实操建议：
- 在根组件或 Layout 组件中静态定义一个
<main></main>，所有路由内容作为其子节点动态替换（React Router v6 的 <outlet></outlet> 默认就符合）
- 避免在子组件里写
<main>{children}</main> —— 这会让每个页面都试图声明自己是主内容
- 如果必须条件渲染（如 404 页面），确保只有一处
<main></main> 存在：用 if (isMainView) { return <main>...</main> }，而不是 return <main>{is404 ? <notfound> : <page>}</page></notfound></main>
最易被忽略的一点：很多团队以为只要用了 <main></main> 就完成了语义化，其实它必须配合正确的 heading 层级（<h1></h1> 应该在 <main></main> 内部，且每个页面仅一个）、跳过导航链接（<a href="#main">跳至主内容</a> 并设置 id="main"）才能真正起效。没配这些，<main></main> 就只是个好看的空壳。
二者都能被读屏器识别为主内容区，但语义强度和校验行为不同。现代开发中优先用原生 <main></main>，除非要兼容 IE（它完全不支持）。
立即学习“前端免费学习笔记（深入）”；
关键差异：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
<main></main>是 HTML5 内置语义标签，无需额外 ARIA 属性，浏览器自动赋予role="main" <div role="main"> 是降级方案，但若同时存在 <code><main></main>，部分旧版辅助技术可能忽略role="main"- W3C 验证器对
<main></main>做严格计数检查；对role="main"不校验数量，容易埋下多个主内容的隐患
示例（正确）：
<body> <header>...</header> <main><h1>文章标题</h1><p>正文</p></main> <aside>相关链接</aside> <footer>版权</footer> </body>
SPA 路由切换时如何安全更新
单页应用里，<main></main> 必须随视图变化而“移动”，而不是重复渲染。React/Vue 中常见错误是每次 render() 都新建 <main></main>，导致 DOM 中残留多个。
实操建议：
- 在根组件或 Layout 组件中静态定义一个
<main></main>，所有路由内容作为其子节点动态替换（React Router v6 的<outlet></outlet>默认就符合） - 避免在子组件里写
<main>{children}</main>—— 这会让每个页面都试图声明自己是主内容 - 如果必须条件渲染（如 404 页面），确保只有一处
<main></main>存在：用if (isMainView) { return <main>...</main> }，而不是return <main>{is404 ? <notfound> : <page>}</page></notfound></main>
最易被忽略的一点：很多团队以为只要用了 <main></main> 就完成了语义化，其实它必须配合正确的 heading 层级（<h1></h1> 应该在 <main></main> 内部，且每个页面仅一个）、跳过导航链接（<a href="#main">跳至主内容</a> 并设置 id="main"）才能真正起效。没配这些，<main></main> 就只是个好看的空壳。
