ol标签仅作语义容器，物流轨迹需按时间倒序排列dom节点，用time元素标注iso时间、明确动作主体与关键信息，并通过css伪元素绘制轨迹线，动态更新时须插入firstchild并去重。
ol 标签本身不处理物流轨迹，它只负责按顺序渲染编号列表；真正决定“发货物流轨迹”是否可读、可维护、可交互的，是数据结构 + HTML 语义 + CSS 布局的组合。
用 ol 做物流时间线的基本结构
物流轨迹本质是按时间倒序排列的事件序列（最新一条在最上面），但 ol 默认正序编号（1,2,3…），所以得手动控制视觉顺序：
- 把最新物流节点放在
ol的第一个li，次新放第二个……让 DOM 顺序 = 时间倒序 - 用 CSS 的
reversed属性（<ol reversed></ol>）反向编号，但注意：IE 不支持，且编号会变成从大到小（如 5,4,3），不适合“第1步/第2步”这类语义 - 更稳妥的做法是放弃自动编号，用
ol仅作语义容器，编号交由::before伪元素或内联data-step控制
每个 li 里该放什么信息
单纯写“已发货”“派送中”不够，用户需要可验证的时间点和动作主体。建议每个 li 包含：
-
<time datetime="2024-06-15T09:22">2024-06-15 09:22</time>—— 必须带 ISO 格式datetime，方便机器解析和排序 - 操作动作描述，如
包裹已由【顺丰速运】揽收，把快递公司名加【】突出，避免被当成普通文本 - 可选补充：物流单号片段（
<code>SF123456789CN）、所在城市（<span>杭州市</span>）
CSS 实现轨迹线（竖线 + 圆点）的关键点
纯靠 ol 和 li 无法画出连接线，必须用 CSS 模拟。常见翻车点：
- 用
ol::before画竖线时，忘了设position: relative在ol上，导致绝对定位错位 -
li::before画圆点用了border-radius: 50%，但没固定宽高，文字撑开后圆点变形 - 移动端竖线断开：竖线高度依赖
li间距，用flex或grid布局比纯margin更稳 - 不要给
ol设list-style: none后就不管编号了——如果去掉默认数字，又没补伪元素编号，屏幕阅读器会读不出顺序
动态更新物流时，DOM 操作要注意什么
前端轮询或 WebSocket 收到新节点后，不能简单 appendChild 到 ol 底部（那会变成“最早一条在最上面”）：
- 新节点必须插入到
ol的firstChild位置，确保 DOM 顺序仍是倒序 - 插入前检查重复：用
time[datetime]值去重，避免同一时间戳刷出两条 - 如果后端返回的是正序数组（[0] 是最早，[n] 是最新），前端要
.reverse()再渲染，别图省事直接遍历 - 大量物流节点（>50 条）时，考虑虚拟滚动，否则
ol高度暴涨影响性能
物流轨迹不是“能显示就行”，时间不准、顺序错乱、缺乏机器可读标记，都会让用户反复打电话查单号。重点不在 ol 标签怎么写，而在每条 li 是否承载了可验证的事实，以及 DOM 顺序是否真实反映事件流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
