最稳妥做法是用<figure><figcaption>包裹头像与姓名，联系信息必须用标准协议链接，480px为唯一响应断点，背景图需配降级色，WebP须fallback，文字叠加加阴影，精简社交链接至四类核心渠道。
用 <figure> 和 <figcaption> 包裹头像与姓名最稳妥
很多人直接用 <div class="avatar"> 套 <img>，结果语义缺失、打印样式错乱、屏幕阅读器读成“图片 图片”，其实头像+姓名本质是一个自包含的图文单元。<figure> 天然支持这个语义，<figcaption> 则明确标识标题内容。
- 写法必须是：
<figure><img src="avatar.jpg" alt="李四，UI设计师"><figcaption>李四</figcaption></figure>，alt里不能只写“头像”，要带人名和身份 - 别把职业描述塞进
<figcaption>——它只负责图的说明，职业建议单独用<p class="role">UI设计师</p> - 如果加 hover 缩放效果，直接给
<figure>设overflow: hidden，否则圆角头像放大时边缘会溢出
联系信息必须用 <a href="mailto:..."> 和 <a href="tel:...">
写成纯文本 “邮箱：xxx@xx.com” 是最大误区——用户没法一键发送，爬虫抓不到结构，移动端也触发不了原生应用。所有可交互的联系项，必须走标准协议链接。
- 邮箱链接：
<a href="mailto:me@example.com?subject=咨询合作">me@example.com</a>，subject参数能预填标题，提升回复率 - 电话链接：
<a href="tel:+8613800138000">+86 138-0013-8000</a>，注意国际区号格式，+号不能省 - GitHub 等第三方链接统一用
rel="noopener noreferrer"，防止新窗口劫持原页面 - 别用
<button>模拟链接——它没有href的语义和默认行为，键盘用户无法回车触发
@media (max-width: 480px) 足够覆盖绝大多数手机场景
不用折腾多个断点。480px 是竖屏手机主流视口宽度临界值，再小的屏（如旧款 iPhone SE）也靠缩放适配，而非重排布局。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 在这个断点内，把联系信息列表从横向网格改成纵向堆叠：
grid-template-columns: 1fr;，<dt>和<dd>自然上下对齐 - 头像尺寸从
120px改为80px，同时加object-fit: cover;防止拉伸变形 - 移除所有
min-width和固定width（比如width: 320px），否则在 iPad 分屏或浏览器缩放时会横向滚动 - 禁用
background-attachment: fixed——iOS Safari 渲染卡顿，且 Safari 17.4 已明确标记为非标准行为
背景图加载失败时白屏？必须配 background-color 降级色
只写 background-image: url(...) 是危险操作。网络波动、CDN 故障、路径错误都会导致图片不加载，整页变白，用户第一印象就崩了。
立即学习“前端免费学习笔记（深入）”；
- 降级色不是随便挑个灰：
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%), #667eea;—— 渐变主色作为 fallback - WebP 图片必须提供
<img>或<picture>fallback，但背景图没法做 srcset，所以单张高质量 WebP + 同色系 solid color 最实际 - 文字叠加区域务必加
text-shadow: 0 1px 2px rgba(0,0,0,0.6)，别依赖纯色文字——背景明暗不一，不加阴影在亮区直接看不见 - 别用
backdrop-filter: blur(2px)给文字加毛玻璃效果，Safari 仍需-webkit-backdrop-filter，且低端安卓机渲染异常
