侧边导航必须用而非，主内容区必须用且与并列；Flex布局是唯一可靠分割方案；移动端折叠禁用display:none，应采用visibility隐藏或垂直堆叠。
侧边导航必须用 <nav></nav>，不是 <aside></aside>
如果侧边栏里全是跳转链接（比如“API 文档”“用户设置”“章节锚点”），它就是导航行为，<nav></nav> 是唯一合规语义标签。用 <aside></aside> 会导致屏幕阅读器跳过、SEO 权重丢失——因为 aside 表示“附属内容”，不是导航。
常见错误：
– 把 logo、搜索框、用户头像全塞进同一个 <nav></nav>；
– 在文章内部用 <nav></nav> 包锚点列表；
– 给侧边栏加 role="navigation" 却不写 <nav></nav>，纯属冗余。
正确写法必须带 aria-label：
<nav aria-label="侧边导航">
<ul>
<li><a href="#intro">简介</a></li>
<li><a href="#install">安装</a></li>
</ul>
</nav>主内容区必须用 <main></main>，且和 <nav></nav> 并列
<main></main> 是页面唯一主内容容器，不能嵌套在 <section></section> 或 <article></article> 里，也不能漏掉。浏览器和读屏器靠它识别“哪块是用户真正该看的”。漏掉或错嵌，会导致键盘 Tab 焦点混乱、语音朗读顺序错乱。
立即学习“前端免费学习笔记（深入）”；
结构上，<nav></nav> 和 <main></main> 应同级并列于一个父容器内，例如：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<div class="container"> <nav aria-label="侧边导航">...</nav> <main>...</main> </div>
关键点：
– 不要用 <div id="main"> 代替 <code><main></main>；
– 不要把 <main></main> 放进 <section></section> 里；
– 页面中只能有一个 <main></main>，重复会触发可访问性警告。
Flex 布局是唯一靠谱的侧边+主内容分割方案
浮动（float）、绝对定位（position: absolute）或 display: inline-block 都会导致塌陷、滚动异常、焦点丢失。现代浏览器原生支持的 display: flex 才能稳定控制流式分配与响应式重排。
基础 CSS 写法：
.container { display: flex; gap: 1.5rem; }
nav { flex: 0 0 260px; } /* 固定宽度，不缩放 */
main { flex: 1; } /* 自适应剩余空间 */注意：
– 别给 nav 加 width: 260px，要用 flex-basis（即 flex: 0 0 260px）；
– gap 比 margin 更安全，避免父子 margin 合并；
– 移动端不要用 display: none 隐藏 nav，那会让键盘焦点直接跳过整个区域。
移动端折叠必须保留 DOM，禁用 display: none
iPhone 上侧边栏点开就消失，往往不是 JS 问题，而是媒体查询用了 @media (max-width: 768px) —— iPad 也匹配，导致平板误判为手机。更严重的是，直接 display: none 会破坏可访问性底线。
推荐两种安全折叠方式：
– 视觉隐藏（保留语义和焦点）：nav { visibility: hidden; height: 0; overflow: hidden; transition: all 0.3s; }
– 垂直堆叠（更自然）：@media (max-width: 480px) { .container { flex-direction: column; } }
额外提醒：
– 长菜单记得给 nav 加 overflow-y: auto，否则小屏下撑爆视口；
– :target 只能做静态高亮，别指望它替代 JS 实现展开/收起逻辑；
– 如果侧边栏是文档大纲这类核心导航，就不该隐藏，改用滚动+可聚焦设计。
