html中相对路径与绝对路径

在Web开发中，路径是不可避免的话题。路径用于定位文件，包括HTML、CSS、JavaScript、图片、视频等。HTML中路径分为相对路径和绝对路径。相对路径是相对于当前文件的路径，而绝对路径是从根目录开始的完整路径。本文将从多个角度分析HTML中相对路径与绝对路径。

1. 路径语法

路径语法是路径中的语法规则。HTML中相对路径又分为三种语法：

- 相对当前文件夹：用./表示，例如./img/logo.png。

- 相对父级文件夹：用../表示，例如../css/main.css。

- 相对根目录：用/表示，例如/css/main.css。

绝对路径语法以根目录为起点，例如http://example.com/css/main.css。其中http://example.com是域名或IP地址，/css/main.css是完整路径。绝对路径包含协议、主机名、端口号等信息，可以让浏览器从任何地方访问。

2. 路径定位

路径定位是浏览器根据路径找到文件的过程。本地环境中，浏览器从硬盘读取文件；网络环境中，浏览器从服务器下载文件。在HTML中，路径可以指向相同文件夹下的文件，也可以指向外层文件夹中的文件。在指定路径时，要考虑当前文件路径与目标文件路径之间的关系。

相对路径从当前文件路径开始，计算与目标文件路径的相对距离。例如，在/index.html文件中，引用./img/logo.png时，浏览器会发起对/img/logo.png的请求。如果目标文件与当前文件在同一文件夹中，路径就是目标文件的文件名，例如logo.png。如果目标文件位于当前文件夹的下一级文件夹中，路径就是目标文件夹的名字和文件名，例如img/logo.png。

绝对路径从站点根目录开始，计算到目标文件的完整路径。例如，使用绝对路径引用http://example.com/css/main.css时，浏览器会发起对http://example.com/css/main.css的请求。绝对路径可用于跨多个文件夹引用文件，也可以用于计算路径中的复杂关系，例如http://example.com/app/project1/css/main.css。

3. 路径优化

路径优化是提高站点性能的关键。在选择路径时，应避免多余的请求和下载。最好的方式是使用相对路径，因为相对路径不包含主机名和协议，可以直接访问文件，节省请求时间和带宽。绝对路径则需要通过网络查找DNS服务器，下载主机名对应的IP地址，并加上协议头，花费更多的时间和带宽。

4. 路径规范化

路径规范化是将路径转换为统一的格式的过程，可以避免重复路径和无效路径。路径规范化涉及以下几个方面：

- 路径中的斜杠：Windows使用\斜杠，Unix和Linux使用/斜杠。为了兼容不同平台，应使用/斜杠。

- 路径中的点：单个点.表示当前文件夹，两个点..表示父级文件夹。多个点要简化为两个点，例如./../../变成../。

- 路径中的重复名称：避免文件夹和文件名重复，在同一文件夹下的文件也要命名不同，避免相互覆盖。

- 路径中的空格：不使用空格，使用%20代替。

5. 路径案例

以下是使用相对路径和绝对路径的案例：

- 相对路径案例：

- ./img/logo.png：引用当前文件夹下的logo.png文件。

- ../css/main.css：引用父级文件夹下的main.css文件。

- ../../js/app.js：引用父级文件夹下的js文件夹中的app.js文件。

- ../index.html：引用父级文件夹下的index.html文件。

- 绝对路径案例：

- http://example.com/css/main.css：从根目录引用main.css文件。

- https://cdn.example.com/img/background.jpg：从CDN引用background.jpg文件。

- //fonts.googleapis.com/css?family=Roboto：从任何协议下引用Google字体。

- /doc/whitepaper.pdf：从根目录引用whitepaper.pdf文件。