卡片容器该用 article 还是 section？可独立操作的单元（如工单）必须用 article，仅视觉分组的区块（如“待办事项”列表）用 section；全用 div 会导致键盘导航失效、无障碍识别失败、SEO 抓取异常。
直接用 section 包卡片组，用 article 包每张独立卡片，别全塞 div —— 否则管理系统里筛选、导出、键盘导航全会出问题。
卡片容器该用 section 还是 article？
管理系统里的卡片通常分两类：可独立操作/导出/订阅的单元（如一条工单、一个用户档案），和仅作视觉分组的区块（如“待办事项”列表）。前者必须用 article，后者用 section。
-
article有隐含的独立语义，浏览器会把它当完整内容单元处理，打印、RSS、屏幕阅读器都能正确识别 -
section只表示逻辑分组，没独立性；如果里面只有一张卡片，反而比用article更弱 - 全用
div的后果：键盘 tab 键跳不过去、无障碍工具读成“一段空白区域”、SEO 抓不到卡片标题
多列卡片网格用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
管理系统常要适配宽屏表格页和窄屏审批页，硬写 33.333% 或 float 会导致列数卡死或换行错位。
-
auto-fit会收缩空列，auto-fill会留占位格——后者会让 tab 键焦点跳到不可见区域 -
minmax(280px, 1fr)中的280px是底线，低于这个宽度就自动换行，避免移动端文字挤成一团 - 别在卡片上设
margin模拟间隙，统一用父容器的gap: 16px，否则打印时间隙错乱、暗色模式下阴影偏移
卡片内图片加载失败必须兜底，不能只靠 alt
管理系统常从 API 动态拉取头像、附件缩略图，404 或 CORS 失败时白屏会阻断操作流。
立即学习“前端免费学习笔记（深入）”；
-
alt只提供文字描述，不防视觉空白；得加onerror回调或伪元素 fallback - 简单可靠的做法：
<img src="..." onerror="this.src='/placeholder.svg'; this.classList.add('broken')"> - 更健壮的方案：服务端返回前校验图片 URL 是否返回 200，前端只渲染可信路径
- 慎用
loading="lazy"：部分企业内网 WebView 不支持，首屏卡片图直接不出现
键盘导航和焦点样式不是“锦上添花”
管理系统大量依赖键盘操作（比如审批流程中连按空格通过），但多数人只写 :hover，漏掉 :focus 和 tabindex。
- 卡片容器如果是
div或section，必须加tabindex="0"才能被 tab 键捕获 -
:hover和:focus样式要一致，比如都加transform: translateY(-2px)，否则键盘用户看不到当前在哪 - 按钮类操作区（如“编辑”“删除”）必须用
<button>，别用<div onclick>—— 后者默认不可聚焦、不响应Enter键
真正卡住管理系统的不是布局写法，而是语义缺失导致的可访问性断裂和动态内容兜底失效——这两点一旦出问题，测试阶段很难复现，上线后用户投诉才暴露。
