[Web开发]Html文件路径详解

HTML文件路径‌是指在HTML文档中引用外部资源（如图片、样式表、脚本等）时使用的路径。HTML文件路径主要分为三种类型：绝对路径、相对路径和根路径。

一、绝对路径

　　绝对路径‌是从网站根目录开始的完整路径，包含了协议、域名和文件路径。　　

//第一种写法
<script src="https://www.example.com/js/script.js"></script>
//第二种写法
<img src="//assets.cnblogs.com/icons/search.svg" alt="搜索" />

绝对路径的特点是无论当前HTML文件位于何处，浏览器都会根据这个完整路径去加载资源，因此不会受到HTML文件位置的影响。绝对路径通常用于引用外部资源，如CDN上的图片、库或字体等‌。

二、相对路径

　　相对路径‌是相对于当前HTML文件所在位置的路径。它不会包含协议、域名或完整的文件路径，而是根据当前文件与目标文件之间的相对位置来确定路径。相对路径分为以下几种：

• 同级目录‌：如果目标文件与当前HTML文件在同一目录下，可以直接使用文件名来引用。

<img src="picture.jpg">

• 子目录‌：如果目标文件位于当前HTML文件的子目录中，可以通过在文件名前加上子目录名来引用。

<img src="images/picture.jpg">

• 上级目录‌：如果目标文件位于当前HTML文件的上级目录中，可以通过在文件名前加上../来引用。

<img src="../picture.jpg">

　　相对路径的特点是使用依赖于当前HTML文件的位置，当HTML文件的位置发生变化时，相对路径也需要相应调整。相对路径是网页开发中最常用的路径类型，使代码更加简洁且易于维护‌。

三、根路径

　　根路径‌是相对于网站根目录的路径，以斜杠/开头，表示从网站根目录开始的路径。

<a href="/about.html">About</a>

　　根路径的特点是使用不会受到当前HTML文件位置的影响，它总是从网站的根目录开始查找目标文件。根路径通常用于引用网站根目录下的资源‌。

使用场景和优缺点

• 绝对路径‌：适用于引用外部资源，如CDN上的图片、库或字体等，不受当前HTML文件位置影响。
• ‌相对路径‌：在网页开发中最常用，使代码更加简洁且易于维护，适用于引用同一网站内的资源。
• ‌根路径‌：适用于引用网站根目录下的资源，不受当前HTML文件位置影响。

　　通过了解这些不同类型的HTML文件路径及其使用场景，可以更好地管理和维护网页资源。