正确结构是每位成员用article包裹、班组整体用section定义；article需含姓名等独立内容，不可嵌套；hover应作用于.person而非section；img的alt须描述实质信息，如“张三，前端开发工程师”。
用 article 和 section 组织成员卡片结构
语义错误是新手最常踩的坑：把所有成员硬塞进一个 div 或用一堆 span 堆砌，结果搜索引擎和屏幕阅读器完全无法识别“这是多人介绍”。正确做法是把每位成员当作独立信息单元，用 article 包裹；整个班组介绍用 section 定义上下文。
-
article必须有明确的、可独立存在的内容（比如姓名、职位、简介），不能只是样式容器 - 如果成员间存在逻辑分组（如“前端组”“后端组”），在外层加
section并配h2标题，别用div class="group" - 避免嵌套
article：一个article里不要再套另一个article，否则语义混乱
悬停显示详情时，:hover 触发范围要精准
常见错误是给整个 section 加 :hover，结果鼠标一划过空白区域就弹出所有人的信息框。真正该监听的是每个成员的根容器（即 article 或带 class="person" 的元素）。
- 用
.person:hover .info-popup而不是section:hover .info-popup -
.info-popup必须设position: absolute，且父级.person得加position: relative，否则弹窗会脱离原位 - 移动端不支持
:hover，若需兼容，得用 JavaScript 切换show类，不能只靠 CSS
img 标签必须带 alt 属性，且内容不可为空或泛泛而谈
很多教程示例写 <img src="avatar.jpg" alt=""> 或 alt="头像"，这在无障碍场景下等于没写。WCAG 标准要求 alt 文本能传达图像的实质信息。
- 如果是真实人物照片，
alt应为“张三，前端开发工程师”，而非“张三的照片” - 若图仅为装饰（比如纯色背景圆角头像框），用
alt=""（空字符串），但前提是该图确实不承载信息 - 不要用
alt="图片"、alt="头像"这类无意义占位符，屏幕阅读器会读出来，反而干扰用户
响应式断点要匹配实际设备行为，别照搬模板数值
看到别人用 @media (max-width: 600px) 就直接复制？问题在于：这个值是否真对应你目标用户常用设备的视口宽度？比如 iPad mini 竖屏宽度是 768px，但很多“移动端”样式却在 600px 就触发，导致平板上布局错乱。
立即学习“前端免费学习笔记（深入）”；
- 优先按内容溢出点设断点，而不是设备型号。例如卡片文字在 480px 宽度开始换行难看，那就设
480px - 测试时用浏览器开发者工具的真实设备模拟，别只信“iPhone X”预设——它可能已过时
- 避免多层嵌套媒体查询，同一组件的响应式规则尽量收在一个
@media块里，否则维护时容易漏改
article 的语义边界和 alt 的信息密度——它们不直接影响页面渲染，但决定卡片能否被搜索收录、能否被残障用户理解。这两处省事，后面补救成本远高于一开始写对。 
