dialog 标签不适合构建侧边栏，因其语义为模态对话框，会导致焦点锁定、读屏器误读、滚动异常及 seo 降权；正确标签应为 nav（纯导航链接）或 aside（辅助内容），并配合 flex 布局实现视觉效果。
dialog 标签不适合构建侧边栏导航——它语义上是模态对话框，浏览器默认会居中、遮罩、拦截焦点，且不参与文档流布局。强行用它做侧边栏，会导致键盘焦点卡死、屏幕阅读器误读、移动端滚动异常、SEO 降权。
为什么 dialog 不该用于侧边栏
浏览器对 dialog 有强干预行为：打开时自动调用 showModal() 或 show()，强制聚焦首个可聚焦元素、禁用背景交互、添加 backdrop 层。这些特性与侧边栏“常驻、可滚动、可并行操作主内容”的需求完全冲突。
- 用
dialog.open = true后，Tab 键无法跳到主内容区，用户被锁在侧边栏里 -
dialog默认 position 是 fixed + transform 居中，要“靠左贴边”得重写一堆 CSS 抵消默认行为，且 Safari 对backdrop的渲染不一致 - 搜索引擎和读屏器识别
dialog为临时中断性内容，不会将其视为页面导航结构的一部分 - 即使加了
aria-label，也无法覆盖其原生语义：它始终是“对话”，不是“导航”
真正该用的 HTML 标签只有两个
侧边栏是否承担跳转功能，直接决定标签选择：
- 全是链接（如“API 文档”“章节锚点”“用户设置”）→ 必须用
nav，并加aria-label="侧边导航" - 是作者简介、术语解释、相关推荐等非导航内容 → 用
aside，且必须嵌套在语义合理的位置（如与main并列，或在article内部） - 别用
div套链接再靠 CSS “假装”是导航——键盘用户 Tab 不进去，读屏器跳过，Google 不索引
Flex 布局才是侧边栏的视觉基础
写了 nav 或 aside 不等于有了侧边栏效果。浏览器根本不认识“侧边栏”这个词，它只认 CSS 布局规则。
- 父容器必须设
display: flex或display: grid，否则nav和main一定垂直堆叠 -
nav推荐设flex: 0 0 260px（不缩放、不增长、固定宽），main设flex: 1自适应剩余空间 - 禁用
float：父容器不清浮动就会塌陷，文字绕进侧栏；禁用position: fixed：脱离文档流后main需手动加 margin 补位，一改就崩 - 移动端优先考虑
@media (max-width: 768px) { .container { flex-direction: column; } }，而不是display: none—— 后者会让键盘焦点直接跳过整个区域
最易被忽略的一点：侧边栏里每个链接必须是 <a></a> 或带 role="link" 的元素，且不能包裹在不可聚焦的标签（如 p、span）里——否则键盘用户 Tab 到那里就停住，却点不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
