相对链接基于当前页面位置指向目标文件，无需完整URL。同一目录直接写文件名，进入子目录用斜杠，返回上级用../，多级上级连续使用../../。建议文件名小写、语义化，目录结构清晰，并在本地服务器测试。相比含完整地址的绝对链接，相对链接更利于站内跳转与项目迁移。
在HTML中使用相对链接是构建网站时的基础技能。它让页面之间可以互相跳转，同时避免因硬编码完整URL带来的维护问题。下面详细介绍如何正确书写HTML相对链接。
什么是相对链接
相对链接是指相对于当前页面位置的路径，而不是完整的网址（绝对链接）。浏览器会根据当前页面的URL自动补全目标地址。
例如，当前页面位于 /project/page.html，想链接到同目录下的 about.html，只需写文件名即可：
<a href="about.html">关于我们</a>常见相对路径写法
掌握以下几种结构，基本覆盖所有场景：
立即学习“前端免费学习笔记（深入）”；
-
同一目录下文件：直接写文件名
<a href="contact.html">联系我们</a> -
进入子目录：用斜杠指向子文件夹中的文件
<a href="images/photo.jpg">查看图片</a> -
返回上级目录：用 ../ 返回上一级
<a href="../index.html">返回首页</a> -
多级上级目录：连续使用 ../../
<a href="../../docs/guide.html">使用指南</a>
相对链接的实际应用建议
为了确保链接稳定有效，注意以下几点：
- 文件和目录名尽量小写，避免服务器区分大小写导致出错
- 使用简洁、有意义的文件名，如 about.html 而非 page2.html
- 保持目录结构清晰，比如将图片放在 img/ 或 images/ 文件夹中
- 测试链接时在本地服务器运行，避免直接双击HTML文件导致路径异常
与绝对链接的区别
绝对链接包含完整协议和域名，例如：
<a href="https://example.com/about.html">关于</a>适合跳转外部网站。而相对链接更适合站内页面互联，便于迁移和本地开发。
基本上就这些。只要理清文件之间的位置关系，相对链接并不难掌握。关键是多练习，在真实项目中尝试不同层级的跳转。
