用语义化HTML（如<figure><figcaption>）构建团队展示墙，配合CSS Grid响应式布局、WebP懒加载图片及视觉统一处理，无需框架即可实现高性能、可访问、易维护的创意团队页面。
用纯 HTML 搭建创意团队展示墙，根本不需要框架或构建工具——但直接写 <div> 堆砌容易失控，关键在结构分层和语义控制。
用 <figure> 和 <figcaption> 组织每人卡片
别用一堆 <div class="card">，浏览器不理解“这是一个人”。<figure> 明确表示独立内容单元，配合 <figcaption> 放姓名、角色、简短介绍，语义清晰，也方便后续加 CSS 选择器（比如 figure figcaption）。
常见错误：把头像当背景图塞进 <div>，结果无法 alt 描述、打印时丢失、屏幕阅读器跳过。正确做法是用 <img src="..." alt="张薇，UI 设计师，专注动效与用户路径优化"> 直接嵌入 <figure> 内。
-
<figure>包裹头像<img>+ 角色信息<figcaption> -
alt文本必须具体，避免 “person1” 或空字符串 - 不给
<figure>设固定宽高，用 CSS 控制缩放和居中更灵活
用 display: grid 实现响应式排列，而非浮动或 inline-block
团队人数常变（5人、12人、甚至临时加顾问），用 float 或 inline-block 很难保证换行一致，尤其在小屏上容易错位。CSS Grid 天然支持列数自适应。
立即学习“前端免费学习笔记（深入）”；
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
示例关键代码：
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1.5rem;
}
说明：auto-fill 让浏览器尽可能多铺列，minmax(240px, 1fr) 保证每列最小 240px、最大均分剩余空间。手机上自动变成单列，平板双列，桌面三列以上——不用媒体查询也能稳住布局。
- 别设死
grid-template-columns: 3fr 3fr 3fr，人数少时留大片空白 -
gap代替margin控制间距，避免首尾外边距异常 - 如果团队有“首席”需突出，可对特定
<figure>加grid-column: span 2，但需测试跨列后是否破坏整体节奏
加载性能卡在图片，必须用 loading="lazy" 和合适尺寸
12 张头像全塞进 HTML，没压缩、没懒加载，首屏可能卡顿 2 秒以上。HTML 本身轻，但图片是实际瓶颈。
实操要点：
- 每张头像导出为 WebP 格式（比 JPG 小 30%+），尺寸控制在 400×400px 以内（展示墙通常只显示 200px 宽）
-
<img>标签必须带loading="lazy"，现代浏览器原生支持，无需 JS - 避免用 CSS
background-image加载头像——无法设置loading，也无法被预加载提示（<link rel="preload">）捕获 - 如果头像来自外部链接（如 GitHub Avatar），加
referrerpolicy="no-referrer"减少隐私泄露风险
最易被忽略的是头像的视觉一致性：有人正脸照、有人侧影、有人带背景、有人纯白底——放到同一网格里会显得杂乱。哪怕 HTML 结构再干净，视觉断层也会削弱专业感。统一裁剪比例（推荐 1:1）、统一背景（纯色或轻微渐变）、统一滤镜（如统一加 1px 灰色描边），这些不在 HTML 里写，但决定最终效果是否“像一个团队”。
