必须且只能出现一次，是页面当前视图核心内容的唯一语义锚点，须直接位于下、不可嵌套于内，重复或错位会破坏可访问性、触发lighthouse报错并影响seo。
必须且只能有一个
HTML5规范与WCAG 2.1都强制规定：
- 多个
会让屏幕阅读器（如NVDA、VoiceOver）无法稳定响应“M键跳转主内容”，可能跳过、随机选取，甚至反复播报“主内容开始” - Lighthouse会明确报错duplicate-main，axe工具标红，SEO也可能因语义混乱而降权核心内容识别
- 常见翻车点：React/Vue中每个路由组件都写
；服务端模板未区分列表页与详情页，统一套用 包裹逻辑；SPA路由切换后旧 未清理，新内容又渲染一个
必须直接位于body下，不能嵌套
- 错误写法：
… - 正确结构：
，所有语义区块平级并列 - 例外允许：
内部可包含 ，但仅限本页专属标题（如文章 、发布时间、作者），而非全站Logo+主导航
内容必须“不可复用”
判断某段内容该不该放进
- 应放入：博客正文、商品详情、表单主体、当前页专属评论区
- 应移出：全局导航栏、页脚版权信息、右侧分类侧边栏、“关注我们”通用模块
- 若页面有多个栏目（如首页含文章列表+推荐位+最新动态），全部统一包在一个
内，而不是给每个栏目单独加
验证与修复方法很直接
浏览器不会主动报错，但错误极易被忽略。必须人工确认：
- 打开开发者工具（F12），在Elements面板按Ctrl+F（Windows）或Cmd+F（macOS），搜索
- 结果应仅匹配一对开始与结束标签；若发现多处，删掉冗余项，只保留包裹当前路由视图的那个
- 检查
的父元素是否为；如果不是，剪切整个 块，粘贴到层级，与 - SPA项目中，应在根Layout组件中声明唯一
，用 或 作为其唯一子节点，避免各页面组件自行渲染
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
