应使用和构建语义化新闻块，其中包裹独立条目，内含标题和标准时间，正文用，配合flex垂直排列、clamp()控制标题、gap间距及机器可读datetime属性。
用 <article></article> 和 <header></header> 搭建语义化新闻块
浏览器和读屏工具靠 HTML 标签理解内容结构，<article></article> 是最贴切的容器——它天然表示独立、可分发的新闻条目。别用 <div> 堆砌，否则 CSS 选中、SEO、无障碍支持都会打折扣。
<p>每个条目内，标题用 <code><h2></h2>（不是 <h3></h3> 或 <span></span>），时间/来源放 <header></header> 里，正文用 <p></p>。这样即使去掉所有样式，信息层级依然清晰。
示例结构：
<article><header><h2>AI 模型训练耗电量超小型城市</h2>
<time datetime="2024-06-15">6月15日</time></header><p>研究人员指出，单次大模型训练排放的二氧化碳相当于5辆汽车行驶一年……</p>
</article>
用 display: flex 实现紧凑垂直流式排列
新闻摘要模块的核心诉求是“省空间、易扫读”，flex 比 grid 更轻量，也比 float 更可靠。关键点在于：
- 外层容器设
display: flex+flex-direction: column，而非默认的row - 每条
<article></article>不设固定高，让内容自然撑开，避免截断摘要 - 用
gap: 1.2rem控制条目间距，比margin-bottom更干净（不触发 margin 合并）
注意：不要给 <article></article> 设 width: 100%——它默认就是块级，加了反而可能破坏响应式行为。
用 clamp() 控制标题行数与字体大小
新闻标题长度不可控，但视觉上必须保持呼吸感。纯用 line-clamp 会截断过狠，纯用 font-size 又难适配多端。推荐组合：
-
font-size: clamp(1.1rem, 4vw, 1.4rem)—— 小屏保可读，大屏不撑满 -
display: -webkit-box+-webkit-line-clamp: 2+overflow: hidden—— 强制最多两行，末尾省略号 - 给
<h2></h2>加margin: 0，避免浏览器默认上下边距干扰行高计算
⚠️ 坑：-webkit-line-clamp 在 Firefox 中需配合 display: -moz-box 才生效，但实际中多数新闻模块允许 Firefox 显示完整标题（不截断），所以可不兼容。
用 <time></time> 的 datetime 属性支撑机器可读时间
用户看到“6月15日”，但搜索引擎、RSS 抓取器、日历插件需要标准格式才能解析。必须写 datetime="2024-06-15"，而不是只放文本。
常见错误：
-
<time>6月15日</time>—— 缺datetime，机器无法识别 -
<time datetime="2024/06/15">6月15日</time>—— 斜杠格式非标准，应为连字符 - 把日期塞进
class或data-属性里 —— 绕过语义，失去<time></time>存在意义
如果时间含具体时刻，用 datetime="2024-06-15T09:30"，ISO 8601 格式最稳妥。
极简不等于语义缺失；少写一行样式，多留一个 datetime，对后续扩展成本影响很大。
