语义化资讯卡片应使用包裹每条资讯，标题用，配图采用结构并设宽高属性；用css grid的auto-fit与minmax实现响应式布局；通过aspect-ratio和object-fit统一图片比例；链接样式需尊重可访问性规范。
用 <article></article> 和 <figure></figure> 搭建语义化资讯卡片结构
浏览器和搜索引擎更信任语义化标签，直接用 <div> 套样式容易被当成垃圾内容。每条资讯必须用 <code><article></article> 包裹，标题用 <h3></h3>（不是 <h1></h1> 或 <h2></h2>），配图必须走 <figure><img><figcaption></figcaption></figure> 路线——哪怕没文字说明也要留空 <figcaption></figcaption>，否则屏幕阅读器会跳过图片。
常见错误：把整块列表塞进一个 <section></section> 里再加 class="news-list"，结果每条资讯缺失独立语义；或者用 <img> 直接放标题旁，导致 SEO 权重分散、无障碍访问失败。
-
<article></article>必须有明确的pubdate时间戳，推荐用<time datetime="2024-05-20">5月20日</time> - 图片宽高建议在 HTML 里写死
width和height属性，防布局抖动 - 避免给
<figure></figure>加float或绝对定位——现代布局交给 CSS Grid/Flex 控制
用 CSS Grid 实现响应式三栏到单栏自动切换
别用媒体查询硬切 3→2→1 栏，那样维护成本高还容易漏断点。直接用 display: grid + minmax() + auto-fit 一行搞定：
ul.news-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.2rem;
}
这个写法的意思是：每项最小 300px，最大占满可用空间，浏览器自动算该放几列。手机上自然变成 1 列，平板上 2 列，桌面端 3 列以上——不需要写任何 @media。
- 如果后台 CMS 输出的是
<ul><li></ul>结构，就把<li>设为display: contents，让<article></article>直接成为 Grid 子项 - 慎用
grid-auto-flow: dense，它会打乱 DOM 顺序，对 SEO 和键盘导航不友好 - 给
<article></article>加margin-bottom: 0，Grid 的gap已足够控制间距
用 aspect-ratio 和 object-fit 统一图片比例
不同来源的图宽高比五花八门，硬裁剪会丢重点，等比缩放又留白难看。CSS 新属性 aspect-ratio 是解药：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
figure img {
aspect-ratio: 16 / 9;
object-fit: cover;
width: 100%;
}
这样无论原图是正方、竖版还是超宽，都会按 16:9 比例裁切居中显示。注意：IE 完全不支持 aspect-ratio，但可以降级为 padding-top 百分比 hack（需额外 wrapper）。
- 必须设
object-fit: cover，contain会导致留白、比例失控 - 不要给
<img>设固定 height，会破坏响应性 - 如果要兼容 Safari 15.4 之前版本，得加
height: auto防止塌陷
避免用内联样式或 !important 覆盖默认链接颜色
资讯标题里的 <a></a> 默认蓝色带下划线，强行用 style="color:#333" 写死不仅难维护，还会覆盖用户自定义的高对比度模式设置。正确做法是：
- 在全局 CSS 里统一重置：
a { color: inherit; text-decoration: none; } - 悬停效果用
:hover+transition，别用 JS 绑定 mouseenter/mouseleave - 访问过链接（
:visited）颜色必须满足 WCAG 对比度要求（至少 4.5:1），深灰比紫色更稳妥 - 禁用
!important——它会让后续组件化复用变得极其脆弱
真正麻烦的不是怎么让它“好看”，而是怎么让它在暗色模式、高对比度系统、低网速（图片加载失败时）、键盘 Tab 导航下都保持可用。这些细节堆起来，才是资讯列表“美观”的底层逻辑。
