应使用<article>和<header>构建语义化新闻块，其中<article>包裹独立条目，<header>内含<h2>标题和<time datetime="YYYY-MM-DD">标准时间，正文用<p>，配合flex垂直排列、clamp()控制标题、gap间距及机器可读datetime属性。
用 <article> 和 <header> 搭建语义化新闻块
浏览器和读屏工具靠 HTML 标签理解内容结构，<article> 是最贴切的容器——它天然表示独立、可分发的新闻条目。别用 <div> 堆砌，否则 CSS 选中、SEO、无障碍支持都会打折扣。
每个条目内，标题用 <h2>（不是 <h3> 或 <span>），时间/来源放 <header> 里，正文用 <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>不设固定高，让内容自然撑开，避免截断摘要 - 用
gap: 1.2rem控制条目间距，比margin-bottom更干净（不触发 margin 合并）
注意：不要给 <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>加margin: 0，避免浏览器默认上下边距干扰行高计算
⚠️ 坑：-webkit-line-clamp 在 Firefox 中需配合 display: -moz-box 才生效，但实际中多数新闻模块允许 Firefox 显示完整标题（不截断），所以可不兼容。
用 <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>存在意义
如果时间含具体时刻，用 datetime="2024-06-15T09:30"，ISO 8601 格式最稳妥。
极简不等于语义缺失；少写一行样式，多留一个 datetime，对后续扩展成本影响很大。
