是语义化导航容器，仅用于站点级跳转链接，需用 aria-label 标明用途，合法子元素仅为 或导航用 ，不自带样式或交互，不可滥用或与 role="navigation" 重复声明。

nav 元素不是“添加”出来的，是语义化包裹出来的

HTML 中 <nav></nav> 不是靠 JS 插入或 CSS 生成的“导航栏”，它本身不带样式、不自动折叠、也不绑定任何交互逻辑。它的作用只有一个：告诉浏览器和辅助技术「这段内容是页面主要导航区块」。用错地方反而会干扰屏幕阅读器判断。

• 只用于包含站点级跳转链接的区域（如首页、产品、关于、联系），不要用在面包屑、分页、侧边文章目录里
• 一个页面可以有多个 <nav></nav>，但每个都得有明确用途，比如 <nav aria-label="主导航"></nav> 和 <nav aria-label="页脚导航"></nav>
• 别为了“结构完整”硬套 <nav></nav> —— 如果里面只有 <a href="#">返回顶部</a>，就该用 <footer></footer> 或普通 <div> <h3>nav 里面该放什么？别塞 div、span 或 button</h3> <p><code><nav></nav> 是流式内容容器，合法子元素只有可导航的交互项：主要是 <a></a>，也可以是 <button></button>（仅当触发 JS 导航，比如移动端菜单开关），但不能直接放 <div>、<code><span></span> 或纯文本。
  • 正确：<nav><a href="/home">首页</a><a href="/blog">博客</a></nav>
  • 错误：<nav><div class="logo">MySite</div></nav>（logo 应该放在 <header></header> 里）
  • 下拉菜单需用 <ul></ul>/<li> 结构，且一级链接必须是 <a></a>，否则键盘用户无法聚焦跳转

  nav 和 role="navigation" 到底要不要一起写？

  现代 HTML5 中，<nav></nav> 已自带 role="navigation"，重复写不仅冗余，还可能覆盖浏览器默认行为。旧项目升级时尤其要注意。

  • ✅ 推荐：<nav aria-label="主导航"></nav>（加 aria-label 提升可访问性）
  • ❌ 避免：<nav role="navigation" aria-label="主导航"></nav>（role 属于多余声明）
  • ⚠️ 特殊情况：如果用 <div role="navigation"> 替代 <code><nav></nav>（比如兼容极老 IE），才需要显式写 role；但现在基本没理由这么做

    nav 的样式和响应式要自己写，它不提供任何默认布局

    浏览器对 <nav></nav> 只有最基础的 display: block 行为，没有任何默认 padding/margin/flex 布局。你看到的“横排导航栏”全是 CSS 控制的。

    

    DeepBI DHTML 页面生成器

    生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

    下载

    立即学习“前端免费学习笔记（深入）”；

    • 常见误区：以为写了 <nav></nav> 就能自动横向排列 → 实际上得手动加 display: flex 或 display: inline-block
    • 移动端折叠菜单必须用 JS 控制 class 切换，<nav></nav> 自身不支持 open 属性（那是 <details></details> 的）
    • 注意焦点管理：用键盘 Tab 进入 <nav></nav> 后，链接应能顺序聚焦；若用了 JS 下拉，记得用 tabindex 和 focus() 补全键盘路径

    最容易被忽略的是 aria-label 的必要性——没有它，屏幕阅读器只会读“导航”，用户根本不知道这是主导航还是分类导航。还有人把登录入口塞进 <nav></nav>，其实那属于功能操作，更适合放在 <header></header> 里的 <form></form> 或独立 <aside></aside>。