<nav> 是语义化导航容器，仅用于站点级跳转链接，需用 aria-label 标明用途，合法子元素仅为 <a> 或导航用 <button>，不自带样式或交互，不可滥用或与 role="navigation" 重复声明。
nav 元素不是“添加”出来的，是语义化包裹出来的
HTML 中 <nav> 不是靠 JS 插入或 CSS 生成的“导航栏”，它本身不带样式、不自动折叠、也不绑定任何交互逻辑。它的作用只有一个：告诉浏览器和辅助技术「这段内容是页面主要导航区块」。用错地方反而会干扰屏幕阅读器判断。
- 只用于包含站点级跳转链接的区域（如首页、产品、关于、联系），不要用在面包屑、分页、侧边文章目录里
- 一个页面可以有多个
<nav>，但每个都得有明确用途，比如<nav aria-label="主导航">和<nav aria-label="页脚导航"> - 别为了“结构完整”硬套
<nav>—— 如果里面只有<a href="#">返回顶部</a>，就该用<footer>或普通<div>
nav 里面该放什么？别塞 div、span 或 button
<nav> 是流式内容容器，合法子元素只有可导航的交互项：主要是 <a>，也可以是 <button>（仅当触发 JS 导航，比如移动端菜单开关），但不能直接放 <div>、<span> 或纯文本。
- 正确：
<nav><a href="/home">首页</a><a href="/blog">博客</a></nav> - 错误：
<nav><div class="logo">MySite</div></nav>（logo 应该放在<header>里） - 下拉菜单需用
<ul>/<li>结构，且一级链接必须是<a>，否则键盘用户无法聚焦跳转
nav 和 role="navigation" 到底要不要一起写？
现代 HTML5 中，<nav> 已自带 role="navigation"，重复写不仅冗余，还可能覆盖浏览器默认行为。旧项目升级时尤其要注意。
- ✅ 推荐：
<nav aria-label="主导航">（加aria-label提升可访问性） - ❌ 避免：
<nav role="navigation" aria-label="主导航">（role 属于多余声明） - ⚠️ 特殊情况：如果用
<div role="navigation">替代<nav>（比如兼容极老 IE），才需要显式写 role；但现在基本没理由这么做
nav 的样式和响应式要自己写，它不提供任何默认布局
浏览器对 <nav> 只有最基础的 display: block 行为，没有任何默认 padding/margin/flex 布局。你看到的“横排导航栏”全是 CSS 控制的。
立即学习“前端免费学习笔记（深入）”；
- 常见误区：以为写了
<nav>就能自动横向排列 → 实际上得手动加display: flex或display: inline-block - 移动端折叠菜单必须用 JS 控制 class 切换，
<nav>自身不支持open属性（那是<details>的） - 注意焦点管理：用键盘 Tab 进入
<nav>后，链接应能顺序聚焦；若用了 JS 下拉，记得用tabindex和focus()补全键盘路径
最容易被忽略的是 aria-label 的必要性——没有它，屏幕阅读器只会读“导航”，用户根本不知道这是主导航还是分类导航。还有人把登录入口塞进 <nav>，其实那属于功能操作，更适合放在 <header> 里的 <form> 或独立 <aside>。
