HTML中用语义化标签+结构化数据（如data-prereq或JSON-LD）表达课程前置依赖，节点为<section>课程，有向边通过属性声明，避免纯文本或class模拟；合法学习路径需按拓扑序组织，依赖校验与环路检测须由JS完成。
HTML 中怎么表示课程之间的前置依赖关系
用有向图结构最直接——节点是课程，有向边表示“学完 A 才能学 B”。HTML 本身不提供图计算能力，但可以用语义化标签 + 结构化数据表达依赖逻辑，方便人读、机器解析或后续用 JS 渲染成可视化图。
常见错误是把依赖写成纯文字描述（比如“需先学 HTML 基础”），导致无法自动校验路径合法性、没法生成学习顺序、也难做环路检测。
-
<section>包裹单门课程，用id唯一标识（如id="html-basics"） - 用
<meta>或自定义data-prereq属性声明前置依赖，多个用空格分隔：data-prereq="html-intro css-foundations" - 避免用 class 名模拟依赖（如
class="depends-on-html-basics"），class 是样式语义，不是数据语义，JS 提取困难且易冲突
如何用 HTML 列出合法的学习路径（拓扑序）
HTML 不会自动排序，但可以预先按拓扑序组织 <ol>（注意：你只能用 <ol>，但题目限制不能用
- /
- 标签 —— 所以实际得用
<div> 模拟有序列表，靠 CSS 或 JS 控制序号）。更稳妥的做法是输出纯文本序列，并确保每个 <div> 的 data-order 属性严格递增。
- 手动维护时，检查是否存在循环依赖：比如 A → B → C → A，这种在 HTML 里不会报错，但会导致路径生成失败
- 如果依赖关系动态变化，别硬编码顺序；改用 JS 加载 JSON 依赖图后调用
topologicalSort()生成顺序再注入 DOM - 路径中某课缺失依赖项（如
data-prereq="missing-id"），浏览器不报错，但 JS 校验时会找不到对应节点 —— 要提前做document.getElementById()存在性检查
用 JSON-LD 嵌入结构化依赖数据是否可行
可行，而且推荐。JSON-LD 是 HTML 原生支持的结构化数据格式，搜索引擎和工具链（如 VS Code 插件、学习平台导入器）能直接识别，比自定义 data 属性更标准。
立即学习“前端免费学习笔记（深入）”；
- 放在
<head>里，@type设为Course或自定义LearningPath，用prerequisites字段列 ID 数组 - 注意 ID 必须与页面中课程元素的
id完全一致（包括大小写和连字符），否则关联失效 - 不要同时用 JSON-LD 和
data-prereq两套机制，容易不同步；选一个并坚持到底
为什么不用 SVG 直接画依赖图
可以画，但脱离了“路径规划”的核心目标。SVG 是渲染层，而学习路径本质是数据关系 + 约束求解。直接手绘 SVG 边线，既无法自动验证环路，也不能响应依赖变更重新布局。
- 如果真要可视化，用
<svg>作为容器，但节点坐标由 JS 根据拓扑序+层级计算后动态写入，而不是静态写死 - 避免在 SVG
<text>里重复写课程名，应绑定到对应课程<section id="xxx">的文本内容，保持单一数据源 - 移动端缩放时，纯 SVG 文字可能糊掉；用
<foreignObject>嵌入 HTML 文本更可控，但兼容性略低（IE 不支持）
真正麻烦的是依赖关系变更后的同步：改了一个 data-prereq，要手动更新 JSON-LD、SVG 连线、路径列表三处 —— 所以一开始就得决定哪一层是权威数据源，其余都是派生视图。
