用+语义化结构实现群成员列表，配合包头像、包昵称，支持data-user-id传参、aria-label状态提示、contain: layout style paint优化滚动性能，并预留在线状态样式扩展位。
怎么用 HTML + CSS 实现可读性好的群成员列表
纯 HTML 无法动态渲染成员，必须配合数据源（比如 JS 数组或后端 JSON）。实际项目中，<ul></ul> + <li> 是最稳妥的语义化结构，比用 <div> 堆砌更利于可访问性和样式控制。<p>常见错误是直接把头像和昵称写死在 HTML 里，导致后续加人/删人要手动改代码。正确做法是：用 JS 动态生成 <code><li>，HTML 只留一个空容器，比如：
- 每个
<li>内部建议用<figure></figure>包头像（<img>）+<figcaption></figcaption>包昵称，语义清晰且适配屏幕阅读器 - 避免给头像设固定
width/height，改用aspect-ratio: 1 / 1+object-fit: cover保形裁剪 - 昵称超长时用
text-overflow: ellipsis，但必须同时设white-space: nowrap和overflow: hidden
如何让群成员列表支持在线状态标识（如小绿点）
在线状态不是靠 HTML 标签实现的，而是靠 CSS 类名切换 + 后端/Socket 推送的状态字段。关键在于结构预留位置、样式可扩展。
推荐在头像容器内叠加一个绝对定位的 <span></span>，并用类名区分状态：
<figure class="member-avatar"><br> @@##@@<br><span class="status online"></span><br></figure>
-
.status设为position: absolute; bottom: 0; right: 0;，再用border-radius: 50%和background: #4CAF50做小圆点 - 离线状态用
class="status offline"，背景色换为#9E9E9E，JS 根据isOnline: false动态切换类名 - 别用
title属性做“在线/离线”提示——移动端不触发，且对键盘用户不友好；改用aria-label，例如aria-label="张三 在线"
滚动区域里列表卡顿？CSS 层叠与渲染优化要点
当群成员超过 50 人且放在 max-height + overflow-y: auto 容器中时，频繁增删 <li> 会引发重排。这不是 HTML 问题，但结构设计直接影响优化空间。
- 给列表容器加
contain: layout style paint，告诉浏览器这个区域的变化尽量不波及外部 - 避免在
<li>上设box-shadow或filter: blur()，这些会强制创建单独图层，内存占用高 - 头像统一用
loading="lazy"，但注意：只有在滚动容器内才真正生效；若容器本身没设overflow，懒加载可能不触发 - 真要撑到几百人，就得上虚拟滚动——此时 HTML 结构反而要简化，只保留可视区的
<li>，其余靠 JS 计算transform: translateY()定位
为什么用 data-* 属性传用户 ID 而不用 id 或 class
id 必须唯一，class 用于样式，二者都不该承载数据逻辑。用 data-user-id 是规范做法，JS 拿起来也干净：li.dataset.userId。
- 错误示例：
<li id="user-123">—— ID 不能以数字开头，且一旦页面有其他元素也用user-123就冲突 - 更糟的是：
<li class="123">—— class 名含纯数字虽合法，但 JS 里写document.querySelector('.123')会被误解析为小数 - 正确姿势：
<li data-user-id="123" data-role="admin">，多个元数据互不干扰，也方便以后加data-last-active="2024-05-20" - 注意：不要把敏感信息（如手机号、token）塞进
data-*，前端任何属性都可被用户查看
实际嵌入时最容易被忽略的，是键盘焦点管理——当用方向键在成员间切换时，<li> 默认不可聚焦。得手动加 tabindex="0"，并监听 keydown 处理上下键逻辑。这点在无障碍和快捷操作场景下不是可选项。
