必须用而非或，因时间轴是严格有序的事件流，提供语义顺序，确保读屏器按序播报、seo准确抓取、键盘导航正确跳转；语义无序易致逻辑失效，则完全丢失顺序信息。
为什么必须用 <ol></ol> 而不是 <ul></ul> 或 <div><p>时间轴节点本质是「有严格先后顺序的事件流」，<code><ol></ol> 的语义就是 ordered list，浏览器、读屏器、SEO 抓取器、甚至纯文本邮件预览都会按序号解析和播报。
换成 <ul></ul>，语义上表示“无序”，一旦后端数据错位或 JS 渲染失败，用户完全感知不到时间线已崩；
用 <div> 堆砌，顺序逻辑全靠 CSS 定位或 JS 维护，机器看不见，键盘 tab 导航乱跳，打印时只剩一团没序号的文字。<br><code><ol reversed></ol> 还能直接倒序展示“最近 5 条”，不用改 SQL 或写排序逻辑。
<time></time> 的 datetime 属性怎么填才不被搜索引擎忽略
<time></time> 的 datetime 属性怎么填才不被搜索引擎忽略
很多开发者写 <time>2025年8月</time>，看着正常，但 Google、日历插件、甚至 Safari 的“添加到日历”按钮都识别不了。
必须用 ISO 8601 标准格式：
- 年月日：
datetime="2025-08-20"（不能是"2025/08/20"或"2025年8月"） - 年月：
datetime="2025-08"是合法的 - 带时间：
datetime="2025-08-20T14:30:00+08:00"，注意补零、用T分隔、显式带时区 - 后端返回
"2025/08/20"？前端得先转：new Date("2025/08/20").toISOString().split('T')[0]再塞进datetime
CSS 画主线和圆点，为什么别用 border-left
给 <ol></ol> 直接加 border-left: 2px solid #ccc 看似快，但实际会引发三类问题：
- 缩放时主线偏移，尤其在 macOS Retina 或 Windows 高 DPI 下明显抖动
- 打印预览时主线错位或消失（border 不是绝对定位，受盒模型影响）
- 每个
<li>的 margin/padding 变化都会牵连主线位置
正确做法：
- 主线用
<ol>::before</ol>伪元素，position: absolute; top: 0; left: 50%; transform: translateX(-50%) - 圆点用
<li>::after</li>，同样绝对定位在中线上，不占流、不扰布局 - IE11 下记得加
zoom: 1触发 hasLayout，否则伪元素可能不渲染
左右交替排版，怎么避免 JS 判断奇偶
用纯 CSS 就能搞定节点内容左右错开，不需要 JS 动态加 class：
-
li:nth-child(odd)设置text-align: right+padding-right: 60px -
li:nth-child(even)设置text-align: left+padding-left: 60px - 圆点统一居中，文字自然分列两侧，视觉节奏清晰
注意：如果<ol></ol>外层有margin或padding，会影响left: 50%的基准，建议外层用position: relative显式限定定位上下文
节点结构越扁平越稳——<ol class="timeline"><li class="timeline-item">
<time datetime="..."></time><p>内容</p>
</li></ol> 这种一层嵌套，比多层 <div> 包裹更易维护、更少兼容性意外。</div>
