卡片必须用 article 或 section 而非 div，因 div 无语义；图片须用 figure+figcaption 绑定说明；响应式用 grid 的 auto-fit 而非固定列数；交互状态需同时支持 hover 和 focus-visible。
卡片结构必须用 article 或 section 而不是 div
语义错误是卡片列表“看起来精美但被吐槽不专业”的主因。搜索引擎和屏幕阅读器依赖语义标签识别内容区块，div 无含义，而 article 明确表示独立、可分发的内容单元（比如一篇图文卡片）。用 section 也比 div 更合理，尤其当卡片属于同一主题集合时。
常见错误：全用 div class="card" 套娃，CSS 写得再炫，结构仍是空心的。
- 每张卡片用
<article></article>包裹标题、图片、描述、操作区 - 整组卡片用
<section aria-labelledby="cards-title"></section>，并配<h2 id="cards-title">精选推荐</h2> - 避免嵌套超过三层：比如
article > div > div > div—— 直接用header、figure、footer替代中间层
figure + figcaption 是图片与说明的黄金组合
很多人把图片塞进 div 再加 p 标说明文字，这破坏了图-文的逻辑绑定。HTML5 的 figure 就是为此设计的：它声明“这部分内容（图/表/代码块）可独立于正文引用”，figcaption 则是它的官方说明容器。
这样做不只是语义正确，还能让 CSS 的 aspect-ratio 和 object-fit 更稳定生效，避免图片拉伸错位。
- 图片必须有
alt属性，哪怕为空：<img src="a.jpg" alt="山间日落，暖色调，云层低垂"> - 不要把
figcaption放在figure外面，否则失去关联性 - 若需悬浮显示摘要，用
title属性或aria-describedby，别靠 JS 模拟 tooltip
用 display: grid 控制响应式列数，别信“写死 3 列”
所谓“精美”，核心之一是不同屏幕下都保持呼吸感。硬写 float 或 inline-block + 百分比宽度，会在小屏上挤成一坨；用 Flex 布局又难精准控制列数断点。
grid 的 repeat(auto-fit, minmax(300px, 1fr))) 是目前最稳妥的写法：最小宽度卡住卡片不塌缩，自动填充可用空间，且无需媒体查询就能适配手机/平板/桌面。
- 给容器加
gap: 1.2rem，比用margin更可靠（不会首尾多出空白） - 禁用
grid-template-columns: repeat(3, 1fr)—— 它在窄屏下会强制三列并排导致横向滚动 - 如需 IE 兼容，改用
display: flex+flex-wrap: wrap，但必须配合min-width和flex-basis计算
交互状态必须靠 :focus-visible 而非仅 :hover
只写 .card:hover { transform: translateY(-4px) } 看起来很酷，但键盘用户 tab 到卡片时毫无反馈，不符合 WCAG 2.1。现代做法是分离指针与键盘焦点样式。
:focus-visible 是浏览器原生判断“当前焦点是否由键盘触发”的机制，比手写 tabindex + JS 判断更轻量、更可靠。
- 卡片链接或按钮必须有
tabindex="0"（如果是非可聚焦元素） - 悬停效果写
.card:hover, .card:focus-visible，但两者动画参数可不同：鼠标悬停用transform，键盘聚焦用outline+box-shadow - 禁用
outline: none—— 若真要隐藏默认轮廓，务必提供同等视觉强度的替代样式
alt 当摆设、把 grid 当装饰、把 focus 当可选项。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
