语义化用替代套娃，内部用结构；flex垂直居中需设html, body{min-height:100vh}；svg内联图标更可靠；user-select:none防误选但避开标签，且需line-height:2保障触控。
用 <section></section> 搭结构，别用 <div> 套娃
<p>语义化是简约风的底层逻辑。用 <code><section></section> 包裹整个面板，内部用 <header></header> 放姓名/头像，<dl></dl> 列联系方式——不是为了“好看”，而是让屏幕阅读器、SEO 和后续维护都少出错。避免嵌套 3 层以上的 <div>，那只会让 CSS 选择器越来越长、越来越难改。
<h3>
<code>display: flex 垂直居中比 margin: auto 可靠
很多人试过给容器设 margin: auto，结果在不同浏览器里上下偏移不一致。直接对 <section></section> 设 display: flex + flex-direction: column + justify-content: center + align-items: center，一行生效，无兼容性问题。注意：如果父容器没设高度（比如 body 没设 min-height: 100vh），它不会真居中——记得补上：
html, body { min-height: 100vh; }
图标用 SVG 内联，别引 Font Awesome
引入外部图标库会多一次 HTTP 请求，还可能因 CDN 不稳定导致图标空白。把微信、邮箱、电话的小图标用原生 <svg></svg> 写进 HTML，控制颜色和尺寸只改 fill 和 width。例如邮箱图标：
<svg width="20" height="20" viewbox="0 0 24 24" fill="none"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.369 2.681 8.15 6.15 9.577V18a2 2 0 0 0-2-2H6v-3h2a2 2 0 0 1 2 2v3h2v-3a2 2 0 0 1 2-2h2v3a2 2 0 0 0 2 2h2v-3.423C19.319 20.15 22 16.369 22 12z" fill="#333"></path></svg>
好处是：加载快、可响应式缩放、不怕字体加载失败。
user-select: none 防误选文字，但别加在 <a></a> 上
联系方式面板里，邮箱、电话常被用户双击误选，加 user-select: none 能解决。但注意：别直接写在 <a href="mailto:..."></a> 上，否则 iOS Safari 里长按无法唤起邮件客户端。正确做法是只对包裹文字的 <span></span> 或 <dt></dt>
<dd></dd> 里的文本容器加：
<dd style="user-select: none;">name@example.com</dd>- 电话号码同理，但保留
<a href="tel:+86..."></a>的可点击性
真正容易被忽略的是移动端 touch 区域——<dd></dd> 的行高至少设 line-height: 2，不然手指点不准。
