最稳妥的语义化结构是用<section>包裹团队区域、每个成员用<article>；头像用带真实姓名alt的<img>，姓名用<h3>，职位和简介分别用<p class="role">与<p class="bio>；CSS Grid实现响应式布局，配合onerror降级占位图，移动端优先使用touchstart避免300ms延迟。
用语义化 HTML 结构组织团队成员信息
直接用 <section> 包裹团队区域，每个成员用 <article>，这是最稳妥的语义选择。浏览器和屏幕阅读器能正确识别“独立内容单元”，比全用 <div> 更可靠，也方便后续加 CSS 选择器或 JS 操作。
常见错误是把头像、姓名、职位全塞进一个 <div class="member"> 里，结果样式一改就错位，JS 动态加载时也难定位字段。正确做法是拆出明确标签：
- 头像用
<img>，alt属性必须写真实姓名（如alt="张伟 - 技术总监"），不可留空或写“头像” - 姓名用
<h3>（不是<h2>或<p>），因为它是该<article>的主标题 - 职位用
<p class="role">，不推荐<h4>—— 它不是层级标题，只是描述性文本 - 简介用
<p class="bio">，避免用<span>包多段文字
CSS Grid 实现响应式图文并排布局
别用浮动或 inline-block 做团队列表，容易在小屏上换行错乱。直接上 display: grid，配合 grid-template-columns 控制列数：
section.team-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}这个写法的关键点：
立即学习“前端免费学习笔记（深入）”；
-
minmax(280px, 1fr)确保每项最小 280px（适配手机横屏），但能自动撑满容器，比固定列数更健壮 -
auto-fill不是auto-fit—— 前者保留空列占位，后者会收缩空列，导致最后一行成员突然变宽，视觉失衡 -
gap统一控制间距，比给每个<article>加margin更干净，且不会在网格边缘多出空白
如果团队人数少（比如仅 3–4 人），想居中显示而非左对齐，加一句 justify-content: center 即可，不用额外包容器。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
图片加载失败时的降级处理不能只靠 alt
alt 文本只在图片完全加载失败时显示，但实际中更常见的是：路径写错、服务器返回 404、CORS 阻止跨域图片加载——这些情况 <img> 标签会留白或显示破碎图标，alt 却不出现。
必须加 JS 监听 onerror 做兜底：
<img src="team/zhangwei.jpg"
alt="张伟 - 技术总监"
onerror="this.src='images/avatar-placeholder.svg'">- 占位图建议用轻量 SVG（
avatar-placeholder.svg），比 PNG/JPG 更小，且可缩放不失真 - 不要用 JavaScript 动态遍历所有
<img>绑定事件 —— 内联onerror更快生效，避免白屏时间 - 确保占位图路径正确，且放在
images/目录下（与index.html同级或按相对路径写准）
移动端点击头像放大查看需避免 touch 延迟
如果想让用户点击头像弹出大图，别用 click 事件监听——iOS Safari 默认有 300ms 延迟，手感卡顿。改用 touchstart：
<img src="..." onclick="showBigImage(this)">
然后在 JS 中：
function showBigImage(img) {
const largeSrc = img.src.replace('.jpg', '_large.jpg');
// 显示逻辑...
}- 优先用原生
touchstart，不引入 Hammer.js 等库，减少资源加载 - 大图文件名约定要统一（如
_large后缀），避免服务端配置重写规则，降低部署复杂度 - 如果团队页访问量大，考虑用
loading="lazy"属性延迟加载非首屏头像，但首页首屏 3–4 个必须去掉该属性，防止首屏图片闪烁
真正麻烦的不是排版，而是图片路径管理、错误状态反馈和触摸响应节奏——这三处没对齐，用户第一眼就会觉得“不专业”。
