main必须是body的直接子元素，与header、nav、aside、footer并列，不得嵌套于任何容器内；其视觉位置由css grid/flex控制，语义层级不可被display:contents、absolute或float破坏。
main 必须是 body 的直接子元素，与 nav、aside、header、footer 并列
它不能嵌套进任何分区语义标签里，哪怕视觉上想让它“出现在右侧栏旁边”或“夹在两列之间”。浏览器和辅助技术只认结构顺序，不认CSS重排。
- ✅ 正确：
<header>…</header><nav>…</nav><main>…</main><aside>…</aside><footer>…</footer> - ❌ 错误：
<div class="grid"> <header>…</header><main>…</main><aside>…</aside> </div>（main被包裹在div里，虽不影响渲染，但削弱语义明确性） - ❌ 严重错误：
<nav><main>…</main></nav>或<header><main>…</main></header>（违反HTML5规范，辅助技术可能完全忽略）
多列布局中，main 的视觉位置由 CSS 决定，而非嵌套关系
在 Grid 或 Flex 布局中，你可以让 main 占一列、跨多列，或与 aside 并排，但前提是它在 DOM 中仍保持顶层地位：
- 桌面端常用 Grid 区域划分：
body { display: grid; grid-template-areas: "hdr hdr" "nav main" "as1 main" "ftr ftr"; } header { grid-area: hdr; } nav { grid-area: nav; } main { grid-area: main; } aside { grid-area: as1; } footer { grid-area: ftr; } - 移动端可改为单列流式：
grid-template-areas: "hdr" "nav" "main" "as1" "ftr"，无需改动 HTML 结构
不要用 CSS 改变 main 的语义层级
- 避免在媒体查询里写
@media (min-width: 768px) { main { display: contents; } }—— 这会让 main 失去地标角色 - 不要用
position: absolute或float把 main “塞进”其他区块视觉范围内——它仍得是独立语义单元 - 若需小屏下把 aside 移入 main 底部，应通过 JS 动态移动 DOM 节点（或服务端条件渲染），同时更新
aria-labelledby关联标题，确保语义连贯
与其他列内容的语义边界必须清晰
里可以包含 ` `、` `、` - 如果某列内容属于当前页面核心任务（如仪表盘左侧操作面板+右侧数据视图），且两者不可分割，则整个双列区域都可包在
<main></main>内；若右侧只是辅助信息，则应单独用<aside></aside>，并确保<main></main>仅包裹左侧主操作区
不复杂但容易忽略
