标签语义化包裹主导航链接集合，在抽屉菜单中作为内部导航容器，需配 aria-label 提升可访问性，不控制显示逻辑，禁止嵌套非导航内容。
<nav></nav> 标签本身不负责“承载抽屉菜单”，而是语义化地包裹**主导航链接集合**。在移动端抽屉菜单（Drawer）中，它常作为内部导航结构的语义容器，配合 CSS 和 JavaScript 实现展开/收起与跳转功能。
语义正确：用 nav 包裹抽屉里的主菜单链接
抽屉菜单打开后显示的是一组用于页面内跳转或路由切换的链接（如首页、关于、联系等），这正符合 <nav></nav> 的语义定义——“页面主要导航区块”。不要用 <div> 替代，避免语义丢失。
<p>示例结构：</p>
<font face="monospace">
<aside class="drawer"><br>
<nav aria-label="主菜单"><br>
<a href="/">首页</a><br>
<a href="/about">关于</a><br>
<a href="/contact">联系</a><br>
</nav><br></aside></font>
<h3>可访问性增强：必须添加 <code>aria-label 或 aria-labelledby
抽屉菜单通常默认隐藏（display: none 或 visibility: hidden），屏幕阅读器可能跳过无名称的 <nav></nav>。显式标注导航用途，确保残障用户清楚其功能。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
aria-label="主菜单"（简洁明确） - 若抽屉有可见标题（如
<h2 id="drawer-title">菜单</h2>），可用aria-labelledby="drawer-title"
样式与交互：nav 本身不控制显示，靠父容器和 JS 控制
<nav></nav> 是纯语义标签，不自带样式或行为。抽屉的展开/收起需由外部控制：
- 用 CSS（如
.drawer.open nav { transform: translateX(0); }）实现滑入动画 - 用 JavaScript 切换
.drawer的open类，触发过渡效果 - 链接跳转保持原生行为（
href）；单页应用（SPA）中可配合框架路由（如 Vue Router 的<router-link></router-link>）
注意嵌套边界：不要在 nav 里塞非导航内容
<nav></nav> 应只包含导航相关元素。常见错误包括：
- 误把登录按钮、搜索框、语言切换器直接塞进
<nav></nav>—— 它们不属于“主要导航”，应移出或用<form></form>/<div role="search"> 等更合适标签 <li>嵌套另一个 <code><nav></nav>（如子菜单）—— 可以，但需确保有独立语义（如aria-label="产品子菜单"） - 用
<nav></nav>包裹页脚链接或面包屑 —— 应分别用<footer></footer>和<nav aria-label="面包屑"></nav>
