HTML相对路径以当前文件目录为基准，分同级（如style.css）、根相对（如/images/logo.png）和上级（如../css/reset.css）三类，需严格匹配目录层级，所有src/href等属性均遵循同一规则。
如果您在编写HTML代码时需要引用同一网站内的其他资源，例如图片、CSS文件或JavaScript脚本，则必须正确使用相对路径。以下是HTML中获取和书写相对路径所遵循的具体规则：
一、理解当前文档的基准URL
HTML中所有相对路径均以当前HTML文件所在目录为基准进行解析。浏览器会将该文件的完整URL（包括协议、域名、路径）作为参考点，据此计算目标资源的实际位置。
1、确定当前HTML文件在服务器上的完整路径，例如 https://example.com/blog/article.html。
2、提取其目录部分作为基准路径，即 https://example.com/blog/。
立即学习“前端免费学习笔记（深入）”；
3、所有以不以 / 开头的路径均相对于该基准路径拼接。
二、相对路径的三种基本写法
相对路径依据起始符号不同分为三类：同级路径、子目录路径与上级目录路径，每种写法对应不同的解析逻辑。
1、不加任何前缀的路径表示目标文件与当前HTML文件位于同一目录，例如 style.css 解析为 https://example.com/blog/style.css。
2、以 / 开头的路径为根相对路径，从网站根目录开始计算，例如 /images/logo.png 解析为 https://example.com/images/logo.png。
3、以 ../ 开头的路径表示向上回退一级目录，例如 ../css/reset.css 解析为 https://example.com/css/reset.css。
三、嵌套层级下的路径推导方法
当HTML文件处于多层子目录中时，需逐级展开父目录标识符 ../，确保最终抵达目标资源所在目录。路径中 ../ 的数量必须严格等于当前文件与目标资源所在目录之间的层级差。
1、若当前文件路径为 /project/v2/pages/detail.html，需引用位于 /project/js/main.js 的脚本，则需上溯两级：../../js/main.js。
2、若目标资源与当前文件同属一个子目录，但HTML在子子目录中，例如从 /a/b/c/index.html 引用 /a/b/assets/icon.svg，应写作 ../assets/icon.svg。
3、路径中可连续使用多个 ../，但不可超出网站根目录，否则浏览器将忽略多余部分并从根目录开始解析。
四、链接与资源属性中的路径一致性规则
HTML中所有涉及外部资源引用的属性均适用相同相对路径规则，包括 src、href、poster、data- 等自定义属性，其解析行为完全一致。
1、<img src="photo.jpg"> 中的 photo.jpg 相对于当前HTML文件所在目录。
2、<link href="../styles/base.css" rel="stylesheet"> 中的路径按基准URL向上一级后拼接 styles/base.css。
3、<a href="about.html"> 生成的跳转地址同样基于当前HTML文件路径解析，点击后浏览器地址栏显示的是完整绝对URL。
五、避免路径错误的关键检查项
相对路径失效通常源于基准理解偏差或路径书写疏漏，可通过以下具体项逐一核对定位问题根源。
1、确认当前HTML文件在服务器上的实际存放路径，而非本地开发路径或编辑器显示路径。
2、检查路径字符串是否意外包含中文空格、全角字符或不可见Unicode符号，此类字符会导致路径解析中断。
3、验证目标资源文件名大小写是否与服务器实际文件完全一致，Linux服务器区分大小写，而Windows本地测试环境常不区分。
