个人主页链接应放在联系信息区，用<address>标签包裹，使用完整HTTPS URL并添加target="_blank"、rel="noopener noreferrer"；避免相对路径和短链，确保移动端可点、语义清晰、上下文明确。
简历里加个人主页链接，<a> 标签就够了
不需要 JS，不用框架，纯 HTML 就能实现。关键不是“怎么加”，而是“加在哪”和“加得对不对”。个人主页链接通常出现在联系信息区域，放在邮箱、电话旁边最自然。
常见错误是直接写 <a href="github.com/xxx">GitHub</a> —— 缺少协议（http:// 或 https://）会导致本地打开时变成相对路径，点开 404；还有人把链接塞进 <div> 里却不加 target="_blank"，用户点开后就离开了你的简历页面。
- 必须用完整 URL：
https://github.com/yourname，不能省略https:// - 建议加上
rel="noopener noreferrer"，避免安全风险和性能问题 - 加
target="_blank"是默认做法，但别漏掉前面两条 - 如果主页是本地文件（比如
index.html），确保路径正确，且部署时和简历 HTML 在同一目录下
用 <address> 标签包裹联系信息更语义化
很多人用 <div> 或 <p> 堆联系方式，其实 HTML 有专门语义标签：<address>。它天然适合放邮箱、电话、个人网站这些“作者联系信息”，对 SEO 和屏幕阅读器更友好。
注意：<address> 不代表物理地址，也不限制只能用一次——它表示“本节内容的联系信息归属”，一份简历用一个就够了。
立即学习“前端免费学习笔记（深入）”；
- 不要嵌套标题（
<h2>）或段落（<p>）在<address>里（除非你明确需要） - 链接和其他文本混排时，保持视觉一致性：比如都加图标（用
<span>或 SVG）、统一用小号字体 - 移动端要注意点击热区大小，
<a>最好包一层<span>或设padding，不然手指点不准
链接失效比格式丑更致命：上线前必须验证
本地预览时能点开 ≠ 部署后有效。常见失效原因：GitHub Pages 默认不支持根目录下的 index.html 自动跳转（如果你简历叫 resume.html，主页却叫 index.html，路径就容易错）；或者用了相对路径指向了不存在的子目录。
- 打开浏览器开发者工具（F12），在 Console 里手动输入
fetch('https://your-site.com').then(r => r.status)看是否返回 200 - 用手机真机访问，检查点击后是否真的跳转到主页，而不是报“网页无法打开”
- 如果主页托管在 Vercel/Netlify，确认其自定义域名已生效，且 DNS 解析无延迟（有时刚绑定要等几分钟）
- 避免使用短链服务（如 bit.ly），它们可能过期，也降低可信度
CSS 微调让链接不突兀但可识别
纯文字链接容易被忽略，全加下划线又像未完成的草稿。折中方案是保留颜色变化 + 悬停时加下划线，同时控制颜色对比度满足 WCAG 2.1 AA 标准（至少 4.5:1）。
例如深灰背景配蓝链接（#1E90FF）对比度够，但浅灰文字（#888）配同样蓝色就不行——这时候得调文字色或链接色。
- 别用
color: blue这种模糊写法，用具体十六进制值，方便复用和审查 - 禁用
text-decoration: none后，记得补上悬停效果：a:hover { text-decoration: underline; } - 如果简历是 PDF 导出（比如用 Chrome 打印为 PDF），部分 CSS 可能不生效，此时链接虽不可点，但 URL 文字必须清晰可见
