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