动手示例
按 Tab 可将焦点移到本页最前面的“跳到主要内容”链接。下方导航在无脚本时也能跳到对应分节。
页面结构
一个主要内容区域承载练习正文，导航区域只放主要目录。每个 section 使用明确标题，避免把所有容器都命名为同一个角色。
键盘路径
普通链接可以用 Tab 聚焦、Enter 激活。焦点轮廓保持可见；跳到正文的链接在聚焦时显示，主要内容设 tabindex="-1"，不额外进入常规 Tab 顺序。
改写任务
新增一个“复习记录”分节，给它唯一 id，再添加能跳到该分节的文字链接。检查链接名是否能让读者提前知道目标。
这段代码解决什么问题
nav 表示主要导航链接区，不必把每个链接都包进 nav。此例使用 aria-label 让导航目的明确，页内链接用 href="#id" 指向已经存在的正文分节。
“显示结构轮廓”只切换可视化辅助样式，帮助辨认 nav、main、header 和 footer。它不改变语义，也不证明页面自动满足所有可访问性要求。
- 适用：文档目录、学习页、简短产品说明。
- 改造边界：内容规模扩大后可用多页路由，保留真实链接。
- 检查点：id 唯一、链接目标存在、焦点轮廓可见、导航有合适名称。
关键片段
<a class="skip" href="#main">跳到主要内容</a>
<nav aria-label="练习内容导航">
<a href="#structure">页面结构</a>
</nav>
<main id="main" tabindex="-1">…</main>这里展示关键片段；完整 HTML、CSS 和 JavaScript 在下载包及源文件 TXT 中。TXT 保存为 UTF-8 的 .html 后可打开。
运行条件与源文件
解压 ZIP 后，用支持现代 HTML、CSS、JavaScript 的浏览器直接打开 semantic-nav.html。无需安装依赖、启动构建工具或连接服务；下载包中的文件没有外部字体、样式、图片、模块导入或网络请求。在线参考链接只有点击后才访问对应网站。
关闭 JavaScript 仍可阅读本文和初始示例内容；导航与跳转仍可使用。 本例没有做浏览器兼容性认证或辅助技术实测，学习者可按自己的设备验证键盘操作和朗读结果。
本站原创示例代码使用 MIT License，允许修改和再分发，发布代码副本时须保留版权与许可文本。许可不保证代码适合任何特定生产场景；生产环境需另接合适的服务和测试。查看完整 MIT 许可 · 运行说明
进一步阅读
以下官方资料用于核对语义和 API 行为，本站示例及文字为原创编写。
- MDN：nav 导航元素（在线参考，访问需网络）
- W3C WAI：绕过内容块（在线参考，访问需网络）