应使用包裹每章，作章标题，作课时标题，必要时用细分；课时内容用折叠；大纲用包裹，编号写入标题文本，禁用布局。
用 <section></section> 和 <h2></h2>~<h4></h4> 表达课程层级
HTML 本身没有“课程大纲”语义标签，但可以用标准语义结构清晰表达章节与课时的从属关系。<section></section> 是最贴切的容器，每个章节用一个 <section></section> 包裹，章节标题用 <h2></h2>，课时用 <h3></h3>；若课时下还需细分（如“讲解”“练习”“小结”），再用 <h4></h4>。这样既符合 W3C 语义规范，也能被屏幕阅读器和搜索引擎正确理解。
常见错误是滥用 <div> 或把所有标题都写成 <code><h2></h2>，导致结构扁平、无法体现嵌套逻辑。也有人误用 <article></article>——它适用于独立可分发的内容（如一篇博客），不适用于课程中天然依附于章节的课时。
-
<h2></h2>只用于一级章节（如“第二章：CSS 布局”） -
<h3></h3>必须紧跟在同级<section></section>内，表示该章节下的课时（如“2.1 Flex 基础语法”） - 避免跳级，比如
<h2></h2>后直接跟<h4></h4>，会破坏大纲可读性
课时内容用 <details></details> 折叠展开更实用
真实教学页面里，用户往往只想快速扫视大纲，不希望被大段课时描述撑开页面。用 <details></details> + <summary></summary> 包裹每节课的说明、时长、目标等，是轻量又原生的解决方案，无需 JS 就能交互。
注意 <summary></summary> 里只能放行内内容，别塞 <p></p> 或列表；如果需要多行摘要，用 <br> 不推荐（违反语义），更好的做法是用 CSS 控制 <summary></summary> 的 white-space: pre-line。
- 每个
<h3></h3>课时标题后紧接一个<details></details>块 -
<summary></summary>文本建议控制在 20 字以内，例如“掌握 justify-content 取值含义” - Chrome/Firefox/Safari 全支持，IE 完全不支持——如果必须兼容 IE，得降级为 JS 切换 class
用 <ol></ol> 标记课程序号，但别用 type 属性
课程大纲天然有序，用 <ol></ol> 包裹所有 <section></section> 是合理选择，能自动编号且语义准确。但别依赖 <ol type="A"></ol> 或 <ol start="3"></ol> 来做章节编号——这些属性控制的是列表项标记（marker），不是内容逻辑；一旦样式调整或 JS 动态插入，极易错位。
真正可控的做法是把编号写进标题文本里：<h2>第3章：JavaScript 作用域</h2>。这样编号稳定、可搜索、打印友好，也方便后续用 CSS 的 counter-increment 做自动化生成（但那是进阶需求，基础场景手写更稳）。
- 不要给
<ol></ol>加reversed或start，课程顺序不会倒着排 - 如果某章被临时隐藏（如未上线），删掉整个
<section></section>即可，<ol></ol>编号会自然重排 - 用 CSS 的
::marker伪元素定制编号样式（如加括号、改字体），比改 HTML 属性更灵活
避免用表格（<table>）做大纲布局
<p>有人习惯用表格列“章节”“课时”“时长”“类型”，看似整齐，实则严重偏离语义：<code><table> 应用于二维数据关系（如成绩表、配置参数对照），而课程大纲本质是树状嵌套结构，不是行列对齐的数据集。
<p>表格带来的问题很实际：响应式塌陷难处理、屏幕阅读器朗读顺序混乱、无法用 CSS <code>grid 或 flex 做现代布局、SEO 识别为数据而非内容结构。更麻烦的是，一旦要加折叠、高亮当前课时、或导出为 Markdown 大纲，表格结构就成了硬伤。
- 纯展示型课表（无交互、不嵌套）可用
<table>，但不属于“课程大纲 HTML 结构”范畴
<li>想对齐“课时名称”和“时长”，用 CSS <code>grid-template-columns 配合语义化标签即可
- 如果 CMS 输出强制带表格，优先在前端用 JS 拆解重构为
<section></section> + <h3></h3>，而不是妥协样式
嵌套层级本身不难，难的是保持每一层标签都有明确目的——<section></section> 是容器，<h2></h2>~<h4></h4> 是层级锚点，<details></details> 是交互开关。动不动就加 <div class="chapter">，等于主动放弃 HTML 的结构红利。</div>
<table>，但不属于“课程大纲 HTML 结构”范畴
<li>想对齐“课时名称”和“时长”，用 CSS <code>grid-template-columns 配合语义化标签即可<section></section> + <h3></h3>，而不是妥协样式嵌套层级本身不难，难的是保持每一层标签都有明确目的——<section></section> 是容器，<h2></h2>~<h4></h4> 是层级锚点，<details></details> 是交互开关。动不动就加 <div class="chapter">，等于主动放弃 HTML 的结构红利。</div>
