9.1免费版代码语义导航

1. 阅读semantic-nav详情，打开示例并查看完整源文件TXT。
2. 核对导航的#structure、#keyboard、#practice与正文id。
3. 在练习区域新增“复习记录”section及h3标题，保持id唯一。
4. 增加目录链接，href指向新分节的id，文字说明目标内容。
5. 用Tab与Enter经过目录，核对焦点、跳转目标与跳到主要内容入口。
6. 尝试显示和隐藏结构轮廓，再缩窄窗口检查正文与链接是否完整。

把目录写成真实链接

目录项需要有a元素与有效href。本站练习用同页分区练习导航，把href中的片段标识与对应正文id成对维护；如果以后拆成多页，再换成真正页面地址。只有文字、颜色和点击事件的块，不能提供同样清楚的链接目标，也会增加无脚本阅读的负担。

用页面区域表达用途

header描述页头，nav描述主要导航集合，main放主体内容，footer放尾部说明。不是每组链接都必须包在nav中；本例优先把读者用来定位正文的目录标成导航。语义结构先表达用途，再添加类名与样式，读代码时就能知道区域职责。

• 页面正文始终放在HTML中，目录只是帮助定位。
• 若有顶部导航和正文目录两套nav，给它们不同的可访问名称。

标题层级与链接名称配合

本例由h1表达整页主题，h2表达“动手示例”等大节，导航所指的“页面结构”“键盘路径”“改写任务”使用h3。目录文字与对应分节同名。增加“复习记录”时沿用这个层级，给section和标题不同且唯一的id，用aria-labelledby把分节与标题关联。字体大小交给CSS，不靠跳过层级调整。

给键盘用户保留进入正文的路径

在页头前设置跳转到正文的链接，目标指向主要内容区域。使用Tab顺序进入链接，焦点应清楚可见。这个入口的作用是绕过重复导航，不需要脚本做动画。检查键盘行为时按浏览器实际结果记录，不能把添加一个属性当作已经完成所有辅助技术验证。

做一次可复现的导航练习

在动手示例的nav中增加指向新分节的链接，再在“改写任务”后增加“复习记录”分节。分别用鼠标与Tab、Enter访问；“显示结构轮廓”按钮只切换虚线样式和aria-pressed，不改变导航语义。关闭脚本时目录和跳到正文仍能使用，结构轮廓按钮保留禁用状态。

这些公开文档用于解释网页元素和 API，不代表本站已经执行外部产品实测，也不确认某个 9.1 产品的身份。

相关指南

相关网页能力

• 语义导航：想做一个可键盘浏览的静态课程页。
• 本地运行：第一次运行HTML文件，不想先安装整套开发框架。

可运行的关联示例

这些原创练习，打开详情查看源文件与运行边界。