优先用 <a> 但仅限真实跳转，否则必须用 <button>；卡片布局推荐 grid 配 auto-fit；需区分 :active 和 :focus-visible；禁用状态须正确使用 disabled 或 aria-disabled。
功能卡片需要可点击又保持语义化，用 <a> 还是 <button>？
优先用 <a>，但前提是它真跳转到一个有效 URL。如果点击后只是展开面板、切换标签或触发 JS 功能（无页面跳转），那就必须用 <button> —— 否则屏幕阅读器会误报“链接”，键盘用户按 Enter 时行为也不一致。
常见错误：把 <div onclick="doSomething()"> 当卡片入口，既无法键盘聚焦，也不支持 Space/Enter 触发，还缺失 role 和 tabindex，直接被无障碍检测工具标为严重问题。
- 跳转到新页面或锚点 → 用
<a href="/dashboard"> - 仅触发 JS 交互（如弹出模态框、切换 Tab）→ 用
<button type="button">，并加aria-label（例如aria-label="进入数据分析模块"） - 卡片含图标+文字，想让整块区域可点 → 把
<a>或<button>设为display: block，包裹内部所有内容，别用div+onclick
卡片布局用 Flex 还是 Grid？响应式断点怎么设才不卡顿
小到中等数量卡片（≤12 个），用 display: grid 更稳；Grid 能天然对齐行列、控制间隙、自动换行，且无需额外清除浮动或处理 flex 换行塌陷。
关键不是“多好看”，而是“在不同屏幕下是否始终可用”：手机竖屏常需单列，平板横屏两列，桌面三列起步。硬写 flex-wrap 配 min-width 容易在某些宽度下出现最后一行只占半宽的尴尬空隙。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 推荐基础 Grid 写法：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))—— 自动适配，最小 280px（保障文字不挤），最大均分 - 避免用
px固定列宽（如grid-template-columns: 300px 300px），会导致小屏横向滚动 - 卡片内图片建议用
<img>+object-fit: cover，别用背景图 —— 否则无法设置alt，影响可访问性
点击反馈太弱？CSS :focus-visible 和 :active 必须分开处理
鼠标点击时要视觉压感（:active），键盘聚焦时要清晰轮廓（:focus-visible），二者不能混用。很多团队只写 :focus，结果鼠标点一下也套个难看的蓝框，体验割裂。
现代浏览器已原生支持 :focus-visible，它能智能判断用户是鼠标操作还是键盘操作，只在后者触发焦点样式。这是目前最稳妥的方案。
- 按钮类卡片入口必须有
:active { transform: translateY(1px); }或背景色微调，否则用户不确定点没点上 - 键盘聚焦样式建议用
outline: 2px solid #007bff; outline-offset: 2px;，比默认蓝框更醒目且不破坏布局 - 禁用
outline: none—— 除非你同时提供了同等可用性的替代焦点指示（比如加粗边框+阴影），否则直接违反 WCAG 2.4.7
卡片数据动态渲染时，aria-disabled 和 disabled 别乱用
disabled 只对表单控件（<button>、<input>）生效，对 <a> 完全无效 —— 加了也没用，用户照样能点、能聚焦、能触发 JS。真要禁用链接卡片，得靠 aria-disabled="true" + 手动拦截事件 + 视觉灰阶处理。
更常见的问题是：权限不足时卡片仍显示，但点了报 403。这不如一开始就隐藏或置灰，并明确告知原因（比如 “请联系管理员开通「日志分析」权限”）。
-
<button disabled>→ 自动禁用交互、降低透明度、移除焦点能力 -
<a aria-disabled="true" href="#">→ 必须配合pointer-events: none+opacity: 0.5+ 点击事件里if (e.target.hasAttribute('aria-disabled')) return - 服务端返回卡片列表时，建议直接过滤掉用户无权访问的项，而非前端 JS 判断后隐藏 —— 减少无效 DOM、避免权限逻辑泄露到前端
卡片入口看似简单，但真正上线后被投诉最多的，往往不是颜色或动画，而是键盘无法操作、读屏器念错、小屏点不准、权限状态不一致——这些细节一旦漏掉，修复成本远高于初期多花十分钟写对 role 和 focus 样式。
