是语义化容器，不负责跳转；跳转由内部 标签的 href 属性实现；推荐使用 提升可访问性、seo 和代码清晰度，但非功能必需。

<nav></nav> 标签本身不实现跳转，它只是语义化容器；真正完成跳转的是内部的 <a></a> 标签及其 href 属性。别把语义结构和行为逻辑混为一谈。

为什么必须用 <nav></nav> 包裹导航链接

不是“必须”，而是推荐：它告诉浏览器、屏幕阅读器和搜索引擎，“这一块是主要导航区域”。没有 <nav></nav>，<a></a> 照样跳转；加了 <nav></nav>，可访问性提升，SEO 更友好，代码意图更清晰。但如果你只写 <div class="nav">...</div>，功能上完全没区别——只是语义缺失。

• 嵌套在 <nav></nav> 里的 <a></a> 仍需完整 href 值才能跳转，空 href="#" 或 href="" 会触发页面顶部滚动或重载，不是真导航
• 多个导航区（如页眉主菜单 + 页脚快捷入口）应各自用独立 <nav></nav>，并配合 aria-label 区分，例如 <nav aria-label="主导航"></nav>
• 不要把所有链接都塞进一个 <nav></nav>：侧边栏工具链接、文章内相关推荐、广告位链接都不属于“站点级导航”，不该放进去

<nav></nav> 内部 <a></a> 的 href 路径怎么写才不出错

路径错误是导致点击后 404 或跳到错误页面的最常见原因。关键不在 <nav></nav>，而在 href 值是否与当前文件位置匹配。

• 根相对路径（推荐）：href="/products/index.html" —— 从网站根目录开始，无论当前页面在哪都有效；适合静态站或托管在子路径但配置了 base URL 的项目
• 相对路径：href="about.html" 或 href="../contact.html" —— 依赖当前 HTML 文件所在目录层级，嵌套深时极易出错；调试时可用浏览器开发者工具的 Network 面板看实际请求地址
• 绝对 URL：href="https://example.com/blog" —— 适合跨子域或外部链接；但硬编码域名不利于本地开发和环境迁移
• 锚点跳转：href="#faq" 必须确保目标元素存在 id="faq"，且不能写成 href="index.html#faq" 后又在其他页面点击——那会先跳转再滚动，体验割裂

新标签页打开时，rel="noopener" 不是可选项

只要用了 target="_blank"，就必须加 rel="noopener"（推荐同时加 rel="noreferrer"）。否则，新页面可通过 window.opener 访问原页面的 window 对象，造成安全漏洞和内存泄漏。

• 错误写法：<a href="/admin" target="_blank">后台</a> —— 缺少 rel，现代浏览器控制台会警告
• 正确写法：<a href="/admin" target="_blank" rel="noopener noreferrer">后台</a>
• 注意：rel="noopener" 对 SEO 无影响，但会影响 referrer 信息传递；如果需要统计来源，改用服务端日志或 UTM 参数

移动端下拉菜单里，<nav></nav> 和 <a></a> 的交互陷阱

纯 HTML 的 <nav></nav> + <a></a> 无法展开/收起下拉项——那需要 CSS :hover（桌面）或 JavaScript 控制类名（触屏）。但这里容易踩两个坑：

• 仅靠 :hover 实现下拉，在 iOS Safari 和大多数安卓浏览器中无效，因为触屏设备没有“悬停”状态；必须搭配 focus 或 JS 的 click 事件
• 下拉菜单里的 <a></a> 如果也设 target="_blank"，新页打开后原页下拉菜单可能仍保持展开态，视觉混乱；建议用 JS 在点击后主动收起
• 用 <details><summary></summary></details> 替代手写下拉是一种轻量方案，但兼容性略差（IE 完全不支持，旧版 Safari 需 polyfill）

真正决定跳转是否成功、是否安全、是否适配多端的，从来不是 <nav></nav> 标签本身，而是里面每个 <a></a> 的 href 写法、target 和 rel 属性组合，以及你是否意识到语义标签和交互行为必须分开设计。