用语义化HTML写团队成员卡片应以<section>包裹多个<article>，每个<article>代表独立成员，头像用含真实姓名的alt属性<img>，姓名用<h3>，职位用<p class="role">，链接加rel="noopener noreferrer"，布局用CSS Grid的auto-fill与minmax确保响应式，辅以aria-label增强可访问性，data-属性仅存非敏感ID。
怎么用语义化 HTML 写团队成员卡片
直接用 <section> 包裹一组 <article>，每个成员一个独立 <article>。别用 <div> 堆砌，否则屏幕阅读器读不出“这是一个人”，SEO 也认不出结构。
-
<article>是必须的——它表示独立、可分发的内容单元，团队成员完全符合这个语义 - 头像用
<img>，alt必须写真实姓名，比如alt="张伟 - 前端工程师"，不能是"team member" - 职位信息放
<p class="role">或<span>，别塞进<h3>——标题层级只留给姓名，否则会破坏文档大纲 - 如果成员有 GitHub / LinkedIn 链接，用
<a rel="noopener noreferrer">，漏掉rel属性可能带来安全风险
CSS Grid 布局怎么让卡片自适应又不崩
用 display: grid + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 最稳。别写死列数（比如 repeat(3, 1fr)），小屏下会横向溢出或缩成一条线。
-
minmax(280px, 1fr)中的280px是底线宽度，确保头像和文字不挤成一团 - 加
gap: 1.5rem控制间距，别用margin模拟——后者在响应式断点切换时容易错位 - 卡片本身设
max-width: 100%，防止大图撑破容器；头像<img>加width: 100%; height: auto; - 避免在
<article>上写float或inline-block，Grid 下这些属性会被忽略，还可能引发渲染冲突
为什么用 aria-label 而不是 title 属性
title 只在鼠标悬停时显示，对键盘用户和屏幕阅读器基本无效；而 aria-label 是给辅助技术明确“这个卡片代表谁”。尤其当头像没文字、姓名又藏在图片 alt 里时，aria-label 能补全上下文。
- 给整个
<article>加aria-label="李娜，后端工程师，专注分布式系统"，比单靠姓名更完整 - 如果姓名已用
<h3>清晰展示，aria-label可省略——别为了“加 ARIA”而加，重复反而干扰 - 绝对不要用
aria-label替代视觉文本，比如把姓名藏起来只留 aria-label，这违反可访问性基本原则
JSON 数据驱动时，data- 属性怎么用才不翻车
前端用 JS 动态渲染团队页时，把原始数据存在 data- 属性里最轻量。但别存整个 JSON 字符串到 data-info，解析易出错；也别把邮箱、电话明文塞进去，爬虫一抓一个准。
立即学习“前端免费学习笔记（深入）”；
- 只存必要 ID 或 slug，比如
data-id="zhangwei-2023"，其余数据由 JS 通过 API 或预加载 JSON 补全 - 如果必须存少量结构化数据，用
data-json并 JSON.stringify 后 URL 编码，JS 侧用decodeURIComponent()+JSON.parse()安全读取 - 别在
data-里放敏感字段：电话、内部工号、未脱敏邮箱——这些该走后端接口鉴权返回 - 服务端渲染（如 SSR）时，优先用
<script type="application/json">块，比一堆data-更清晰、更易维护
真正难的不是写出能看的卡片，而是让每个成员的信息在不同设备、不同输入方式、不同网络条件下都保持可读、可操作、可理解。很多细节——比如 alt 文本是否包含角色、grid-gap 在缩放 125% 时是否仍合理、aria-label 和视觉标题是否语义一致——得挨个点开开发者工具检查，没法靠模板一劳永逸。
