已提供依据
课程页的语义导航
这个原创课程介绍页用header、nav、main和footer建立区域，用普通锚点连接“学习目标、练习步骤、参考资料”。源码展示可见焦点与跳到正文链接，页面主体无需脚本即可阅读。
- 源码标识
- NAV-01
- 技术
- HTML / CSS
- 运行方式
- 本地浏览器
- 范围
- 独立学习示例
本站原创教学源码；练习中的昵称、任务和数据为虚构。编号用于本站组织内容，与9.1产品版本没有对应关系。
从能力到可运行任务
语义导航
把“课程、练习、帮助”变成真正的导航结构，理解header、nav、main和锚点关系。
先写链接再设计外观。导航指向正文中的真实id，跳转链接提供绕过重复页头的路径。本站例子不需要菜单插件。
适用读者：刚开始学习HTML结构的读者
练习顺序
一步一步确定目标
按本类步骤阅读源码，先确认结构，再操作，再修改。
- 给主导航写一个明确的可访问名称。完成后记录预期与实际结果。
- 为正文保留唯一main和可定位的id。完成后记录预期与实际结果。
- 依次观察Tab焦点与跳到正文的目标。完成后记录预期与实际结果。
独立源文件
本类可运行示例
以下是本站原创练习，阅读详情了解运行条件和源码路径。
实现差异
相关实现比较
从运行环境、增强行为和控件选择理解实际差异。
先排查这些位置
容易忽略的细节
想做一个可键盘浏览的静态课程页。。遇到不同结果时，先确认本地文件、焦点位置和页面状态。
- 把所有区域都写成没有含义的div。
- 锚点拼写与正文id不一致。
常见问题
关于语义导航的常见问题
继续阅读
相关指南
指南
9.1免费版代码语义导航
先写能直接访问的链接和正文分区，再用nav标识主要导航、main承载主体内容，给重复区域增加清楚名称，并保留可见键盘焦点。9.1只是未确认的检索线索，不是本例的软件版本。
包含 6 个可复现步骤
阅读指南相邻能力