资讯卡片应使用包裹，标题用，图用置于顶部，摘要用，时间与来源放内和，交互区域单独处理，避免语义混乱。
资讯卡片结构怎么写才语义清晰又方便扩展
直接用 @#@#@#@#@#@#@#@#@#@0，配合 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></a>必须设inset: 0，而不是top/left/bottom/right: 0，前者更简洁且兼容性更好 -
<span class="visually-hidden"></span>的文案要包含具体标题，不能写“查看详情”，否则屏幕阅读器播报时信息缺失 - 如果卡片需要 hover 效果（比如阴影加深），CSS 中对
<article></article>设:hover即可，<a></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}"></newscard>；Vue 3 Composition API 同理，v-for的 key 必须绑定到<template></template>或根元素 - 即使卡片数据来自本地 mock，也要模拟真实
id字段，否则开发阶段看不出问题，上线后排序一动就崩 - 服务端渲染（SSR）场景下，客户端 hydration 时 key 不匹配会直接报
Hydration failed错误，比运行时状态错乱更难排查
rel 属性——资讯类外链必须加 rel="noopener noreferrer"，否则存在安全风险；而站内跳转链接，rel 留空即可。这点常被当成“样式问题”跳过，但影响真实交付质量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
