HTML无原生“协作人数”语义标签，需用协作成员3结构配合data-team-count="3"属性实现语义化与机器可读。
HTML里没有原生的“协作人数”语义标签
HTML标准本身不提供 collaborators、team-count 或类似语义化元素。想表达“这个项目由3人协作完成”，不能靠一个标签自动标注，得靠结构+属性+可访问性组合实现。
常见错误是直接写 <span>3人</span>——它对屏幕阅读器无意义，搜索引擎无法识别上下文，也不利于后续用CSS或JS提取数据。
- 推荐用
<dl> <dt>协作成员</dt> <dd>3</dd> </dl>，语义清晰且可被解析 - 若需机器可读，加
data-team-count="3"属性，JS可直接读取：el.dataset.teamCount - 避免用
title属性藏人数（如<div title="3人">...</div>），它仅作提示，不可编程访问
头像列表用 ul + li 最稳妥
不是所有场景都适合用 figure 或 grid：前者偏单图语义，后者在老浏览器中支持弱、CSS易失控。团队头像本质是“一组并列的人”，ul 天然匹配。
容易踩的坑是给每个头像套一层 div 再塞进 li，徒增嵌套；或者用 span 代替 li，破坏列表语义。
立即学习“前端免费学习笔记（深入）”；
- 结构应为：
<ul class="team-avatars"> <li><img src="a.jpg" alt="张三"></li>...</ul> -
alt必须写真实姓名，不能写“头像”或留空；若头像含文字（如 initials），也需在alt中体现 - 若头像带链接（跳转个人主页），把
a包在li内，别反过来——否则语义错乱：<li><a href="/zhangsan"><img alt="HTML怎么标注项目协作人数_HTML团队成员头像列表【操作】" ></a></li>
用 aria-label 补足“3人协作”可访问性
光有数字“3”不够，屏幕阅读器需要知道它代表什么。单纯加 role="status" 没用，必须配 aria-label 明确说明。
比如在头像列表上方放一行小字：“协作成员（3人）”，这行字本身要承担可访问性职责。
- 正确写法：
<p aria-label="本项目由3位成员协作完成">协作成员（3人）</p> - 错误写法：
<span>3人</span>（无上下文）、<p>协作成员（<span>3</span>人）</p>（数字孤立） - 如果该信息只在视觉上呈现（比如用 CSS 伪元素生成“3”），必须用
aria-hidden="true"隐藏伪元素，并另起一个span带aria-label供读屏器读
CSS排版时别让头像数量影响布局流
头像数量动态变化（比如从3人变成5人）时，用 flex-wrap: wrap 或 grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)) 是常见解法，但容易忽略两点：
- 固定宽高比缺失：头像尺寸不一致会导致换行错位，统一设
aspect-ratio: 1/1+object-fit: cover更稳 - 响应断点粗暴：在小屏下硬切为单列，可能让头像过小难识别；建议用
min-width控制最小尺寸，而非只靠媒体查询 - 人数超限时处理：比如最多显示5个头像，第6个用
+2占位符，这个占位符必须是真实 DOM 节点（不能纯 CSS 伪元素），否则无法被焦点或读屏器感知
事情说清了就结束。
