课程卡片语义正确优先选，因其代表独立、可分发的课程内容（含标题、简介、讲师等），用会丢失结构信息，影响seo与无障碍访问。
课程卡片用 <article></article> 还是 <div>？<p>语义正确优先选 <code><article></article>，尤其当卡片代表独立、可分发的课程内容（比如带标题、简介、讲师、时长、封面图）。用 <div> 也能跑，但会丢失结构信息，影响 SEO 和屏幕阅读器识别。<p>实际开发中容易忽略的是：多个 <code><article></article> 套在同一个 <main></main> 或 <section></section> 里才合理；单独丢一个 <article></article> 在
- 封面图建议用
<img> + alt 描述课程主题，别只写“课程封面”
- 课程标题必须用
<h3></h3>（或根据上下文用 <h2></h2>），不能降级为 <span></span> 加样式模拟
- 价格、标签这类辅助信息，用
<span></span> 或 <small></small> 即可，不需额外语义标签
卡片 hover 效果卡顿？检查 transform 和 will-change
<img> + alt 描述课程主题，别只写“课程封面”<h3></h3>（或根据上下文用 <h2></h2>），不能降级为 <span></span> 加样式模拟<span></span> 或 <small></small> 即可，不需额外语义标签transform 和 will-change
直接改 margin 或 top/left 触发重排（reflow），动画会掉帧。正确做法是只动 transform: translateY(-4px) 这类合成属性。
如果 hover 后仍有轻微卡顿，加 will-change: transform 到卡片容器（仅限 hover 触发前），但别滥用——它会提前占用 GPU 内存，页面卡片多时反而拖慢初始渲染。
- 过渡时间控制在
0.2s～0.3s，太长显拖沓，太短用户感知不到变化 - 避免同时对
opacity和transform做过渡，除非真需要淡入+上浮双重效果 - 用
prefers-reduced-motion: reduce媒体查询关掉动画，符合可访问性要求
响应式断点怎么设？别只盯手机宽度
卡片布局崩坏往往不是因为“没加 media query”，而是断点值和栅格逻辑不匹配。常见错误：用 @media (max-width: 768px) 强切单列，但平板横屏时卡片过宽、留白失控。
更稳妥的做法是按卡片最小可用宽度反推断点。例如卡片最小安全宽度是 280px，一行放 2 个就要 280px × 2 + 间距 ≈ 590px，那 600px 就是合理的双列→单列切换点。
- 用
min-width而非max-width写断点，更符合移动优先逻辑 - 栅格系统推荐用
display: grid配合repeat(auto-fit, minmax(280px, 1fr)))，比浮动或 inline-block 更可控 - 图片高度固定会导致小屏文字被截，改用
aspect-ratio: 16/9保比例，再配object-fit: cover
flex 布局下课程标签换行错位？看 flex-wrap 和 align-items
标签组（如“Vue”“实战”“入门”）用 display: flex 排列时，父容器若设了 align-items: center，而子标签行数不一（有的单行、有的换行），就会出现垂直对不齐。
解决方法不是强行拉高所有标签高度，而是让父容器允许换行，并统一基线对齐：
.tag-group {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: flex-start; /* 关键：别用 center */
}
.tag {
white-space: nowrap;
padding: 4px 10px;
font-size: 0.8em;
}
- 标签文字超长时，宁可截断（
text-overflow: ellipsis）也不强制换行，避免高度突变 - 如果标签数量动态（比如后端返回 0～5 个），记得给
.tag-group设最小高度防塌陷 - 深色背景标签慎用纯白字，对比度低于 4.5:1 会过不了 WCAG 标准
细节堆在卡片边缘：圆角别全用 border-radius: 8px，封面图和底部操作区圆角值最好差 2px；阴影用 box-shadow: 0 2px 8px rgba(0,0,0,0.08) 而非 0 4px 12px，前者更轻量，加载快、滚动顺。
