nav标签仅提供语义化导航区域，需CSS实现顶部横向布局：用flex使ul内li水平排列，配合aria-label和aria-current提升可访问性，响应式下小屏转汉堡菜单。
nav 标签本身不负责样式，它只是语义化地声明“这是一个导航区域”。要实现顶部横向导航栏，需配合 CSS 控制布局和外观。
语义结构：用 nav 包裹导航链接
把主导航菜单放在 nav 元素内，内部通常用无序列表 ul + li + a 组织，结构清晰、利于可访问性和 SEO：
<nav><ul>
<li><a href="/home">首页</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/services">服务</a></li>
<li><a href="/contact">联系</a></li>
</ul>
</nav>
横向布局：用 Flex 实现一行排列
给 nav ul 设置 display: flex，再让 li 水平排列，是最简洁可靠的方式：
- 移除 ul 默认的 padding 和 list-style
- 设置 nav ul { display: flex; }
- 设置 nav li { margin-right: 1rem; } 或用 gap 控制间距
- 可加 nav { background: #333; } 和 a { color: white; text-decoration: none; padding: 0.75rem 1rem; } 完善视觉
响应式适配：小屏转为汉堡菜单（可选）
纯 HTML+CSS 实现响应式时，可用媒体查询隐藏横向菜单、显示按钮，并借助 checkbox hack 或 JS 切换类名控制展开。但核心原则不变：
立即学习“前端免费学习笔记（深入）”；
- 结构仍由 nav 承载，语义不丢失
- 横向布局只在中大屏幕生效（如 @media (min-width: 768px)）
- 移动端优先设计时，初始状态可设为垂直堆叠，再在宽屏下 flex 横向展开
辅助细节：提升可用性与兼容性
几个容易忽略但实用的点：
- 为 nav 添加 aria-label="主导航"，帮助读屏软件识别用途
- 当前页面对应链接建议加 aria-current="page"（如 <a href="/about" aria-current="page">关于</a>）
- 避免仅靠颜色区分可点击项，确保足够对比度
- Flex 布局在现代浏览器中支持良好；若需兼容 IE10/11，可加 -ms-flexbox 前缀或改用 inline-block + vertical-align
