main 标签是页面唯一主内容区，须位于 header 后 footer 前、不嵌套于 article/section 内；HTML5 规范限定每页至多一个，SPA 中应动态更新内容而非重复添加。
main 标签在响应式布局中应作为页面主体内容的语义容器，通常位于 header 之后、footer 之前，且**不嵌套在其他具有主体含义的标签（如 article、section）内作为父容器**——它代表整个页面唯一的主内容区。
明确语义边界：一个页面只能有一个 main
HTML5 规范要求每个文档最多包含一个 main 元素（除非隐藏状态为 hidden）。在响应式项目中，常见错误是为每个“模块”或“卡片”都套上 main，这会破坏语义结构，影响可访问性与 SEO。
- 正确做法：把真正面向用户的核心内容（如文章正文、产品列表、表单主区域）放在 main 内
- 避免做法：不要在侧边栏、导航栏、页脚小工具或模态框中使用 main
- 注意：SPA 中切换视图时，应动态更新 main 的内容，而非重复添加多个
响应式流式布局中的定位策略
main 本身不带默认样式，它的布局行为完全由 CSS 控制。在响应式设计中，推荐结合现代布局方案灵活定位：
- 在移动优先场景下，main 通常独占一行，宽度 100%，居中或留白适配屏幕
- 在桌面端，可配合 Flexbox 或 Grid 与
aside（侧边栏）、nav协同布局，例如：
grid-template-areas: "header header" "nav main" "footer footer"; - 避免给 main 设置固定宽高或浮动；用
max-width+margin: auto控制阅读宽度更合理
与 ARIA 及可访问性的协同要点
屏幕阅读器会将 main 识别为“主内容区域”，支持快捷跳转（如 JAWS 的 M 键）。响应式开发中需注意：
- 确保 main 在 DOM 顺序中尽可能靠前（视觉上可通过 CSS 重排，但语义顺序不变）
- 不要用
display: none隐藏 main，否则内容对辅助技术不可见；改用visibility: hidden或aria-hidden="true"+ 显式管理 - 若页面存在多个逻辑主区块（如双面板仪表盘），应通过
role="main"手动标注最相关的一个，其余用section+aria-labelledby
配合媒体查询的结构微调建议
响应式不是只调样式，必要时也可微调结构层级，但要保持语义一致性：
- 小屏下可将原本独立的
aside移入 main 底部（用 JS 或服务端渲染），但需同步更新aria-labelledby关联标题 - 避免在 CSS 中用
@media改变 main 的嵌套关系（如让它变成section的子元素），这违反 HTML 结构逻辑 - 可通过
prefers-reduced-motion等媒体查询，在 main 内统一控制动画/过渡行为，提升体验一致性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
