资讯卡片应使用<article>包裹，标题用<h3>，图用<figure>置于顶部，摘要用<p>，时间与来源放<footer>内<time>和<cite>，交互区域单独处理，避免语义混乱。
资讯卡片结构怎么写才语义清晰又方便扩展
直接用 <article> 包裹每张卡片，不是 <div> 堆砌——搜索引擎和屏幕阅读器靠这个识别独立内容单元。标题必须用 <h3>（不能降级成 <h4> 或 <span>），时间、来源、摘要这些辅助信息统一放在 <footer> 里。
常见错误是把封面图塞进 <header> 或用 <img> + <figcaption> 模拟卡片头，结果语义断裂、SEO 权重分散。正确做法是用 <figure> 包裹图和图注，再整体放进卡片顶部。
-
<article>内部层级：<header>（含<h3>和<figure>）→<p>（摘要）→<footer>（<time>+<cite>） - 避免在
<footer>里塞按钮或链接——那是交互区域，该归到<section>或单独的<div class="card-actions"> - 如果卡片要支持“已读”状态，用
data-read="true"这类自定义属性，别硬加class="read"再全局 CSS 控制，否则 SSR 渲染时状态不同步
CSS Grid 实现响应式卡片流要注意哪些断点值
别用媒体查询硬切 grid-template-columns: repeat(3, 1fr) → repeat(2, 1fr) → 1fr，这样在平板竖屏（768px）和小屏横屏（812px）之间容易卡在 2 列半的尴尬状态。改用 minmax() + auto-fit 组合更稳。
关键参数：grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) —— 最小列宽设 300px（兼顾手机大屏和折叠屏），浏览器自动计算能放几列，空余空间均分。比固定列数方案少写 3 个媒体查询。
立即学习“前端免费学习笔记（深入）”；
- 300px 是经过实测的临界值：iPhone SE 屏宽 375px，减去左右边距后刚好容下一张带标题+摘要的卡片；Android 小屏折叠态也撑得住
- 如果卡片内有固定高度的封面图，记得给
<figure>设aspect-ratio: 16/9，否则 Grid 列宽变化时图片会被拉伸 - 别忘了加
gap: 1rem，但不要用margin模拟间隙——Grid 的gap不会触发外边距合并，布局更可控
卡片点击区域怎么做才能不误触又兼容键盘操作
卡片整体可点，但别给 <article> 直接加 onclick 或 role="button" —— 这会导致键盘用户按 Tab 键无法聚焦，且移动端 touchstart 和 click 事件冲突概率高。正确路径是：内部放一个不可见但可聚焦的 <a> 标签，覆盖整个卡片区域。
示例结构：<a href="/news/123" class="card-link"><span class="visually-hidden">查看《AI 模型压缩新进展》</span></a>，配合 CSS：.card-link { position: absolute; inset: 0; display: block; } .visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; width: 1px; }
- 绝对定位的
<a>必须设inset: 0，而不是top/left/bottom/right: 0，前者更简洁且兼容性更好 -
<span class="visually-hidden">的文案要包含具体标题，不能写“查看详情”，否则屏幕阅读器播报时信息缺失 - 如果卡片需要 hover 效果（比如阴影加深），CSS 中对
<article>设:hover即可，<a>本身不用额外样式——它只是焦点和跳转载体
Vue/React 渲染卡片列表时 key 值为什么不能用 index
当列表排序、筛选或局部更新（比如某张卡片标为“已读”）时，用 index 当 key 会让框架复用错误的 DOM 节点，导致状态错乱——比如第 2 张卡片的“已读”状态跑到第 3 张上。必须用唯一业务标识，比如新闻的 id 字段。
如果后端返回的数据没有稳定 id（例如 RSS 源只提供 guid 或 link），优先取 guid；若也没有，用 link 的 hash 值生成短 ID（如 md5(url).slice(0,8)），千万别 fallback 到 index。
- React 中
key写在组件标签上：<NewsCard key={item.id} {...item} />；Vue 3 Composition API 同理，v-for的 key 必须绑定到<template>或根元素 - 即使卡片数据来自本地 mock，也要模拟真实
id字段，否则开发阶段看不出问题，上线后排序一动就崩 - 服务端渲染（SSR）场景下，客户端 hydration 时 key 不匹配会直接报
Hydration failed错误，比运行时状态错乱更难排查
rel 属性——资讯类外链必须加 rel="noopener noreferrer"，否则存在安全风险；而站内跳转链接，rel 留空即可。这点常被当成“样式问题”跳过，但影响真实交付质量。 
