nav 是 html5 语义化导航元素，用于包裹网站级或页面级主要导航链接，提升 seo 和无障碍访问；应配合 ul/li 列表使用，并通过 aria-label 区分多个 nav 的用途，样式与交互需由 css/js 实现。
nav 标签是 HTML5 中专门用于标记页面主要导航链接区域的语义化元素。它不改变样式，但能清晰告诉浏览器、开发者和辅助技术“这部分内容是用来导航的”，对 SEO 和无障碍访问（如屏幕阅读器）有实际帮助。
nav 应该包裹哪些链接
只用于网站级或页面级的主要导航结构，比如：
- 顶部主导航栏（首页、产品、关于我们、联系）
- 侧边栏的全局栏目跳转链接
- 页脚中的核心站点链接（如隐私政策、条款、博客入口）
避免用在面包屑导航、搜索结果页的分页、文章内锚点链接或纯装饰性按钮上——这些更适合用 div、ol 或普通链接。
常见写法：配合列表提升语义和可访问性
导航链接通常以列表形式组织，既符合视觉习惯，也利于屏幕阅读器识别项数与顺序：
aria-label 是加分项，为屏幕阅读器提供明确说明，尤其当页面有多个 nav（如顶部+页脚）时很实用。
可以有多个 nav，但需区分用途
一个页面允许使用多个 nav，只要它们各自承担独立的导航功能。例如：
- 顶部 nav：全站栏目
- 侧边 nav：当前频道的子分类（加 aria-label="产品分类"）
- 页脚 nav：法律与支持类链接（加 aria-label="底部快捷链接"）
不要只为样式或布局方便而滥用 nav；语义准确比标签数量更重要。
样式和交互完全由 CSS/JS 控制
nav 本身没有默认样式，也不自带下拉、响应式等功能。你需要：
- 用 CSS 设置布局（如 flex、grid）、悬停效果、移动端折叠逻辑
- 用 JavaScript 实现菜单展开/收起、焦点管理、键盘导航支持（如按 Tab 键顺畅切换）
语义结构搭好后，表现层才开始工作——这是现代 HTML 的分工逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
