正确做法是用 figure 作头像容器并设 overflow: hidden 和 border-radius: 50%，img 设 width: 100%; height: 100%; object-fit: cover；操作项必须用 button 或 role="button" 元素；卡片外层用 section，信息区用 dl，操作区用 footer；响应式用 CSS Grid 而非 float。
用 figure 包头像，别直接给 img 加 border-radius
直接对 img 设 border-radius: 50% 看似简单，但会裁剪图片内容，尤其当头像比例不是 1:1 或有背景留白时，容易切掉关键区域。正确做法是用 figure 做容器，设 overflow: hidden 和圆角，再把 img 放进去并控制宽高比。
常见错误：<img src="avatar.jpg" style="border-radius:50%"> —— 这种写法在 Safari 或旧版 Edge 中可能渲染异常，且无法响应式缩放。
-
figure是语义化标签，明确告诉浏览器“这是独立的图像内容”，利于 SEO 和屏幕阅读器识别 - 容器设
width/height+border-radius: 50%+overflow: hidden，img设width: 100%; height: 100%; object-fit: cover - 如果头像需带状态标识（如“已认证”），可用
data-status="verified"属性，CSS 通过figure[data-status="verified"]::after叠加徽章
操作菜单必须用 button 或带 role="button" 的元素
很多人用 div + onclick 模拟按钮，结果键盘用户无法 Tab 进入、屏幕阅读器读不出功能、按空格/回车不触发。这不是“看起来像按钮”就行，而是行为和语义必须一致。
典型翻车场景：<div class="btn" onclick="logout()">退出登录</div> —— 没有焦点管理，没有 aria-label，禁用态难实现。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 操作项（编辑、删除、退出、设为默认）一律用原生
button元素，避免额外 ARIA 补丁 - 若必须用非
button标签（如在a上加跳转逻辑），至少补role="button"+tabindex="0"+onkeydown="if(event.key==='Enter'||event.key===' '… - 多个操作按钮建议用
menu+menuitem（需配合role="menu"），但兼容性有限；更稳妥的是用div[role="group"]包裹一组button，加aria-label="用户操作菜单"
卡片整体结构优先用 section，别堆 div
用户卡片不是视觉容器，而是语义区块。“用户信息”属于页面中一个独立的内容单元，section 比 div 更准确；用一堆 div 套娃，后期加微数据（如 itemscope itemtype="https://schema.org/Person"）或做自动化测试时会非常痛苦。
错误示范：<div class="user-card"><div><div><div class="avatar">...</div></div></div></div> —— 类名重复、层级无意义、无法被辅助技术归类。
- 外层用
section，加aria-labelledby="card-title"关联标题 - 头像区用
figure，信息区用dl（字段名dt+ 值dd），操作区用footer（语义上表示“卡片的底部操作区域”） - 避免在
dl里塞div或p——dd本身可包含块级内容，但嵌套过深会导致样式失控和可访问性下降
响应式排列别依赖 float，用 display: grid 控制断点行为
PC 端常需头像+信息左列、操作按钮右列；移动端则必须垂直堆叠。用 float 实现时，清浮动漏掉、高度塌陷、媒体查询条件冗长是高频问题，且无法真正对齐交叉轴（比如让按钮始终底对齐）。
实际断点不是“屏幕宽度”，而是“卡片内容撑开后的剩余空间”。比如一张头像 + 4 行文字 + 3 个按钮，在 480px 宽度下可能仍能横排，但 320px 就必须换行 —— 这得靠 grid-template-columns 动态响应，而非硬写 @media (max-width: 768px)。
- 推荐写法：
section { display: grid; grid-template-columns: 1fr minmax(0, 120px); gap: 16px; }，头像+信息占满主列，操作按钮固定右列宽度 - 移动端用
@media (max-width: 480px) { grid-template-columns: 1fr; }，单列流式布局 - 注意：不要给
figure设固定width，它应随网格列自适应；img用max-width: 100%防止溢出
最易被忽略的一点：头像容器的 aspect-ratio 和 object-fit 必须成对出现。只设 aspect-ratio: 1/1 不加 object-fit: cover，图片会被拉伸；只设 object-fit 不控宽高比，不同尺寸头像在卡片中位置飘忽。这两者缺一不可。
