新闻列表页需用语义化html确保兼容性：每条新闻用包裹，含标题、唯一id、配图、规范，配合css grid布局与原生图片懒加载。
新闻列表页的图文结构不是“怎么好看怎么排”，而是“怎么让浏览器、爬虫、屏幕阅读器和折叠屏手机同时认出这是条新闻”——语义化标签 + 明确层级 + 可预测的 DOM 路径，这三样缺一不可。
用 <article></article> 包每条新闻，别用 <div>
<p>搜索引擎和 RSS 阅读器靠 <code><article></article> 识别独立内容单元；用 <div> 套新闻标题+图片+摘要，等于告诉机器“这堆东西我也不知道算啥”。
<ul>
<li>
<code><article></article> 内必须含至少一个 <h2></h2> 或更高阶标题（不能只有 <p></p>）
<article></article> 应有唯一 id，比如 id="news-20260526-001"，方便锚点跳转和 JS 动态操作<figure></figure> + <img> + <figcaption></figcaption> 是标准组合，<img> 的 alt 必须描述画面实质，不能写“新闻配图”
<time></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></time>里；需要双时间时，用两个带不同itemprop的<time></time>
响应式图文流布局，优先用 CSS Grid 而非 float
浮动（float）在多列图文流中极易导致父容器高度塌陷、换行错位、RTL（从右向左）语言支持差；Grid 则天然支持等高列、自动折行、源顺序与视觉顺序分离。
- 基础流式结构可写：
display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)))); gap: 1rem; - 每条
<article></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" style="max-width:90%" style="max-width:90%" alt="...">—— 宽高值要真实，不能随便填 - 若后端返回的图尺寸不确定，用 CSS
aspect-ratio: 16 / 9;替代 HTML 宽高属性（注意兼容性：Safari 15.4+ 支持） - 慎用 JS 懒加载库；原生
loading="lazy"在 Chrome/Firefox/Safari 中已稳定支持，无需额外 JS
真正难的不是让新闻列表“显示出来”，而是确保它在三年后仍能被新版本爬虫准确提取、在无障碍设备上逐条朗读、在 2029 年的折叠屏上自动适配三栏——这些都取决于你写第一行 <article></article> 时有没有想清楚它到底代表什么。
