应使用语义化<section id="team" aria-labelledby="team-title">包裹团队区域，每个成员用<article>表示，头像<img>需设alt="姓名-职位"、width/height相等、object-fit:cover及aspect-ratio:1/1，CSS Grid采用repeat(auto-fill,minmax(280px,1fr))并用gap统一间距。
直接用语义化 <section> + <article> 结构配 CSS Grid，不写死列数、不手动调间距、不硬编码图片尺寸——这才是能维护、能响应、能无障碍的团队页底子。
怎么组织 HTML 结构才不翻车
别用一堆 <div class="member"> 堆砌。浏览器和屏幕阅读器需要知道“这是一个人”，不是“一堆盒子”。
- 整个团队区域用
<section id="team">包裹，加aria-labelledby指向标题 - 每个成员必须是独立的
<article>，不是<div>或<section>——<article>表示可独立分发的内容单元 - 头像用
<img>，alt必须写真实姓名+职位，比如alt="王磊 - 后端架构师"，不能是空或"headshot" - 姓名用
<h3>（不是<h2>或<p>），职位用<p class="role">，简介用<p class="bio"> - 外链（如 GitHub）必须带
rel="noopener noreferrer"，否则存在安全漏洞
CSS Grid 布局为什么不能写死 repeat(3, 1fr)
写死三列在手机上会横向溢出，小屏用户得左右拖动才能看全，而且无法适配折叠屏或横屏平板。
- 正确写法：
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) -
minmax(280px, 1fr)是底线：卡片最小 280px（保证头像和文字可读），但能自动撑满容器宽度 -
auto-fill比auto-fit更稳——前者保留空位占位，避免最后一行突然拉宽导致视觉失衡 - 统一用
gap: 1.5rem控制间距，别给每个<article>加margin，后者在断点切换时容易错位或边缘多出空白 - 卡片本身加
max-width: 100%，防止大图撑破容器；头像<img>加width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
头像变形/切脸/模糊的三个硬伤点
不是图源问题，是 CSS 层没控住。哪怕换 100 张正方形图，只要这三行缺一，照样歪。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
width和height必须相等（如140px），否则border-radius: 50%不生效 -
object-fit: cover是核心——它保持比例裁剪显示，不是缩放填满（fill）也不是留白（contain） - 用户上传头像必须后端强制转为 ≥400×400 的 JPEG/WebP，前端只负责渲染；小图放大后模糊，CSS 再怎么写也救不回来
动态渲染时 data- 属性怎么用才不埋雷
如果团队数据来自 JSON，别拼字符串塞 innerHTML，更别把 ID 写进 class 名里（如 member-123）。
- 原始数据存
data-member-id、data-role等属性，只放非敏感字段 - 用
document.createElement('article')+.append()插入，比字符串拼接快且支持键盘导航 - 每条成员项加
role="article"和唯一id，方便后续用aria-activedescendant做焦点管理 - 如果用事件委托监听“查看详情”，绑定在
#team容器上，用e.target.matches('.detail-btn')判断，而不是对每个按钮单独绑
真正卡住进度的往往不是“怎么写第一张卡片”，而是“加第 12 个人时要不要改三处样式”“小屏下头像突然变成长方形”“点击链接后新窗口跳转丢失登录态”——这些细节不提前控住，后面全是补丁。
