头像必须用标签并设真实姓名+“头像”的alt值，包裹于中，显式设置宽高，用object-fit:cover居中裁剪；个人信息须用语义化标签（如姓名、职位、联系方式）。

头像必须用 标签，不能用 CSS 背景图

头像不是装饰元素，是语义关键节点。用 background-image 会导致打印时消失、爬虫无法抓取、屏幕阅读器完全读不到——这等于主动放弃可访问性与 SEO。所有场景下都必须用 ，且 alt 值要写真实姓名 + “头像”，不能是空字符串、"avatar" 或泛称。

常见错误：

—— 看似省事，但一上线就被无障碍检测工具标红，HR 系统或 ATS（简历解析器）也大概率漏掉该信息。

• 路径必须为相对路径，如 ./assets/avatar.png 或 avatar.jpg（与 HTML 同目录）
• 必须显式设置 width 和 height 属性，例如 width="80" height="80"，避免加载时布局抖动（CLS）
• 若需圆角，不要直接给 加 border-radius: 50%，而应包裹
  容器并设 overflow: hidden

用

包裹头像，别裸写

是语义正确的容器标签，明确表示“这是一个独立的图像内容单元”。它比

更利于 SEO、辅助技术识别，也方便后续扩展（比如加徽章、状态标识）。

错误写法： —— Safari 旧版可能渲染异常，且无法响应式缩放；图片比例不一时还会裁切关键区域。

• 正确结构：

  

• object-fit: cover 确保头像居中裁剪，不拉伸不变形
• 如果头像缺失，onerror 可兜底：onerror="this.src='placeholder.svg'; this.alt='默认头像'"

个人信息区块用语义化标签组织，别堆

姓名、职位、简介不是随便塞进

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

就完事。HTML 有对应语义标签：姓名用

，职位用

或带 role="note" 的

，简介用

，联系方式放

。这样结构清晰，JS 操作、微数据注入（如 itemscope itemtype="https://schema.org/Person"）和自动化测试才不会翻车。

常见错误：全用

、

—— 语义扁平，屏幕阅读器只能读“div”，无法区分身份层级。

• 结构示例：

  ...

  张三

  前端工程师

  专注 React 与性能优化...

  @#@#@#@#@#@#@#@#@#@0
• 每个成员块建议加唯一 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 文本的真实性和

的语义必要性。很多人以为“图能显示就行”，但一旦遇到网络失败、爬虫抓取、HR 使用 ATS 系统筛选简历，这些细节就立刻变成硬性门槛。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！