推荐用语义化标签组织个人名片页：<header>放姓名头像，<section>分组联系方式等并设id；用flex布局联系信息、SVG图标、系统字体栈；部署前须校验HTML、链接和触控区域。
用 <header> 和 <section> 组织内容结构，别堆 <div>
很多人一上来就写一堆 <div class="container"><div class="row"><div class="col">，结果语义不清、屏幕阅读器读不出重点，后期加 CSS 也容易错乱。个人名片页本质是「一个主体信息块」，用语义化标签反而更轻量、更易维护。
推荐结构：<header> 放姓名和头像，<section> 分组联系方式、技能、项目等，每个 <section> 加 id（比如 id="contact"），方便后续锚点跳转或 JS 操作。
-
<h1>只用一次，写真实姓名，别写“我的主页” - 邮箱、电话这些敏感信息，避免直接明文写死——至少套一层
mailto:或用@拆分name@domain.com，防爬虫 - 别在
<img>里漏掉alt属性，哪怕写alt="张三头像"，否则无障碍访问会报错
用 flexbox 布局联系信息，不用浮动或表格
想把电话、邮箱、GitHub 图标横排对齐？别用 float: left 清浮动，也别用 <table>——它们本意不是干这个的，响应式时会崩。
直接上 display: flex，父容器设 justify-content: center 居中，子项用 gap: 1rem 控制间距。图标建议用 SVG 内联，不依赖外部 CDN，加载快还抗缩放。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 图标尺寸统一用
width: 1.2em; height: 1.2em;，和文字字号联动，缩放时比例不变 - 链接加
target="_blank" rel="noopener"，尤其是 GitHub、LinkedIn 这类外链，安全且不打断用户浏览流 - 手机端加
@media (max-width: 768px) { flex-direction: column; }，竖排更易点击
字体和颜色用系统默认值起步，别急着引入 Google Fonts
新手常犯的错：一上来就嵌入 https://fonts.googleapis.com/css2?family=...，结果首屏白屏几百毫秒，还可能因网络问题字体加载失败，文字直接不可读。
先用系统字体栈：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;。它在各平台都自带，零加载、高可读、够专业。
- 主色选一个深灰（比如
#333）作文字色，亮灰（#666）作次要信息，比纯黑#000更护眼 - 强调色（如按钮、链接 hover）用单一色值，比如
#2563eb（Tailwind 的 blue-600），别配三种渐变 - 所有颜色值写十六进制，别用
rebeccapurple这类关键字——兼容性差，且不利于团队协作时快速定位
部署前检查三件事：HTML 验证、链接有效性、移动端触控区域
本地预览看着没问题，不等于上线能用。很多名片页上线后点不了电话链接、邮箱打不开、图标错位，其实都是基础校验没过。
用 W3C HTML Validator 粘贴源码，重点看有没有未闭合标签、重复 id、错误嵌套（比如 <p> 里套 <div>）；用浏览器开发者工具的「Network」面板刷新页面，确认所有资源状态码是 200；最后真机点一遍所有按钮和链接，尤其检查触控目标是否 ≥ 44×44px。
-
<a href="tel:+8613800138000">必须带+和国家码，iOS 才识别为可拨号链接 - GitHub 图标链接末尾别漏
/，比如https://github.com/username/比https://github.com/username更稳定（避免重定向） - 用
<meta name="viewport" content="width=device-width, initial-scale=1">，这是移动端正常显示的底线，漏了就全站缩成一团
做完这四步，你的名片页已经比大多数人的更可靠。真正难的不是写出来，是让每一个链接都经得起点击，每一张图都等比例缩放，每一行字在任何设备上都不溢出——这些细节堆起来，才是别人愿意多看两秒的原因。
