侧边栏导航必须由语义标签（nav/aside）与css布局（flex/grid）共同实现，仅标签或仅样式均不可行；导航类用nav并加aria-label，补充内容才用aside；推荐flex布局，移动端改column方向，禁用display:none隐藏。
侧边栏导航不是靠某个 HTML 标签自动“变成”侧边栏的，它必须由语义结构（nav 或 aside） + CSS 布局（display: flex 或 display: grid）共同决定。只写标签不写样式，它一定堆在顶部；只写样式不写语义，读屏器会跳过、SEO 会降权。
该用 nav 还是 aside？先看内容是不是导航行为
如果侧边栏里全是跳转链接（比如“API 文档”“用户设置”“章节锚点”），它本质是导航，必须用 nav，并加 aria-label 明确用途。屏幕阅读器只认 nav 是导航区域，aside 不具备这个能力。
- 正确：
<nav aria-label="侧边导航"><ul><li>@#@#@#@#@#@#@#@#@#@0</li></ul></nav> - 错误：
@#@#@#@#@#@#@#@#@#@1—— 读屏器可能直接忽略整个区块 - 补充内容（如作者简介、相关文章推荐、术语解释）才适合
aside，且必须嵌套在语义合理的位置：与main并列，或放在article内部
display: flex 是现代侧边栏布局的唯一可靠起点
浮动（float）和绝对定位（position: fixed）会导致塌陷、滚动异常、键盘焦点丢失，且无法响应式收缩/展开。Flex 是浏览器原生支持的流式布局方案，不用 JS 就能控制主内容自适应。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 父容器设
display: flex; gap: 1.5rem; -
nav或aside设flex: 0 0 260px;（固定宽度，不缩放） -
main设flex: 1;（撑满剩余空间，不写死像素） - 别只给
aside加float: right—— 父容器没清除浮动，主内容会塌陷、文字绕进侧栏
移动端不能简单 display: none 隐藏侧边栏
用 display: none 会让键盘 Tab 焦点直接跳过整个区域，违反可访问性底线。真要收起，得保留 DOM，用视觉隐藏+语义保留的方式。
- 推荐方案：
visibility: hidden; height: 0; overflow: hidden;+transition动画 - 或者垂直堆叠：
@media (max-width: 768px) { .container { flex-direction: column; } } - 长菜单记得加
overflow-y: auto;到nav上，否则小屏下撑爆视口 - 如果侧边栏是核心导航（如文档大纲），就别隐藏，改用滚动+可聚焦设计
:target 伪类只能做静态锚点高亮，别指望它替代 JS
:target 只在 URL fragment（比如 #section2）匹配时激活对应元素，它不会记忆状态、不响应点击事件、也不处理多级折叠。
- 目标元素必须真实存在、有尺寸：
<section id="section2">内容</section>，不能是空<div id="section2"></div> - 若侧边栏用了
position: fixed，目标元素需在视口内有实际坐标，否则页面不会自动滚动到它 - 想实现点击展开、持久化状态、或非 hash 跳转交互，必须上 JS ——
:target只适合静态文档场景
最容易被忽略的一点：删掉整个 nav 或 aside 后，main 内容必须仍能独立表达完整意思。这不是格式问题，而是语义结构是否成立的唯一判断标准。结构没对齐，再好的 CSS 也救不回可访问性和 SEO。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
