描述文字用
，域名区域建议用
，便于样式隔离
避免在
里嵌套其他可交互元素（如按钮、输入框），会触发浏览器兼容性警告
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 到域名首字母
直接
会触发跨域请求失败、404 报错、甚至被浏览器屏蔽，尤其当目标站禁了 referrer 或开了 CSP。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
真正可行的方案是绕过直接请求，用第三方服务代理或本地 fallback。不要依赖
rel="icon"
的自动解析逻辑，它不可控且不触发加载事件。
首选方案：用
https://www.google.com/s2/favicons?domain=example.com&sz=32
这类公开 API（注意加
referrerpolicy="no-referrer"
）
必须设置
img
的
width
/
height
为固定值（如
16
），否则加载中会塌陷布局
用
E"">
做兜底，别用 CSS
::after
伪元素生成字母（无法被读屏软件识别）
如果项目允许内联 SVG，把常用域名（github.com、twitter.com 等）的 favicon 转成 data URI 内联，彻底规避网络请求
为什么不用 JavaScript 动态生成卡片反而更稳
很多人一上来就写
fetch()
抓 Open Graph 数据，结果卡在 CORS、超时、HTML 解析失败、XSS 过滤上。实际场景中，90% 的链接卡片数据是已知或可预置的。
动态预览只适合后台服务统一处理（如 Slack、Notion 的链接预览），前端硬做等于重复造轮子还更不可靠。
静态卡片直接写死
href
、
data-title
、
data-description
属性，用 CSS 变量控制主题色，零请求、零错误
若真需动态，用
