页面只能有一个main标签，因为它是语义锚点而非布局容器，用于屏幕阅读器快捷跳转和搜索引擎主题提取；重复会导致辅助技术行为不可预测，且规范禁止嵌套于header、nav、footer中。
为什么页面只能有一个 main 标签
因为 main 不是布局容器，而是语义锚点——屏幕阅读器（如 VoiceOver、NVDA）靠它实现「按 M 键直达主内容」，搜索引擎靠它提取页面核心主题。出现两个，辅助技术会随机选一个、跳过全部，或反复播报“主内容开始”，用户根本无法预测行为。Lighthouse 和 axe 工具会直接报 duplicate-main 错误，但浏览器 DevTools 不警告，极易被忽略。
常见翻车场景包括：
- Vue/React 中每个路由组件都写
<main>{children}</main>，实际 DOM 留下多个实例 - 服务端模板未做条件判断，列表页和详情页共用同一套
main包裹逻辑 - SPA 路由切换后，旧
main未销毁，新main又挂载，形成并存
main 不能嵌套在 header、footer、nav 里的真正原因
这不是兼容性问题，是语义冲突：主体内容不可能“属于”页眉或导航栏。main 必须与 header、nav、footer 并列，直接作为 body 的子元素存在。规范明文禁止它是这些元素的后代。
错误写法：<header><main></main></header> —— 浏览器可能不报错，但读屏器大概率跳过该 main，或将其语义降级为普通区块。
立即学习“前端免费学习笔记（深入）”；
正确结构只有一种：<header>...</header><main>...</main><footer>...</footer>
注意：header 作为 main 的子元素是允许的，但仅限“本文标题+发布时间+作者”这类当前页面独有元信息，不是网站全局头部。
哪些内容该进 main，哪些必须踢出去
判断标准极简：如果这块内容复制粘贴到另一个页面还能原样用，那它就不该进 main。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
✅ 允许放入：
- 博客文章正文、标题、发布时间、作者信息
- 商品列表页的
<ol></ol>或卡片流 - 独立搜索表单（非全站通用搜索框）
- 当前路由下的动态 Tab 内容区（如后台仪表盘中“监控数据”Tab 的图表）
❌ 必须排除：
-
nav（全局主导航）、footer（版权信息）、面包屑（nav aria-label="breadcrumb"） - 侧边推荐栏（除非它随当前 URL 主题完全重置，否则只是通用模块）
- 登录框、关注按钮、“联系我们”等跨页复用组件
⚠️ 容易误判：首页的“热门推荐”区块——若它不随路由变化而更新主题（比如始终是固定运营位），就该用 section，而非塞进 main。
SPA 和 SSR 场景下最容易被忽略的细节
动态渲染才是 main 出错的高发区，比手写 HTML 更危险。
Vue/React 中应确保：
-
main仅由最外层 Layout 或 App 组件包裹一次，子路由组件不再重复声明 - 使用
v-if/{condition && <main>}</main>时，需保证每次只存在一个有效实例，避免 DOM 残留 - 服务端渲染中，
main不得包裹在<div id="app"> 外层，否则框架挂载后结构断裂 <p>更隐蔽的问题是：SSR 首屏 <code>main内容为空或仅含 loading 占位符，会导致首屏可访问性直接降级——读屏器跳进来，发现里面什么都没有。真正难的不是写对标签，而是每次路由切换或状态更新后，仍能准确判断「此刻什么是当前视图不可复用的核心」。
