HTML链接卡片怎么制作｜链接预览样式整理
本文详解如何用纯HTML+CSS稳健、语义化地实现链接卡片，强调以``为唯一外层容器并确保`href`有效，通过合理结构（标题``、描述`
`、域名``）、安全favicon加载（代理API+`onerror`兜底首字母）、精准CSS控制（统一`border-radius: 8px`、`box-shadow`悬停反馈、强制`focus-visible`轮廓）及严格可访问性保障（禁用嵌套交互元素、规避`transform`重排、校验URL防XSS），彻底避开JS动态解析的兼容性陷阱与安全风险，让链接卡片既美观可靠，又对键盘用户、读屏软件和移动端友好。
怎么用纯 HTML + CSS 实现链接卡片基本结构
链接卡片本质是带标题、描述、域名和 favicon 的可点击容器，不需要 JS 就能渲染，但必须保证语义正确。核心是用 包裹整个卡片内容，而不是只包文字——否则屏幕阅读器和 SEO 会丢失上下文。
常见错误是把 链接卡片的视觉反馈直接影响点击意愿。关键不是堆砌阴影或动画，而是确保对比度达标、焦点可见、悬停状态不破坏布局流。 容易踩的坑：用 直接 真正可行的方案是绕过直接请求，用第三方服务代理或本地 fallback。不要依赖 很多人一上来就写 动态预览只适合后台服务统一处理（如 Slack、Notion 的链接预览），前端硬做等于重复造轮子还更不可靠。onclick 模拟跳转，这会导致键盘用户无法 Tab 进入、右键菜单缺失“在新标签页打开”选项。
必须有 href 属性，且值为有效 URL（不能是 # 或空字符串） 或 ，别用 ，域名区域建议用 ，便于样式隔离 里嵌套其他可交互元素（如按钮、输入框），会触发浏览器兼容性警告CSS 如何控制卡片尺寸、圆角和 hover 效果
transform: scale() 做 hover 放大，会导致文本重排、影响相邻卡片位置；或者用 opacity: 0.9 降低不透明度，让色弱用户难以识别变化。box-shadow 配合 transition: box-shadow 0.2s 实现轻量浮起效果border-radius: 8px，别设成 12px 12px 0 0 这类非对称值，移动端点击热区易出错a:focus-visible { outline: 2px solid #007bff; }，否则键盘用户找不到当前焦点font-weight: 600），避免色盲用户无感知如何安全加载 favicon 并 fallback 到域名首字母
rel="icon" 的自动解析逻辑，它不可控且不触发加载事件。https://www.google.com/s2/favicons?domain=example.com&sz=32 这类公开 API（注意加 referrerpolicy="no-referrer"）img 的 width/height 为固定值（如 16），否则加载中会塌陷布局E"">
::after 伪元素生成字母（无法被读屏软件识别）为什么不用 JavaScript 动态生成卡片反而更稳
fetch() 抓 Open Graph 数据，结果卡在 CORS、超时、HTML 解析失败、XSS 过滤上。实际场景中，90% 的链接卡片数据是已知或可预置的。href、data-title、data-description 属性，用 CSS 变量控制主题色，零请求、零错误