侧边导航必须用而非，主内容区必须用且与并列；Flex布局是唯一可靠分割方案；移动端折叠禁用display:none，应采用visibility隐藏或垂直堆叠。
侧边导航必须用
如果侧边栏里全是跳转链接（比如“API 文档”“用户设置”“章节锚点”），它就是导航行为， 是唯一合规语义标签。用 会导致屏幕阅读器跳过、SEO 权重丢失——因为 aside 表示“附属内容”，不是导航。
常见错误：
– 把 logo、搜索框、用户头像全塞进同一个 ；
– 在文章内部用 包锚点列表；
– 给侧边栏加 role="navigation" 却不写 ，纯属冗余。
正确写法必须带 aria-label：
<nav aria-label="侧边导航"><ul>
<li><a href="#intro">简介</a></li>
<li><a href="#install">安装</a></li>
</ul></nav>
主内容区必须用
是页面唯一主内容容器，不能嵌套在 或 里，也不能漏掉。浏览器和读屏器靠它识别“哪块是用户真正该看的”。漏掉或错嵌，会导致键盘 Tab 焦点混乱、语音朗读顺序错乱。
结构上， 和 应同级并列于一个父容器内，例如：
<div class="container"> <nav aria-label="侧边导航">...</nav><main>...</main> </div>
关键点： 浮动（ 生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur 基础 CSS 写法： 注意： iPhone 上侧边栏点开就消失，往往不是 JS 问题，而是媒体查询用了 推荐两种安全折叠方式： 额外提醒：
– 不要用 ；
– 不要把 放进 里；
– 页面中只能有一个 ，重复会触发可访问性警告。Flex 布局是唯一靠谱的侧边+主内容分割方案
float）、绝对定位（position: absolute）或 display: inline-block 都会导致塌陷、滚动异常、焦点丢失。现代浏览器原生支持的 display: flex 才能稳定控制流式分配与响应式重排。
.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
@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 实现展开/收起逻辑；
– 如果侧边栏是文档大纲这类核心导航，就不该隐藏，改用滚动+可聚焦设计。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
