时间轴必须用 <ol>，因其语义明确表示有序事件流，确保读屏器按序播报、SEO 正确抓取、键盘导航有序，且支持 reversed 属性倒序及纯文本环境序号保留。
必须用 <ol>，不是 <ul>，更不能用一堆 <div> 堆出来——否则读屏器乱读、SEO 抓不到顺序、打印只剩文字堆叠。
为什么时间轴一定要用 <ol> 而不是 <ul>
时间轴描述的是「有先后顺序的事件流」，<ol> 的语义就是 ordered list，浏览器和辅助技术（比如读屏器）会天然按序号播报、跳转、导航。换成 <div>，等于把时间顺序藏进 CSS 里——机器看不见，SEO 抓不到，键盘用户 tab 键乱跳。<ul> 更危险：它表示“无序”，一旦后端数据顺序错乱或 JS 渲染出 bug，用户根本意识不到时间线已经崩了。
-
<ol reversed>可直接倒序展示“最近 5 条”，不用 JS 排序或后端改 SQL - 纯文本环境（比如邮件客户端预览、终端渲染）下，
<ol>仍保留数字序号，<div>就只剩一团文字
<time datetime="..."> 的写法怎么才不翻车
填错 datetime 是最隐蔽也最致命的坑：页面看着正常，但所有依赖时间语义的功能全失效。必须严格遵循 ISO 8601 标准。
- 年-月-日：必须是
datetime="2024-03-15"，"2024/03/15"或"2024年3月"是无效值 - 年-月：允许
datetime="2024-03"，但"2024-3"（缺零）不行 - 带时分秒：必须补零且含
T，如datetime="2024-03-15T14:30:00"；"14:30"或"2:30 PM"不被识别 - 时区要显式声明：
datetime="2024-03-15T14:30:00+08:00"，"GMT+8"不是标准写法，部分解析器直接忽略 - 后端返回
"2024/03/15"？前端得先转：new Date("2024/03/15").toISOString().split('T')[0]再塞进datetime
左右交替布局别用 class 切换 left/right，改用 :nth-child(odd) 和 :nth-child(even)
用 JS 或 class 手动标奇偶，既冗余又易出错。CSS 伪类才是正解，干净、可维护、无 JS 依赖。
立即学习“前端免费学习笔记（深入）”；
-
.timeline li:nth-child(odd)控制内容左对齐 + 左侧 padding，圆点定位在右侧（right: -24px） -
.timeline li:nth-child(even)控制内容右对齐 + 右侧 padding，圆点定位在左侧（left: -24px） - 竖线必须用
<ol>::before伪元素：position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 2px; - 每个节点圆点用
::after：position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #4a90e2;，锚定在中线上，不占空间也不扰流 - 移动端建议把垂直轴转为水平滚动：
overflow-x: auto+white-space: nowrap，比强行折叠更易读
IE11 下伪元素可能消失？
截至 2026 年 4 月 17 日，IE11 对 ::before/::after 的支持仍有不稳定表现，尤其在嵌套较深或使用 transform 时。若需兼容，可加 fallback：给 <li> 加一个空 <span class="marker"></span>，用 CSS 控制显示/隐藏，再通过媒体查询降级为单列布局。
真正容易被忽略的，不是怎么画线，而是语义结构一旦松动，所有无障碍、SEO、打印、缩放能力就同步瓦解——而这些故障，往往上线后半年都发现不了。
