头像必须用标签并设真实姓名+“头像”的alt值，包裹于中，显式设置宽高，用object-fit:cover居中裁剪；个人信息须用语义化标签（如姓名、职位、联系方式）。
头像必须用 <img alt="HTML卡片排版怎么放头像？个人信息组织" > 标签，不能用 CSS 背景图
头像不是装饰元素，是语义关键节点。用 background-image 会导致打印时消失、爬虫无法抓取、屏幕阅读器完全读不到——这等于主动放弃可访问性与 SEO。所有场景下都必须用 <img src="..." alt="张三头像">，且 alt 值要写真实姓名 + “头像”，不能是空字符串、"avatar" 或泛称。
常见错误：<div style="background: url(./avatar.jpg)"></div> —— 看似省事，但一上线就被无障碍检测工具标红，HR 系统或 ATS（简历解析器）也大概率漏掉该信息。
- 路径必须为相对路径，如
./assets/avatar.png或avatar.jpg（与 HTML 同目录） - 必须显式设置
width和height属性，例如width="80" height="80"，避免加载时布局抖动（CLS） - 若需圆角，不要直接给
<img alt="HTML卡片排版怎么放头像？个人信息组织" >加border-radius: 50%，而应包裹<figure></figure>容器并设overflow: hidden
用 <figure></figure> 包裹头像，别裸写 <img alt="HTML卡片排版怎么放头像？个人信息组织" >
<figure></figure> 是语义正确的容器标签，明确表示“这是一个独立的图像内容单元”。它比 <div> 更利于 SEO、辅助技术识别，也方便后续扩展（比如加徽章、状态标识）。
<p>错误写法：<code><img src="avatar.jpg" style="max-width:90%" style="max-width:90%" style="border-radius:50%" alt="HTML卡片排版怎么放头像？个人信息组织" > —— Safari 旧版可能渲染异常，且无法响应式缩放；图片比例不一时还会裁切关键区域。
立即学习“前端免费学习笔记（深入）”；
- 正确结构：
<figure style="width:80px; height:80px; border-radius:50%; overflow:hidden;"><img src="avatar.jpg" style="max-width:90%" style="max-width:90%" style="width:100%; height:100%; object-fit:cover;" alt="HTML卡片排版怎么放头像？个人信息组织" ></figure> -
object-fit: cover确保头像居中裁剪，不拉伸不变形 - 如果头像缺失，
onerror可兜底：onerror="this.src='placeholder.svg'; this.alt='默认头像'"
个人信息区块用语义化标签组织，别堆 <div>
<p>姓名、职位、简介不是随便塞进 <code><p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a>
<p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 就完事。HTML 有对应语义标签：姓名用 <h2></h2>，职位用 <h3></h3> 或带 role="note" 的 <p></p>，简介用 <p></p>，联系方式放 <footer></footer>。这样结构清晰，JS 操作、微数据注入（如 itemscope itemtype="https://schema.org/Person"）和自动化测试才不会翻车。
常见错误：全用 <div class="name">、<code><div class="title"> —— 语义扁平，屏幕阅读器只能读“div”，无法区分身份层级。
<ul>
<li>结构示例：<code><header><figure>...</figure><h2>张三</h2>
<h3>前端工程师</h3></header><p>专注 React 与性能优化...</p>
<footer><a href="mailto:zhang@example.com">? 邮箱</a></footer>
id，如 id="member-zhang-san"，便于锚点跳转或 JS 动态控制aria-label="前端工程师" 强化语义Flexbox 排版头像+文字时，注意 flex-shrink: 0 和对齐方式
移动端默认垂直堆叠，768px 起改为横向并排时，display: flex 是首选，但必须控制头像不被压缩、文字不塌陷。直接写 flex: 1 或没设 flex-shrink，在窄屏或小字体下头像会被强行压扁。
典型问题：头像高度大于首行文本，导致下方多行简介“沉”到头像底部，视觉错位。
- 头像容器加
flex-shrink: 0，防止被 flex 自动压缩 - 外层用
align-items: center实现垂直居中，比vertical-align或margin-top更可靠 - 文字区加
margin-left: 1rem（PC）或margin-top: 0.75rem（移动端），用相对单位留白 - 避免用
float—— 需要额外clear，且在 flex 容器里行为不可控
alt 文本的真实性和 <figure></figure> 的语义必要性。很多人以为“图能显示就行”，但一旦遇到网络失败、爬虫抓取、HR 使用 ATS 系统筛选简历，这些细节就立刻变成硬性门槛。
