用 section + ol + CSS 实现路线图最轻量可控：ol 表达有序演进，time 元素需 ISO 8601 datetime 属性，CSS 用 flex 布局+响应式断点+语义化状态类确保可访问与维护性。
HTML 本身不提供“路线图”语义标签，但用 section + ol + CSS 时间轴（timeline）样式是最轻量、最可控、最易维护的实现方式。 不需要 SVG、Canvas 或第三方库，纯 HTML/CSS 就能做出响应式、可访问、SEO 友好的产品路线图页面。
用 ol 做时间线：为什么不是 ul 或 div
路线图本质是**有序的阶段性演进**，ol 天然表达“第1阶段 → 第2阶段 → 第3阶段”，浏览器和屏幕阅读器会自动读出序号，无需额外 ARIA；而 ul 是无序集合，div 则完全丢失语义。常见错误是把每个季度包进独立 div，结果搜索引擎无法识别时序关系，辅助设备也读不出先后。
- 必须用
ol包裹所有时间点，每个阶段用li表示 - 每个
li内部结构保持一致：标题（h3）、时间（time元素带datetime属性）、描述段落 - 避免在
ol外再套一层div干扰默认计数逻辑——如果需要容器，用section即可
time 元素不能只写“Q2 2026”
单纯文本 “Q2 2026” 对机器不可读，time 元素必须提供机器可解析的 datetime 值，否则日历聚合、自动化工具、无障碍阅读都会失效。正确写法是 <time datetime="2026-04-01">Q2 2026</time>，即使实际发布日期未定，也应填该季度首日。
-
datetime值必须符合 ISO 8601 格式（如"2026-07-01"、"2026-W26"），不能是"2026 Q3"或"Summer 2026" - 视觉上可隐藏具体日期，只显示“Q3 2026”，但
time元素仍需保留完整datetime - 若某阶段尚无明确时间，用
datetime="2026-XX-XX"不合法，应暂留空或标注为datetime=""并加注释说明
CSS 实现垂直时间轴的三个关键点
多数人卡在“连线对不齐”“移动端错位”“文字被遮挡”，问题往往出在定位逻辑和 flex 基准上。核心不是“画线”，而是让每个 li 的时间标记（marker）和内容块在视觉上形成稳定锚点。
立即学习“前端免费学习笔记（深入）”；
- 给
ol设position: relative，所有绝对定位都以此为基准，避免父级没设position导致 marker 相对于 viewport 错位 - 每个
li用display: flex，左侧固定宽度放time（含圆点 marker），右侧自适应放内容；不要用float或margin-left模拟，响应式下极易崩塌 - 移动端断点（如
max-width: 768px）里，把flex-direction: column，并移除左侧时间列的固定宽，改用text-align: center居中显示时间，否则窄屏下文字挤成一团
动态状态标识（进行中 / 已完成 / 待排期）别硬编码颜色
用 class 控制状态比内联 style 更可持续，也方便后续接入 JS 动态更新。比如 li class="status-in-progress"，CSS 里统一定义边框色、背景淡影、右侧进度条高度，而不是每个 li 都写 style="border-left: 4px solid #007bff;"。
- 状态类名要语义化：
status-planned、status-in-progress、status-completed，别用blue、green这类颜色名 - 已完成项可加
aria-hidden="true"并设opacity: 0.6，既降低视觉权重，又不影响屏幕阅读器读取原始内容 - “进行中”项建议加
tabindex="0"和简短title（如title="当前聚焦开发阶段"），方便键盘用户快速定位
真正难的不是画出那条竖线，而是让每个时间点在不同缩放比例、不同屏幕尺寸、不同辅助技术下，依然能被准确识别为“下一步要发生什么”。语义结构决定上限，CSS 只负责让它看起来不难看。
