学习前提
理解HTML链接、列表和CSS Flexbox；本例不要求数据库或本地存储。
本课完成后你能做什么
实现链接数量变化仍可用的导航，明确导航与操作按钮的区别。
先理解机制
先写nav和真实链接，再添加Flex布局。链接用于前往地址，button用于当前页面动作；不要把div加点击事件当作链接。当前页面链接可以标记aria-current="page"，让视觉和辅助技术都理解当前位置。
布局由内容决定：flex-wrap允许空间不足时换行，gap管理项目间距。不要用固定高度裁切第二行。长标题是布局测试数据，缩短标题虽然能隐藏问题，却没有修复约束。
导航在键盘路径中应按阅读顺序出现。focus-visible的轮廓必须可见，不能为了美观全局移除outline。移动端不一定需要折叠菜单，少量链接自然换行往往更直接。
可运行示例
<style>
nav { display:flex; flex-wrap:wrap; gap:20px; padding:20px; background:#edf6ee; }
nav a { color:#185c43; text-underline-offset:4px; }
nav a:focus-visible { outline:3px solid #185c43; outline-offset:4px; }
</style>
<nav aria-label="Main navigation">
<a href="#home">Home</a><a href="#lessons">Lessons</a><a href="#about">About</a>
</nav>
<section id="home"><h1>Home</h1></section>
<section id="lessons"><h2>Lessons</h2></section>
<section id="about"><h2>About</h2></section>推演与验证
将示例片段放进body。依次在320、768和1280像素宽度查看，链接不能重叠或被裁切。用Tab遍历所有链接，再按Enter；检查目的地址是否存在。把其中一项改为较长英文标题并重测。
常见错误与边界
示例锚点需要页面中存在对应id，不能把所有链接都留为#后就认为导航完成。多个nav区域应有不同的aria-label。触屏没有可靠hover，关键功能不能只在hover时显示。
动手练习
增加当前页样式，要求颜色以外还有下划线或字重变化。新增六个链接验证两行布局。
参考解法与理由
基于aria-current选择器设置样式，避免一份CSS类和一份语义属性分别维护造成不一致。容器保留自动高度。
nav a[aria-current="page"] { font-weight:700; text-decoration-thickness:3px; }