HTML课程目录结构详解与学习指南

• 避免嵌套在
  或

  里再套
• 如果目录只出现在页面顶部，直接放 下一级最稳妥；若在课程详情页内，可放在
  内部但紧贴顶部

比
更适合课程章节顺序

课程天然有强序性：第1章 → 第2章 → 实验 → 结业测验。用无序列表

会丢失这一层信息，辅助技术可能跳过序号，JavaScript 动态计算当前章节位置也会出错。
• 用
  后，start 属性可手动设起始编号（如 start="3" 表示从第三章开始显示）
  1. 每个章节用
  2. ，内部必须是 （不能只放文字），否则无法跳转、也不被视作可导航项
  3. 别为了“样式统一”强行用 CSS 把
     的数字隐藏——序号是语义的一部分，隐藏后等于废掉有序优势

锚点链接要对应 id，别依赖 name 或空 href

点击“第五章”没反应？大概率是锚点没对上。HTML5 已废弃 name 属性做锚点，且 href="#" 或 href="javascript:void(0)" 是无效跳转，还破坏键盘导航（Tab 键无法聚焦）。

• 章节标题用

  第五章：表单验证

  ，目录链接写 第五章
• 确保 id 值全站唯一、不带空格/中文/特殊符号（推荐小写+短横线）
• 如果章节内容动态加载，得等 DOM 插入后再注册锚点，否则首次点击会失败

移动端折叠目录时，aria-expanded 和 aria-controls 缺一不可

响应式课程页常把目录收进汉堡菜单，但光用 CSS display: none 切换，读屏用户完全不知道它“可展开”或“当前状态”。这不只是体验问题，而是 WCAG 2.1 AA 级合规硬要求。

• 触发按钮加 aria-expanded="false"，目标容器加 id="toc-list"，按钮再补 aria-controls="toc-list"
• JS 切换时同步更新 aria-expanded 值（"true"/"false"），否则读屏软件读不出状态变化
• 别用 hidden 属性替代 aria-hidden —— 前者会彻底移除可访问性树节点，后者才配合视觉隐藏做状态隔离

课程目录不是装饰，是学习路径的骨架。语义错一点，残障学生就可能卡在第一章；锚点松一环，自学用户就得滚屏找半天。这些细节不炫技，但改起来就几行 HTML，漏掉却很难补救。

今天关于《HTML课程目录结构详解与学习指南》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！