应使用 而非 ，因个人名片通常不可独立分发或订阅； 会引入冗余样式和语义干扰，而 更轻量可控，且配合 alt、mailto 链接、Flex 布局与响应式断点（如 max-width: 360px 和 @media (max-width: 600px)）即可兼顾可访问性与实用性。

用 <div class="card"> 还是 <code><article></article>？ 语义上，<article></article> 表示独立、可分发的内容单元（比如博客文章、新闻条目），而个人名片通常不是“可被单独引用或 RSS 订阅”的内容。硬套 <article></article> 会带来默认 margin、outline 等样式干扰，反而要额外重置。日常个人主页里，<div class="card"> 更轻量、更可控，改起来也快——你改一行 class 名，全局就生效。 <ul> <li>如果这张名片会被嵌入他人网站（如团队页侧栏、招聘平台展示模块），再考虑 <code><article></article> + aria-label

<header></header> 和 <section></section> 可以用，但仅用于结构分组，不是为了“显得语义化”而堆标签

别在 <img alt="HTML卡片排版怎么做个人主页？名片设计方案" > 里漏掉 alt，哪怕写 alt="张三头像"，否则屏幕阅读器和 SEO 都会掉点

margin: 0 auto 居中为什么不管用？ 它只对块级元素生效，且完全不处理垂直居中。常见错误是给 .card 加了 margin: 0 auto，但父容器没高度、没设置 display: flex，结果卡片贴顶左对齐。

• 父容器必须设 display: flex + justify-content: center（水平）+ align-items: center（垂直）
• align-items: center 要起效，父容器得有明确高度；稳妥做法是加 min-height: 100vh
• 手机端别依赖 vh 做绝对居中（Safari 滚动时会抖），可用 height: 100% + body { display: grid; place-items: center; } 替代

联系方式排版总显拥挤？用 display: flex + gap 别用 float 或 inline-block 浮动清不干净，inline-block 有看不见的空白字符间隙，移动端换行错乱。Flex 是目前最稳的方案。

• 父容器设 display: flex; justify-content: center; flex-wrap: wrap; gap: 0.75rem;
• 每个联系项（邮箱、GitHub、电话）用 <p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a> <p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p> </div> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 包裹，图标用内联 SVG（别用 CDN 图标字体，加载失败就只剩文字）
• 邮箱必须写成 href="mailto:me@example.com"，GitHub 必须是 href="<a href="https://www.php.cn/link/df48bbddb09380e01eafda99339f669f">https://www.php.cn/link/df48bbddb09380e01eafda99339f669f</a>"；写成 github.com/username 就是相对路径，本地双击打开直接 404

响应式断点怎么设才不翻车？ 别迷信“通用断点”。个人名片信息密度低，600px 就够切：桌面横排联系项 + 宽卡片，手机竖排 + 卡片占满屏宽。

• 主断点用 @media (max-width: 600px)，不是 768px（那是导航栏场景）
• 卡片宽度用 max-width: 360px（适配 iPhone 12/13 屏宽），手机下直接 max-width: 100%
• 字号统一用 rem，根元素保持 font-size: 16px；别用 em 嵌套计算，容易失控
• 背景图慎用 background-attachment: fixed，iOS Safari 不支持，会变白屏或错位

卡片悬浮动效、阴影、圆角这些视觉细节容易调过头。真正影响体验的是链接是否可点、文字是否可读、头像是否加载成功、邮箱能否唤起客户端——先跑通这些，再加 hover。