乐鹏网

1-4.相对链接和绝对链接(图片引用的相对地址和绝对地址)

时间：2015年04月04日 | 作者 : daPeng | 分类 : 1.零基础学网页前端 | 浏览: 6333次 | 评论 0 人

一个网页乃至一个网站总少不了链接、多媒体以及对样式表CSS的引用。这时候我们就需要接触到路径的引用。路径的引用包括相对路径和绝对路径两种方式，我们今天且来了解这两种方式的差异。

首先通俗的理解，绝对路径更具体更长，包含了硬盘盘符，具体位置；而相对路径则更为简短，着重表现层级关系。我们来看看具体的例子就会明白了。

一、绝对路径

如上图，D:\lepeng10这个路径就是一个绝对路径。完全满足了我们上面提到的两个要求。在这个例子中，假如我们要访问css里面的文件，路径该怎么写？很显然答案就是：D:\lepeng10\css。

温馨提示：上面是在“我的电脑”访问的路径，但是如果我们想把文件夹内容展现在浏览器里面呢？那么我们就需要稍微做点变通。

这就提醒我们，以后在浏览器中输入路径时候要注意这两个符号的使用。当然了，笔者这是在chrome浏览器打开的。如果在IE等浏览器，则是一样会直接为我们打开文件夹。

其中，file是文件协议，大家还记得我们在新手学PHP如何开始这篇文章中说到的URL知识点吗。URL是统一资源定位器，他的格式为“使用协议（还有ftp文件传输等，用得比较多http访问互联网）://主机名（常见的www，www也是http的默认主机，根据网站相应设置，有时候可以省略）.IP地址（域名）:端口号（80为默认，可以忽略，我们日常看到的网站大多数都是80端口）/（路径名，看情况）/文件名”。具体还有ftp协议和file协议。

file协议主要用于访问本地计算机中的文件，就像我们在我的电脑中打开文件一样。例子：file:///文件路径，比如要打开D盘lepeng10文件夹中的index.html文件，那么可以在资源治理器或IE地址栏中键入：file:///d:/lepeng10/index.html回车。

一、相对路径

如图，假设现在我们要在index.html中用相对路径的方法引入style.css文件我们该怎么做？很简单，我们只需要记住一句话，相对路径着重表现层级关系。首先我们要确定引入和被引入两个文件的路径关系。在上面实例中index.html和style.css同在一个层级，那么自然就是style.css。

<link href="style.css" rel="stylesheet"/>

那么现在我们要引入css文件夹里面的bootstrap.min.css文件呢？让我们现在再来重温那句话：相对路径着重表现层级关系。在这个实例中，index.html在lepeng10文件中（网站根目录），bootstrap.min.css文件在lepeng10/css（lepeng10的下一个文件夹，二级目录，多了一个层级关系），而要访问css/bootstrap.min.css必须经过css这个文件夹（该文件夹与根目录的index.html同层级），那么该怎么引用呢？

<link href="css/bootstrap.min.css" rel="stylesheet"/>

也是非常简单的，我们只需要把他下级目录的名字写上去就可以了。

那现在我们把index.html这个文件放到二级目录css文件夹里，这时候我们要引用的是根目录的style.css这个文件，我们又该怎么办？首先因为引入的文件（index.html）在二级目录，而待引入的文件（style.css）在根目录，那么我们首先要找到根目录的style.css文件，我们使用../方法。

<link href="../style.css" rel="stylesheet"/>

假设有很多层的上级关系呢？那就../../...这样了吧！不过一般不建议那么多的层级关系。

关于绝对路径和相对路径的引用，还不懂的可以加群询问（加群链接在首页融入我们栏目，扫描二维码即可）。另外绝对路径和相对路径哪个更好，请善用搜索引擎，比如百度一下。