只能出现一次，是w3c和wcag 2.1强制要求；浏览器不报错因仅校验语法，但屏幕阅读器依赖其作为“m键直达”唯一锚点，重复会导致跳过、随机选取或反复播报，lighthouse和axe会标红duplicate-main错误。
只能用一次，不是“建议”，是 W3C 和 WCAG 2.1 的强制要求。
为什么浏览器不报错但必须当真
HTML 解析器对重复 <main></main> 宽容，页面照样渲染——但这不等于它被认可。屏幕阅读器（如 VoiceOver、NVDA）依赖 <main></main> 作为「按 M 键跳转到主内容」的唯一锚点，遇到第二个就会行为失控：可能跳过全部、随机选一个、或反复播报“主内容开始”，用户完全无法预测。Lighthouse 和 axe 工具会直接标红 duplicate-main 错误，而 DevTools 却不提示，极易被忽略。
SPA 路由中最容易翻车的地方
React/Vue/Next.js 等框架里，每个路由组件（比如 Home.jsx、ArticlePage.vue）如果各自写 <main>{children}</main>，hydration 后 DOM 就会留下多个 <main></main> 实例。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- Next.js 的
app/layout.tsx里直接放<main></main>→ 错，全局壳层不该承载页面级语义 - Vue 的
<template></template>多根节点没处理好，<main></main>被意外塞进<header></header>或<section></section>→ 错，结构破坏 - 服务端模板未做条件判断，列表页和详情页共用同一套
<main></main>包裹逻辑 → 渲染出并存或嵌套结构
main 必须是 body 的直接子元素，且内部内容有严格边界
<main></main> 的父元素必须是 ，不能被 <header></header>、<nav></nav>、<footer></footer>、<section></section> 包裹。这不是样式限制，而是语义冲突：<main></main> 表达的是“整页不可替代的核心内容”，而 <header></header> 是全局复用区域。
- ✅ 正确结构：
<header></header><main></main><footer></footer> - ❌ 错误写法：
<header><main></main></header>或<section><main></main></section> - 判断内容该不该进
<main></main>，只看一条标准：这块内容复制粘贴到另一个页面还能原样用吗？能 → 不该进；不能 → 才该进（比如某篇文章正文、某个表单结果页）
最常被忽略的点是：它不是视觉容器，也不提供样式，只回答一个问题——“这块内容是否随 URL 变化、不可复用、且构成该页面存在的根本理由？”答不出，就别用 <main></main>。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
