新闻列表页需用语义化HTML确保兼容性：每条新闻用<article>包裹，含<h2>标题、唯一id、<figure>配图、规范<time datetime>，配合CSS Grid布局与原生图片懒加载。
新闻列表页的图文结构不是“怎么好看怎么排”，而是“怎么让浏览器、爬虫、屏幕阅读器和折叠屏手机同时认出这是条新闻”——语义化标签 + 明确层级 + 可预测的 DOM 路径，这三样缺一不可。
用 <article> 包每条新闻，别用 <div>
搜索引擎和 RSS 阅读器靠 <article> 识别独立内容单元；用 <div> 套新闻标题+图片+摘要，等于告诉机器“这堆东西我也不知道算啥”。
-
<article>内必须含至少一个<h2>或更高阶标题（不能只有<p>） - 每条
<article>应有唯一id，比如id="news-20260526-001"，方便锚点跳转和 JS 动态操作 - 如果新闻带图，
<figure>+<img>+<figcaption>是标准组合，<img>的alt必须描述画面实质，不能写“新闻配图”
<time> 标签必须用 datetime 属性，且值为 ISO 8601
写 <time>2026年5月26日</time> 是无效的：视觉上看着对，但机器无法解析。时间戳一旦不规范，SEO 收录、聚合工具抓取、甚至前端按时间排序都会出错。
- 正确写法：
<time datetime="2026-05-26T10:50:00+08:00">2026年5月26日 10:50</time> - 时区必须显式声明，
+08:00不能省；若用 UTC，写成Z（如2026-05-26T02:50:00Z） - 不要把发布时间和更新时间混在同一个
<time>里；需要双时间时，用两个带不同itemprop的<time>
响应式图文流布局，优先用 CSS Grid 而非 float
浮动（float）在多列图文流中极易导致父容器高度塌陷、换行错位、RTL（从右向左）语言支持差；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; - 避免给
<img>同时设固定width和height，否则在高 DPR 屏幕下模糊；用aspect-ratio或 CSS 容器查询更可控
移动端首屏加载性能卡点：图片懒加载必须带 loading="lazy" 和宽高
没设 loading="lazy" 的新闻图会阻塞主线程；没设宽高会导致布局偏移（CLS），直接拉低 Core Web Vitals 分数。
-
<img src="xxx.jpg" loading="lazy" width="300" height="169" alt="...">—— 宽高值要真实，不能随便填 - 若后端返回的图尺寸不确定，用 CSS
aspect-ratio: 16 / 9;替代 HTML 宽高属性（注意兼容性：Safari 15.4+ 支持） - 慎用 JS 懒加载库；原生
loading="lazy"在 Chrome/Firefox/Safari 中已稳定支持，无需额外 JS
真正难的不是让新闻列表“显示出来”，而是确保它在三年后仍能被新版本爬虫准确提取、在无障碍设备上逐条朗读、在 2029 年的折叠屏上自动适配三栏——这些都取决于你写第一行 <article> 时有没有想清楚它到底代表什么。
