标签仅语义化标识主导航链接组，不提供样式或交互功能；其内容须为跳转链接，禁用按钮、表单等非导航元素；需配合css/js实现下拉、响应式等行为，且旧ie需polyfill支持。
nav 标签不是用来“定义菜单结构”的
<nav></nav> 是语义化容器，只表示「页面中一组主导航链接」，不负责样式、交互或菜单层级逻辑。浏览器和屏幕阅读器靠它识别导航区域，但点击展开、下拉、高亮当前页这些功能，必须靠 CSS 和 JavaScript 实现。
- 写
<nav><a href="/home">首页</a></nav>不会自动变横向菜单，也不会响应鼠标悬停 - 多个
<nav></nav>是允许的（比如顶部主菜单 + 页脚快捷链接），但语义重复的（如一个页面里套三层<nav></nav>）会被辅助技术忽略 - SEO 不直接依赖
<nav></nav>，但合理使用能提升结构化数据解析准确率
nav 里该放什么？不该放什么？
内容必须是「跳转用的链接」，不能是按钮、搜索框、登录表单或纯文本说明。
- ✅ 正确：
<nav><a href="/products">产品</a><a href="/about">关于</a></nav> - ❌ 错误：
<nav><button onclick="toggleMenu()">☰</button></nav>（<button></button>不是导航链接） - ❌ 错误：
<nav><form><input name="q"></form></nav>（搜索框不属于导航语义） - ⚠️ 边界情况：面包屑（
<ol class="breadcrumb"></ol>）通常不用<nav></nav>包裹，因为它是位置路径，不是跳转入口集合
响应式下拉菜单必须配合 JS 才能工作
HTML5 本身不提供任何菜单交互能力。<nav></nav> 只是告诉浏览器“这里是一组导航链接”，展开收起、移动端汉堡菜单、键盘焦点管理全靠外部代码。
- 移动端常见问题：没加
role="navigation"或aria-expanded属性，导致屏幕阅读器无法感知菜单状态 - 键盘导航必须手动实现
Tab进入、Enter展开、ArrowDown移动焦点等逻辑 - 纯 CSS 实现的“伪下拉”（靠
:hover或:focus-within）在触摸设备上基本失效，不可靠
<nav aria-label="主导航">
<ul>
<li><a href="/products">产品</a></li>
<li>
<button aria-expanded="false" aria-controls="submenu-1">解决方案</button>
<ul id="submenu-1" hidden>
<li><a href="/cloud">云服务</a></li>
<li><a href="/security">安全</a></li>
</ul>
</li>
</ul>
</nav>
兼容性与 polyfill 注意点
所有现代浏览器都原生支持 <nav></nav>，但老版本 IE（≤8）不认识它，会当成未知标签处理——既不渲染样式，也不暴露 DOM 接口。
立即学习“前端免费学习笔记（深入）”；
- 如果必须支持 IE8，需用
document.createElement("nav")注册元素（或引入html5shiv） - 即使加了 html5shiv，IE8 仍不会为
<nav></nav>应用默认样式（比如 display: block），得手动补nav { display: block; } - 不要指望
<nav></nav>在旧浏览器中改善 SEO 或可访问性——它的语义价值在 DOM 解析层就丢失了
