最稳妥做法是用包裹头像与姓名，联系信息必须用标准协议链接，480px为唯一响应断点，背景图需配降级色，webp须fallback，文字叠加加阴影，精简社交链接至四类核心渠道。
用 <figure></figure> 和 <figcaption></figcaption> 包裹头像与姓名最稳妥
很多人直接用 <div class="avatar"> 套 <code><img>，结果语义缺失、打印样式错乱、屏幕阅读器读成“图片 图片”，其实头像+姓名本质是一个自包含的图文单元。<figure></figure> 天然支持这个语义，<figcaption></figcaption> 则明确标识标题内容。
- 写法必须是：
<figure><img src="avatar.jpg" alt="李四，UI设计师"><figcaption>李四</figcaption></figure>，alt里不能只写“头像”，要带人名和身份 - 别把职业描述塞进
<figcaption></figcaption>——它只负责图的说明，职业建议单独用<p class="role">UI设计师</p> - 如果加 hover 缩放效果，直接给
<figure></figure>设overflow: hidden，否则圆角头像放大时边缘会溢出
联系信息必须用 @#@#@#@#@#@#@#@#@#@0，subject 参数能预填标题，提升回复率
@#@#@#@#@#@#@#@#@#@1，注意国际区号格式，+ 号不能省rel="noopener noreferrer"，防止新窗口劫持原页面<button></button> 模拟链接——它没有 href 的语义和默认行为，键盘用户无法回车触发
@media (max-width: 480px) 足够覆盖绝大多数手机场景
不用折腾多个断点。480px 是竖屏手机主流视口宽度临界值，再小的屏（如旧款 iPhone SE）也靠缩放适配，而非重排布局。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 在这个断点内，把联系信息列表从横向网格改成纵向堆叠：
grid-template-columns: 1fr;，<dt></dt>和<dd></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></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，且低端安卓机渲染异常
