新闻时间线必须用标签，因其唯一能被机器识别为有序序列；的datetime值须为iso 8601格式；竖线圆点需用伪元素实现；每条新闻须用包裹并含标题与唯一id；配图须用组合且带懒加载与宽高属性。
新闻时间线必须用 <ol></ol>，不是 <ul></ul> 也不是 <div>
<p>时间线本质是「有严格先后顺序的事件流」，<code><ol></ol> 是唯一能被浏览器、读屏器、搜索引擎同时识别为“有序序列”的标签。换成 <ul></ul>，机器会认为这些事件可以任意调换；用一堆 <div> 套娃，连“这是个列表”都表达不出来——SEO 抓不到顺序，键盘用户 tab 键乱跳，打印出来只剩文字堆叠。<code><ol reversed></ol> 还能直接倒序展示“最新 5 条”，不用 JS 排序或后端改 SQL。
<time datetime="..."></time> 的值必须是 ISO 8601 格式
<time datetime="..."></time> 的值必须是 ISO 8601 格式写 <time>2026年8月4日</time> 看着正常，但所有依赖时间语义的功能都会失效：Google 不收录发布时间、日历插件加不进去、甚至部分浏览器的“添加到日历”按钮灰掉。
- ✅ 正确：
<time datetime="2026-08-04T12:39:00+08:00">2026年8月4日</time> - ❌ 错误：
<time datetime="2026/08/04"></time>（斜杠非法） - ❌ 错误：
<time datetime="08-04"></time>（缺年份、缺时分秒） - ❌ 错误：
<time datetime="2026年8月4日"></time>（含中文字符）
后端返回类似 "2026/08/04"？前端得先转：new Date("2026/08/04").toISOString().split('T')[0] 再塞进 datetime。
CSS 画竖线和圆点，别用 border-left
给 <ol></ol> 加 border-left: 2px solid #ccc 表面省事，实际会引发三类问题：缩放时竖线偏移、节点悬停左右抖动、打印时整条线错位——因为 border 是盒模型一部分，会影响所有子元素布局计算。
- 竖线必须用
<ol>::before</ol>：设position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 2px; - 圆点用每个
<li>::after</li>：position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #4a90e2;，锚定在中线上，不占空间也不扰流 - 左右交替靠
li:nth-child(odd)和li:nth-child(even)控制内容对齐 + padding，别用 JS 判断奇偶
每条新闻必须用 <article></article> 包裹
只用 <div class="news-item"> 是最隐蔽的降权操作：Google Search Console 可能报 <code>NewsArticle 类型缺失；视障用户按 article 键跳转时卡在一堆无意义的 div 里；后续加 JSON-LD 时还得手动补全 datePublished、headline、description 所有字段。
<article></article> 内必须含至少一个 <h2></h2> 或更高阶标题，且每条要有唯一 id（如 id="news-20260804-001"），方便锚点跳转和 JS 动态操作。带图必须用 <figure><img><figcaption></figcaption></figure> 组合，<img> 必须带 loading="lazy" 和真实 width/height，否则首屏 CLS 直接拉低 Core Web Vitals 分数。
