应直接用main+section拆分功能区块，main唯一且不可嵌套，每个section须有能概括内容的标题（h2或aria-labelledby），纯样式分组仍用div，导航用带aria-label的nav，动态插入section需同步id与aria-labelledby并聚焦。
直接用 main + section 拆分功能区块，别再套三层 div
管理系统页面最典型的结构问题是「所有内容挤在同一个 div class="container" 里」，导致后续加权限控制、模块抽离、AB测试都得改 DOM 结构。重构第一刀，就是把「列表页」「表单页」「详情页」「统计看板」这些逻辑明确的区域，各自用 section 包裹，并确保整个页面只有一个 main 标签作为核心内容容器。
注意：section 不是 div 的语义马甲——它必须有标题（h2 或带 aria-labelledby），且该标题能概括其下全部内容。比如「用户管理列表」这个 section 下的 h2 就不能只写「列表」，而应是「用户账号与状态管理」。
-
main必须且只能出现一次，不能嵌套在article或section内 - 纯工具栏（如批量操作按钮组）不属于
section，用div role="toolbar"更准确 - 如果某个区块只是样式分组（比如为了加 margin-top），没有独立语义，就别硬套
section，留div也行
导航和侧边栏用 nav + aside，但得看上下文
管理系统里常有「顶部全局导航」+「左侧菜单」+「面包屑」三套导航并存。这里最容易错的是把左侧菜单写成 aside，结果被屏幕阅读器识别为「可跳过内容」——其实它恰恰是主流程入口。真正该用 aside 的，是右侧的「操作提示」「快捷帮助」「数据更新时间」这类补充信息。
顶部导航和左侧菜单都该用 nav，但要加 aria-label 区分用途：
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
<nav aria-label="全局主导航">—— 放系统级入口：首页、工单、审批、设置 -
<nav aria-label="用户管理子导航">—— 放当前模块内 tab 或二级菜单 - 面包屑不是
nav，而是nav里的ol，每项用li+a或span（当前页不用链接）
CSS 选择器失效？先查 class 是否还绑定在语义标签上
重构后最常报的错误不是结构崩了，而是样式丢了。因为老代码里大量用 div.content .table tr 这类强依赖 DOM 路径的选择器。换成 main section table 后，原 CSS 可能完全不生效。
解决思路不是倒回去加 class，而是分两步走：
- 保留关键 class 名（如
table-list、form-inline），只替换容器标签，让 CSS 仍能命中 - 把路径型选择器（
.content .header h1）逐步替换成语义组合型（main > header h1），利用浏览器对语义标签的默认权重提升可维护性 - 绝对避免用
div[role="main"]这种绕路写法——既然用了main，就别再用 ARIA 画蛇添足
动态加载模块时，section 的 id 和 aria-labelledby 必须实时同步
管理系统常用 JS 动态插入「审批流」「日志详情」等模块，这时候如果只塞 HTML 片段，没同步更新语义关系，屏幕阅读器会读出「无标题的区块」或「标题与内容错位」。
实操要点：
- 每个动态插入的
section必须带唯一id（如section-approval-123） - 对应标题元素（
h2或h3）必须有同名id，并在section上写aria-labelledby="title-123" - 插入完成后手动触发
document.getElementById('section-approval-123').focus()，确保焦点落到新区块起始位置
真正难的不是写对标签，而是每次 DOM 变更时，语义锚点是否跟着动。这点在权限切换、多语言加载、AB 测试分流时特别容易漏。
