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