相对路径和绝对路径
02-html2026/11/14
绝对路径 (Absolute Path)
绝对路径是指 从文件系统的根目录或URL的协议主机开始，完整描述资源位置的路径表示法。它提供资源的全局唯一标识，不依赖于当前文档的位置。
白话： 起始点从 文件系统的根目录或URL的协议主机 开始一路找到你想要资源的完整路径
语法构成：
- 完整URL格式：scheme://host[:port]/path/[?query][#fragment]
- 协议部分：http、https、ftp等
- 权威部分：主机名和端口号
- 路径部分：从根目录开始的完整目录结构
<!-- 完整的URL绝对路径 -->
<img src="https://www.example.com/static/images/logo.png">
<!-- 服务器根目录绝对路径 -->
<link href="/css/main.css" rel="stylesheet">
<!-- 文件系统绝对路径 -->
<a href="file:///C:/Users/Project/index.html">
相对路径 (Relative Path)
相对路径是 基于当前文档所在位置，描述目标资源相对位置的路径表示法。其解析依赖于基础URL（Base URL）。
白话： 从当前出发，找到资源的完整路径。进门
/，出门或返回上一级../(可多个出门或返回上一级)
语法要素：
- 同级引用：直接使用文件名
- 子目录引用：directory/filename
- 父目录引用：../filename
- 根目录相对引用：以/开头（相对于服务器根目录）
<!-- 引用同级文件 -->
<a href="contact.html">联系我们</a>
<!-- 引用子目录文件 -->
<img src="images/banner.jpg">
<!-- 引用父目录文件 -->
<link href="../common/style.css">
<!-- 引用兄弟目录文件 -->
<script src="../js/main.js">
技术规范解析
路径解析算法
根据RFC 3986标准，浏览器按以下步骤解析相对路径：
- 确定基础URL：优先使用
<base>标签指定的URL，否则使用当前文档URL - 路径标准化：处理
.（当前目录）和..（父目录）引用 - 组件合并：将相对路径与基础URL的路径组件合并
- 生成绝对URL：最终形成可用于HTTP请求的完整URL
相对路径引用类型
| 引用类型 | 语法 | 解析规则 |
|---|---|---|
| 网络根相对 | /path | 相对于协议和主机名的根路径 |
| 文档根相对 | ./path | 相对于当前文档所在目录 |
| 父目录引用 | ../path | 向上一级目录并进入指定路径 |
| 同级引用 | filename | 当前目录下的文件 |
适用绝对路径场景
- 跨域资源引用
- 固定位置资源
- 外部链接
适用相对路径的场景
- 项目内部资源组织
- 可移植的代码结构
- 开发环境适配
技术实现细节
Base URL的影响
<!-- 设置基础URL，影响页面所有相对路径 -->
<base href="https://example.com/archive/2023/">
<!-- 此链接将指向 https://example.com/archive/2023/news.html -->
<a href="news.html">最新消息</a>