标签仅提供语义，无默认样式，需css控制布局、间距和交互效果；单独使用时视觉上与无异，常见错误是未写css导致链接竖排堆叠。
HTML 文档导航部分不是靠某个“导航标签”实现的，而是用语义化结构 + CSS 控制呈现，<nav></nav> 是唯一专用容器，但光写它没用。
为什么 <nav></nav> 单独写不显示导航效果
<nav></nav> 只是语义标记，浏览器不会自动给它加样式、下划线或横向排列。它对 SEO 和屏幕阅读器有意义，但视觉上和 <div> 没区别。
<ul>
<li>常见错误现象：写了 <code><nav><a href="#">首页</a></nav>，结果链接堆成一竖列，没间距也没 hover 效果
display: flex）、间距（margin）、悬停状态（:hover）导航链接怎么组织才符合语义和可访问性
别用 <div> 套一堆 <code><a></a>；图标链接必须配 <nav></nav> 或隐藏文本（如 <nav aria-label="主导航"></nav>）
aria-label，例如 <nav aria-label="页内导航"></nav>，辅助技术能感知响应式导航在移动端怎么不崩
PC 上横向排列的导航，到手机上直接换行或溢出，是没处理媒体查询和交互逻辑的典型表现。
Android文档-开发者指南-第一部分：入门-中英文对照版 Android提供了丰富的应用程序框架，它允许您在Java语言环境中构建移动设备的创新应用程序和游戏。在左侧导航中列出的文档提供了有关如何使用Android的各种API来构建应用程序的详细信息。第一部分：Introduction(入门) 0、Introduction to Android(引进到Android) 1、Application Fundamentals(应用程序基础) 2、Device Compatibility(设备兼容性) 3、
- 基础方案：用
<a href="#">点击这里</a>把aria-label内链接设为<span class="visually-hidden">GitHub 仓库</span>，再加个汉堡按钮（aria-current="page"）控制显隐 - 别用
<a href="/about" aria-current="page">关于</a>直接隐藏整个@media (max-width: 768px)，会导致屏幕阅读器也读不到——应该用<nav></nav>+display: block+<button aria-expanded="false"></button>组合收起 - JavaScript 控制展开时，记得同步更新
display: none和<nav></nav>属性，否则视障用户无法知道菜单是否已打开 - 避免在
visibility: hidden里放复杂组件（如搜索框、登录弹窗），它们该属于height: 0或独立区域
真正难的不是写几个标签，而是让导航在键盘 Tab 流、屏幕阅读器、小屏触控、CSS 失效这几种场景下都不掉链子。很多人只盯着“看起来像导航”，却漏掉了 overflow: hidden、aria-expanded、焦点管理这些实际影响可用性的细节。
立即学习“前端免费学习笔记（深入）”；
