链接中的地址

在编写页面时,有些标签会附带一个链接地址属性,比如a标签、img标签、link标签、script标签等等

在书写地址时,你可以使用多种方式来表示地址,本文将探讨每一种方式的书写特点



url完整地址

在下面的例子中,a标签的href属性值,使用了url完整地址:

<a href="http://www.google.com/">谷歌</a>

当在页面上点击这个标签时,浏览器将跳转到http://www.google.com/这个地址。

这种方式,有它的好处,也有它的缺陷。

好处在于,由于它是一个完整的url地址,它可以表示互联网中任意位置的任意资源,这样一来,你可以随意的引用站外资源(不是自己网站的资源)。

缺陷在于,如果你引用的是站内资源(本网站资源),如果你依然使用这种方式,一旦有一天你的域名发生变化,就可能导致大量的修改。

比如,你现在网站的域名是abc.com,在网站中,其中一个页面是使用如下方式编写的:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://abc.com/css/index.css">
<script type="text/javascript" src="http://abc.com/scripts/common.js"></script>
</head>
<body>
...
<a href="http://abc.com/news/index.php">更多新闻</a>
...
<img src="http://abc.com/upload/1023513.jpg" >
...
</body>
</html>

在上面的html中,所有的地址位置都使用的url完整路径,现在看来,好像没什么问题。

有一天,你的BOSS对你说:“我刚买了一个更加霸气的域名,123.com,给你一个小时,把我们的域名换成123.com!没毛病吧,老铁?”

然后,你看着七八十个页面、js文件中都大量使用的是abc.com,除了辞职,你想不到别的办法。

所以,如果要引用站内资源,不推荐使用url完整路径。

绝对路径

绝对路径使用一个斜杠/开始,表示站点根目录。

绝对路径的写法,省略了协议、主机、端口,仅保留从站点根目录开始寻找资源的路径。

比如,你开发的网站具有如下的目录结构:

Alt text

如果你要在页面index.php中引用站内资源(BB.GIF),则可以考虑使用绝对路径:

<img src="/imgs/BB.GIF" >

假设你的域名是abc.com,使用http://abc.com/index.php访问页面,就可以看到图片效果了。

img标签中使用了绝对路径,表示从站点根目录下寻找imgs文件夹,从该文件夹中找到BB.GIF这个资源。这样的书写,就相当于告诉浏览器,从地址http://abc.com/imgs/BB.GIF中寻找资源。

绝对路径的好处在于,只要引用的资源位置在本站点中不变,无论引用者的位置如何变动,都可以得到正确的结果。

比如,有一天,你的index.php页面需要换一个位置,变成如下位置:

Alt text

虽然你改变了index.php(引用者)的位置,但你没有改变BB.GIF(被引用者)的位置,因此,对BB.GIF的引用,任然可以使用同样的绝对路径/imgs/BB.GIF访问,不需要改动页面中的任何代码,图片依然可以显示。

但绝对路径的缺陷在于,如果被引用的资源位置改变,也会造成大量的改动。如果BB.GIF从imgs文件夹中移动到了另一个文件夹,对BB.GIF使用绝对路径的所有位置都需要改动。

相对路径

相对路径是指,引用的资源,相对于当前被访问的页面的位置。

说起来好像很抽象,用一个具体的例子来说明,看如下的目录结构:

Alt text

同样的,index.php页面中有两个img标签,需要分别引用BB.GIF和BA.GIF,当然,你可以使用绝对路径来完成,但也可以使用相对路径完成:

<img src="./BB.GIF" >
<img src="../imgs/BA.GIF" >

上面代码中的两个img标签,都使用了相对路径,相对路径有两种开始方式:

  • ./开头,表示从页面所在目录开始寻找,在本例中,表示从htmls目录中寻找
  • ../开头,表示从页面所在目录的上一级目录开始寻找,在本例中,表示从根目录开始寻找

于是,当我们使用http://abc.com/htmls/index.php访问index.php页面时,页面中的两个img标签实际的链接地址分别是:

  • http://abc.com/htmls/BB.GIF
  • http://abc.com/imgs/BA.GIF

顺便说一句,如果相对路径使用./开始,实际上可以省略,上面的示例代码也可以使用以下的写法,效果完全一样:

<img src="BB.GIF" >  <!-- 省略掉了./  -->
<img src="../imgs/BA.GIF" >

使用相对路径的好处在于,如果资源引用者和资源的相对位置不发生改变,不需要改动任何代码。

比如,把之前的目录结构改为如下结构:

Alt text

虽然目录变了,但你仔细观察,index.php和BB.GIF、BA.GIF的相对位置是没有任何变化的,因此,你无须改动index.php中的任何代码,所有的资源都能正常引用。

只不过现在,你需要使用http://abc.com/test/htmls/index.php访问index.php页面,而页面中的两个img标签实际的链接地址自动变成了:

  • http://abc.com/test/htmls/BB.GIF
  • http://abc.com/test/imgs/BA.GIF

但是,使用相对路径的缺陷在于,如果资源的相对位置发生了改变,会造成代码的修改。

总结

这里简单总结一下三种链接地址的书写方式:

书写方式优点缺点使用场景
完整url地址 可以链接全网任意资源 链接站内资源时域名改变会造成大量修改 链接站外资源时使用
绝对路径 只要链接的资源路径不变,代码不变 链接的资源路径一旦改变,会造成大量修改
不能链接站外资源
链接的站内资源路径稳定时使用
相对路径 只要链接的资源相对位置不变,代码不变 链接的资源相对位置改变,会造成大量修改
不能链接站外资源
posted @ 2017-08-15 17:56  绝版扫地僧  阅读(531)  评论(0编辑  收藏  举报