HTML相对路径获取规则详解

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《HTML获取相对路径的规则解析》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

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、 中的 photo.jpg 相对于当前HTML文件所在目录。

2、 中的路径按基准URL向上一级后拼接 styles/base.css。

3、 生成的跳转地址同样基于当前HTML文件路径解析，点击后浏览器地址栏显示的是完整绝对URL。