离线下载
获取电子书

稻米鼠 · 更新于 2018-02-23 02:01:00

第十二章 相对地址

好了,现在我们算是初步的认识了 Html 代码,好像是叨叨了好多章,其实就是一个中心——标记语言。记住了这一点 Html 还是十分容易理解的,也因为它很容易,我就不在这里过多的废话了(虽然已经被无数人指责废话成灾了)。从下一章开始我们要学习神一样的 CSS 了。

好了,先来学点基础知识准备后面充满高能的战斗,我们来研究一下文件地址。首先记住这章很有用,但是现在先看懂就好。

文件的地址分为两种:绝对地址相对地址,现在我们来打个比方,我最喜欢这个时间了。

北京东城区五星级别墅区里面 A 座是你家,家里三个房间,房间一里面有一张桌子,桌子上有个花瓶。

你站在房间一里,我问你,花瓶在哪?你回答我:“北京东城区五星级别墅区 A 座房间一桌子上的那个花瓶”。这是绝对地址,这个地址你在哪里告诉对方,对方都可以凭这个地址找到这个花瓶,很完美,就是太罗嗦。

所以一般我们都会简单地说:“我身边桌子上的这个花瓶”。一样很明确,但是有个前提,我得知道你在哪里,才能找到这个花瓶。因为这是以你为参照物的,找不到你,那么花瓶的位置也无从谈起。然后你不能换位置,如果你跑到我家说这句话,那指的就是我家的花瓶了。所以要想让这个相对地址成立,你和花瓶的相对位置不能变化。

你说这么看来相对地址除了简单也没啥好处啊,不,当你整体移动一些相关联的文件的时候他的作用就显现出来了。比如还是刚才那个状态,我把你家别墅(包括桌子花瓶还有房间里的你)整体打个包交给顺丰寄到上海去了。到了上海打开一看,房间一里面一张桌子,桌子上是花瓶,你站在桌子旁边,一切都没变(也就是相对位置没变哦),那么你现在说:“我身边桌子上的这个花瓶”,就还是这只花瓶没错,但是你再说:“北京东城区五星级别墅区 A 座房间一桌子上的那个花瓶”,那就不好意思,在那个位置我找不到花瓶了,因为连房子我都给你搬到上海了。

现在理解了绝对地址和相对地址的一些特点,你就开始有些明白了,那么我们说:“绝对地址是描述某个文件的位置,而相对地址是描述两个文件间的位置关系”。当我们移动一个文件夹的时候,里面的每个文件的地址都发生了变化,但是他们之间的相互位置关系却没有变。

然后我们来做一个实例来讲解一下哦,假设有如下目录结构:

http://coffee.zji.me/

  • |_ imgs
    • |_ shuaige.png
  • |_ files
    • |_ miao
      • |_ huamao.jpg
    • |_ index.html
    • |_ photo.jpg

那么简单解释一下:

http://coffee.zji.me/这个网站下有两个文件夹 imgsfiles

其中 imgs 文件夹下只有一张 shuaige.png 的图片;

files 文件夹下有两个文件 index.htmlphoto.jpg ,还有一个叫做 miao 的文件夹;

miao 文件夹下有一张图片 huamao.jpg

好了,我们假设你读得很认真,你完全理解了我上边所说的这些乱七八糟的东西,那么下边便是很轻松的学习关键技巧的时刻了。如果你看到这里发现上面的都没看……那就记住下面的方法,用的多了自然也就明白了。

现在我们都以 index.html 为参照物(其实就是在哪个文件里写就以哪个文件为参照物),我们在 index.html 里面写 photo.jpg 的相对地址。看我怎么做:

先写下两个文件的绝对地址:

http://coffee.zji.me/files/index.html

http://coffee.zji.me/files/photo.jpg

然后去掉两者前边的相同部分,得到:

index.html

photo.jpg

现在我们的参照物(index.html)只剩下文件名了,那么下面的就是我们要的相对地址了—— photo.jpg

然后做个练习,写 huamao,jpgindex.html 中的相对网址,一样的办法,先写下他们的绝对网址:

http://coffee.zji.me/files/index.html

http://coffee.zji.me/files/miao/huamao.jpg

然后去掉相同部分:

index.html

miao/huamao.jpg

index.html 的网址就剩下文件名了,那下面的就是我们要的相对地址了——miao/huamao.jpg

这个简单到混蛋的办法是不是很好理解?我们来看点复杂 shuaige.pngindex.html 里面的相对地址怎么写?

按着上边的办法,列出绝对地址:

http://coffee.zji.me/files/index.html

http://coffee.zji.me/imgs/shuaige.png

去掉相同部分:

files/index.html

imgs/shuaige.png

嘿,index.html 现在剩的可不只是文件名,还带着一个文件夹呢,去重之后,如果参照文件剩下的不只是文件名,则在参照文件(index.html)上去掉一个文件夹,同时给目标文件(shuaige.png)前面加上一个 ../ 。如此重复操作,直到参照文件(index.html)只剩下文件名为止

说起来很复杂,做起来就简单了,简直是无脑的上面删一个,下面加一个:

index.html

../imgs/shuaige.png

这样就出来了。现在解释一下 ../ 代表向上一层文件夹,那么如果是 ../../ 就是向上两层喽~现在看看这两种方法,想想上面的比喻,好好消化一下,可以不理解,但是要知道我都说过些什么,等到后面用起来就理解了。

最后补充一句:你说网址的我看明白了,但是在本地的时候怎么写?一样的 C:\windows\我是大帅哥.avi 这么写文件绝对地址,其实你在文件上面右键属性就可以找他的绝对地址了。然后按着上边的方法做哦,唯一的问题是 \ 要换成 /

本章学习卡片:卡片 12


本书是收费的,不过交费凭自觉。价格定义为每人请我喝一杯咖啡(哪种品质的咖啡随意),支付宝账号:

alay9999@163.com (刘源)

为了让大家阅读方便,本书将在如下站点发布,但最终内容以主站为准:

未经本人许可,禁止任何形式转载。相关事宜请联系: dms@zji.me