17370845950

标签仅语义化标识主导航链接组，不提供样式或交互功能；其内容须为跳转链接，禁用按钮、表单等非导航元素；需配合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 解析层就丢失了