清爽的新闻列表取决于语义结构清晰、图文不挤、加载不抖、缩略图不糊四点；必须用article包裹每条新闻并含h2标题、唯一id、figure-img-figcaption组合、正确ISO 8601 time标签、Grid布局、img真实宽高与loading="lazy"。
清爽的新闻列表不是靠配色或字体决定的，而是语义结构清晰、图文不挤、加载不抖、缩略图不糊——这四点没做到，再好看的CSS也撑不住三天。
用 article 包每条新闻，别用 div
搜索引擎和读屏器靠 article 识别“这是一条独立新闻”，用 div class="news-item" 等于主动放弃 SEO 和无障碍支持。
-
article必须含至少一个h2或更高阶标题（不能只有p） - 每条
article给唯一id，比如id="news-20260811-001"，方便锚点跳转和 JS 操作 - 如果带图，必须用
figure+img+figcaption组合，img的alt要描述画面实质，不能写“配图” - 别在
article外套一层section再包ul——main直接包所有article就行
time 标签的 datetime 必须是 ISO 8601，且带时区
写 <time>刚刚</time> 或 <time datetime="2026-08-11">今天</time> 都无效。机器无法解析，Google 会判定发布时间缺失。
- 正确写法：
<time datetime="2026-08-11T06:30:00+08:00">06:30</time> - 时区偏移
+08:00不能省；若用 UTC，写成Z，如2026-08-11T22:30:00Z - 发布时间和更新时间要分开：更新时间加
itemprop="dateModified"（如果后续加 Schema.org） - 别用 JS 动态插入
datetime值——服务端或构建时就得写死，否则爬虫抓不到
CSS Grid 布局图文流，别用 float 或 inline-block
float 在多列图文流中极易导致父容器高度塌陷、换行错位、RTL 支持差；inline-block 有空白字符间隙问题。Grid 是目前最可控的方案。
立即学习“前端免费学习笔记（深入）”；
- 基础流式结构：
display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)))); gap: 1rem; - 每条
article内部用display: flex; flex-direction: column;排图文 -
img设width: 100%; height: auto;，避免同时设固定width和height导致高 DPR 屏模糊 - 不确定图片尺寸时，优先用
aspect-ratio: 16 / 9;替代 HTML 宽高属性（Safari 15.4+ 支持）
图片懒加载必须带 loading="lazy" 和真实宽高
没设 loading="lazy" 的图会阻塞主线程；没设宽高会导致布局偏移（CLS），直接拉低 Core Web Vitals 分数。
-
img必须有src（降级兜底），不能只靠srcset -
width和height必须填真实像素值，比如width="300" height="169"，不能随便填 - 推荐组合：
<img src="xxx.jpg" loading="lazy" width="300" height="169" alt="..."> - 慎用
picture——除非真需要 art direction（比如横竖屏换完全不同构图的图）；多数新闻图用srcset+sizes就够
真正难的不是让列表看起来“清爽”，而是让每张缩略图在 iPhone SE 和 Surface Pro 上都保持清晰、每条时间戳被 Google 正确索引、每个视障用户能用键盘快速跳转到下一条新闻——这些细节藏在标签选择、属性写法和 CSS 布局逻辑里，改掉一个就可能连锁失效。
