时间轴必须用而非或，因其语义明确表示有序事件流，确保SEO抓取、读屏器按序播报、键盘导航准确，且纯文本环境仍保留序号；语义无序，易致时间逻辑失效。
<ol></ol> 是唯一能同时扛住 SEO、读屏器、打印、缩放和老浏览器的结构选择，别用 <div> 堆砌或 <code><ul></ul> 冒充。
为什么必须用 <ol></ol> 而不是 <ul></ul> 或 <div>
<p>时间轴本质是「有先后顺序的事件流」，<code><ol></ol> 的语义就是 ordered list，浏览器和读屏器会按序号播报、跳转、导航。换成 <div>，时间顺序就藏进 CSS 里——机器看不见，SEO 抓不到，键盘用户 tab 键乱跳。<code><ul></ul> 更危险：它表示“无序”，一旦数据顺序错乱或 JS 渲染出 bug，用户根本意识不到时间线已经崩了。
-
<ol reversed></ol> 可直接倒序展示“最近 5 条”，不用 JS 排序或后端改 SQL
- 纯文本环境（如邮件预览、终端渲染）下，
<ol></ol> 仍保留数字序号，<div> 就只剩一团文字
<li>结构越扁平越可控：推荐 <code><ol class="timeline"><li class="timeline-item">...</li></ol>，别嵌套多层 <div>
<h3>
<code><time></time> 的 datetime 属性怎么填才不翻车
<ol reversed></ol> 可直接倒序展示“最近 5 条”，不用 JS 排序或后端改 SQL<ol></ol> 仍保留数字序号，<div> 就只剩一团文字
<li>结构越扁平越可控：推荐 <code><ol class="timeline"><li class="timeline-item">...</li></ol>，别嵌套多层 <div>
<h3>
<code><time></time> 的 datetime 属性怎么填才不翻车很多人写 <time>2023年5月</time>，看着没问题，但机器根本没法解析。搜索引擎、日历插件、甚至某些浏览器的“添加到日历”功能都会失效。
- 必须用 ISO 8601 格式：
datetime="2023-05-12"（年-月-日），datetime="2023-05"（年-月）也合法 -
datetime="2023/05/12"或datetime="2023年5月"是无效值 - 带时分秒必须补零：
datetime="2023-05-12T14:30:00"，不能写"14:30"或"2:30 PM" - 时区要显式声明：
datetime="2023-05-12T14:30:00+08:00"；"GMT+8"不是标准写法，部分解析器会忽略 - 后端返回
"2023/05/12"？前端得先new Date("2023/05/12").toISOString().split('T')[0]转一下再塞进datetime
CSS 画竖线和圆点，为什么不能用 border-left
给 <ol></ol> 加 border-left: 2px solid #ccc 看似省事，但实际会引发定位抖动、缩放错位、打印偏移三大问题。因为 border 是盒模型一部分，会影响所有子元素的布局计算。
- 主干线用
::before伪元素画在<ol></ol>上：position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 2px; - 节点圆点用
::after，position: absolute定位在中线上，不占空间也不扰流 - 左右交替用
li:nth-child(odd)和li:nth-child(even)控制text-align和padding-left/padding-right，别用 JS 判断奇偶 - IE11 下必须加
zoom: 1触发 hasLayout，否则伪元素在 zoom=125% 时可能消失
移动端怎么避免时间轴挤成一团或强制水平滚动
根本原因是水平方向内容过宽。典型诱因有：给容器设了 min-width 或固定 width；display: flex 没加 flex-wrap: wrap；时间点和标题并排显示却没做堆叠。
立即学习“前端免费学习笔记（深入）”；
- 小屏下统一改为垂直堆叠：
@media (max-width: 768px) { .timeline-item { flex-direction: column; } } - 时间点放顶部居中，内容块占满宽度，取消左右交替
- 长列表（100+ 条）别全量渲染：初始只渲染视口内及上下各 3 项，其余用
<li class="placeholder">占位 - 用
IntersectionObserver监听进入视口，按需加载并替换占位符——比监听scroll更轻量
<ol></ol> + <time datetime=""></time> + 伪元素这三样，一个都不能少。
