用语义化html（如、）和简洁css（grid布局、单断点响应式）可实现响应式、可访问、高性能的个人资料卡，无需框架或js。
直接用语义化 HTML + 简洁 CSS 就能做出响应式、可访问、加载快的个人资料卡，不需要框架或 JS。
用 <article></article> 包裹结构，别用 <div> 堆砌
<p>资料卡本质是独立、自包含的内容单元，<code><article></article> 是最贴切的语义标签。屏幕阅读器能识别它为一个完整信息块，SEO 也更友好。用 <div> 虽然也能显示，但丢掉了结构含义，后续加 aria-label 或调整样式时反而要补救。
<ul>
<li>头像用 <code><img>，必须带 alt 属性（如 alt="张三的头像"），空字符串 alt="" 仅适用于纯装饰图
<h2></h2>（不是 <h1></h1>，整页应只有一个 <h1></h1>），职业/身份用 <p></p> 或 <span></span>，别为了样式降级成 <h3></h3>
<dl>
<dt></dt>
<dd></dd>
</dl> 组合最规范（例如 <dt>邮箱</dt>
<dd>me@example.com</dd>），比一堆 <p></p> 更易被爬虫和辅助工具解析CSS 布局选 display: grid，别硬套 Flex 水平居中
资料卡常见布局是头像在上、文字居中、信息左对齐——Grid 天然支持行列分离控制，一行代码就能搞定垂直+水平居中，Flex 在这种二维需求里容易绕弯。
- 给
<article></article>设display: grid; place-items: center;，头像和文字块自动居中；再用grid-template-rows: auto 1fr auto;控制头像、姓名/身份、联系信息的层叠顺序 - 联系信息列表（
<dl></dl>）设display: grid; grid-template-columns: max-content 1fr;，<dt></dt>自动右对齐，<dd></dd>占满剩余宽度，比 float 或 inline-block 更稳 - 避免写
margin: 0 auto;+text-align: center;混搭，小屏幕下容易错位；也别用绝对定位模拟居中，脱离文档流后打印或缩放时易出问题
响应式断点只加一处：@media (max-width: 480px)
手机端只需解决一个核心问题：横向空间不足导致头像挤压文字或信息项换行错乱。480px 是多数竖屏手机的临界值，够用且无需多层嵌套。
- 在此断点内，把
<dl></dl>的网格列改成单列：grid-template-columns: 1fr;，<dt></dt>和<dd></dd>垂直堆叠，阅读顺序更自然 - 头像尺寸从
120px缩到80px，同时用object-fit: cover;保证裁剪一致，别只改宽高导致拉伸变形 - 移除所有
min-width或固定width值（尤其是给<article></article>设width: 320px），让它随容器自然收缩；否则在 iPad 分屏或桌面浏览器缩放时会溢出
真正难的是信息取舍——一张卡片塞不下全部社交链接，优先留邮箱、GitHub、LinkedIn 这三类有明确专业意图的渠道；其余如微博、微信，用「联系我」按钮触发弹窗更合适。样式越简单，内容越敢精炼。
