纯HTML+CSS可构建语义正确、可维护的时间轴：用<ol>容器和<li>事件项，配合<time>标签、伪元素画线与圆点，避免绝对定位；响应式需调整布局而非缩放；强调标题、摘要等语义层级。
纯 HTML + CSS 就能做出清晰、可维护、语义正确的时间轴，不需要任何框架或 JS 渲染——关键在于用 <ol> 作为容器，<li> 表达每个事件，并通过伪元素和定位控制视觉连线与标记。
用 <ol> 而不是 <div> 套列表
时间轴本质是有序事件流，<ol> 天然语义准确、支持无障碍阅读、自带序号逻辑（即使你用 CSS 关掉）。用一堆 <div> 拼会丢失结构信息，屏幕阅读器无法识别先后关系。
实操建议：
- 每个事件用一个
<li>，内部嵌套<time>标签写日期（如<time datetime="2024-03-15">2024年3月15日</time>），提升机器可读性 - 避免给
<ol>设置list-style: none后再用伪元素重画圆点——直接保留默认序号或用counter-reset自定义更稳妥 - 如果需要反向时间轴（最新在上），用
flex-direction: column-reverse或 JS 翻转 DOM，别靠order属性硬调，易出错
CSS 画线不靠绝对定位“蒙”
常见错误是给每个 <li> 加 position: absolute，然后手动算 top 值——一旦内容高度变化或响应式断点切换，连线立刻错位。
立即学习“前端免费学习笔记（深入）”；
正确做法是用伪元素 + 相对定位构建“主轴线”，再让每个事件点锚定在线上：
- 给
<ol>设position: relative，用::before画一条垂直居中纵线（height: 100%; width: 2px; background: #ccc;） - 每个
<li>设position: relative，用::after画圆点（content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #4a90e2;），横向居中对齐主轴线 - 圆点垂直位置由
<li>的top或margin-top控制，而非绝对坐标——这样内容伸缩时连线自动跟随
响应式断点要切在内容层，不是只缩放圆点
很多时间轴在手机上变成“堆叠文字+小圆点”，但事件描述挤在一起看不清，日期和正文没区分度。
实操建议：
- 小屏下把
<ol>改为flex-direction: column，每个<li>占满宽度，圆点移到左侧或顶部，用text-align: left对齐内容 - 用
@media (max-width: 768px)降低<time>字体大小，加font-weight: bold强化可读性，而不是隐藏它 - 避免在移动端用
transform: scale(0.8)整体缩小——会导致点击区域变小、文字模糊
最常被忽略的是语义层级：时间轴里每个事件应有明确的标题（<h3> 或 <h4>）、摘要（<p>）和可选详情（<details>）。光顾着画线，忘了用户真正要读的是什么。
