路径指南(转)

路径指南

认识路径

首先，你以前肯定接触过路径，如你电脑中的某个文件 E:\娱乐\音乐\蓝莲花.mp3，或者你在网上看到的某个图片 https://8.url.cn/edu/download/images/s-3-bg.86430f50.jpg，这些都是路径。

而我们在前面学习的<a>元素和<img>元素，说到的链接地址（href属性）和图片地址（src属性），这两个属性的值也是路径，如下：

<a href="http://imweb.io" target="_blank">
 <img src="imweb-logo.png" alt="IMWeb 学院">
</a>

路径介绍

简单来说，路径就是指向资源的存放位置，资源可以是各种文件，图片，视频等。这跟实际生活中我们经常以地址来描述一个位置一样。

路径分为绝对路径和相对路径。

• 绝对路径：以站点根目录为参考基础的路径。
• 相对路径：由文件本身所在的路径引起的跟其它文件（或文件夹）的路径关系。

以我们现实生活中地址为例来说，如果我们要描述腾讯大厦的位置就可以说“中国广东省深圳市南山区高新科技园中区一路腾讯大厦”，也可以说万利达大厦旁边的大厦。前者就是绝对地址，后者就是一个相对地址。

现在回过头来说我们的路径，比喻我们有个站点目录文件如下：

现在如果要在img.html文件中引入一个图片（img-style.png）和一个样式文件（style.css），如下图以红色圈中：

如果以相对路径来引入的话，我们可以写成：

• 图片：../../img/img-style.png
• 样式：style.css或./style.css

在使用相对路径时，我们用符号“./”来表示当前目录，用符号“../”来表示当前目录的父目录。

现在我们解释下上面的相对路径：

• img.html在exercises目录，那么它的父目录就是p2，父目录的父目录就是Front-end目录，于是先通过../../两个父目录找到Front-end目录，而img-style.png在img目录，img目录在Front-end目录中，
  于是img-style.png相对于img.html的相对路径就是../../img/img-style.png
• 而style.css和img.html在同一个目录，所以可以直接使用style.css或./style.css来表示

如果以绝对路径来引入的话，我们可以写成：

• 图片：/img/img-style.png
• 样式：/p2/exercises/style.css

在使用绝对路径时，我们使用"/" 代表根目录，Front-end站点目录内部所有文件都可以使用“/”表示根目录Front-end。

但是如果是其他站点要访问该目录时，则需要加上我们的域名地址，以图片为例，其绝对地址为：http://coding.imweb.io/img/img-style.png。

如果以本地文件与网络文件为区分的话，我们的路径还可以分为本地路径及网络路径。

同样以刚才的图片为例，我们如果在本地浏览器中打开，则地址显示如下：

而如果我们访问线上地址，则地址显示如下：

如第一个本地路径，你电脑里面的文件我是打开不了，我电脑里面的文件同样你也打开不了，所以如果我们要互相都可以访问的话，那就只好上传到网上了，这样大家都可以访问。

注：本地路径方面，如在磁盘里面访问，Windows 约定使用反斜线 () 作为路径中的分隔符，如"E:\娱乐\音乐\蓝莲花.mp3"；而UNIX 系统使用正斜线 (/)，如“/users/marvin/music/蓝莲花.mp3”。