首页>前端教程>HTML教程

HTML第四课:物理路径、绝对路径、相对路径

学习超级链接之前,先认识URL(统一资源定位器),如果不考虑百度百科这样专业的解释,我们大致可以把路径分为“物理路径”、“绝对路径”、“相对路径”。

一、物理路径,以盘符开头的本地路径,比如:f:\文件夹\1.jpg

<ul>
    <li><a href="E:\">E盘</a></li>
    <li><a href="E:\赵岚稹15三年软件二班上课案例">E盘下的文件夹</a></li>
    <li><a href="E:\赵岚稹15三年软件二班上课案例\images\林心如.jpg">E盘下的文件夹中的图片</a></li>
</ul>

这种路径只能在本地有效,而且换一台电脑也许路径就失效了,很不稳定。在网站上我们几乎不使用这种路径。

二、绝对路径,互联网上资源唯一的路径。比如:http://www.qq.com/

<ul>
    <li><a href="http://www.baidu.com" target="_blank">百度</a></li>
    <li><a href="http://mat1.gtimg.com/www/images/qq2012/qqlogo_aoyun.png" target="_blank">腾讯logo</a></li>
    <li><a href="http://dldir1.qq.com/qqfile/qq/QQ8.2/17724/QQ8.2.exe">QQ8.2版本下载</a></li>
</ul>

互联网上的资源,不同的资源有不同的后缀名,要想获取该资源真实的唯一的绝对路径,后缀名必须是该资源的准确后缀名,比如是图片,应该是.jpg,.png,.gif等格式,如果是音视频,则应该是.mp3,.mp4,.rmvb,.flv等格式,如果是软件,一般是.exe,或者压缩包.rar,.zip等格式。比如优酷等视频网站,一般是获取不到其资源的真实地址的,路径往往加密了,只有下载其客户端软件才能下载视频。

不同的资源浏览器的解释也不一样,比如图片,浏览器能解释,则直接展示出来,如果是.exe,.rar等文件,则提供下载,如果是音视频,则调用播放器播放。

三、相对路径

这是做网站,学习超级链接必须要掌握的一个概念。学习物理的时候,老师说过,“运动是相对的。”,在一个网站的内部,所有资源的链接在网站的根目录下也是相对链接。

以这个站点为例,在DW中的结构如图所示:

站点内部的相对路径关系.png

用相对关系表示则如图所示:

相对路径结构图.jpg


网站所有的资源都应该放在根目录中,html文档直接放在根目录下,images和sub文件夹也在根目录下,图片放在images文件夹中,sub中有一个子页面。

相对链接分为相对于文档和相对于站点根目录两种。在建立站点的时候可以看见,默认是相对于文档。

链接相对于文档.png

链接相对于文档是什么意思呢?

也就是说如果A页面要链接B页面,那么A页面就是起点,B页面就是终点,只需要考虑两者之间的层级关系即可。

1、同层级链接

同层级相对链接.png同层级链接直接就是链接对方的文档名称。

2、上下级链接

比如“html5l练习.html”页面中,点击“链接一张图片”,则跳转到images文件夹中一张图片上,代码如下:

<a href="images/太阳插画.jpg">链接一张图片</a>

先找到同级别images文件夹,再找到它下面的图片。

如果images文件夹下面还有子文件夹,可以一层层的找下去,比如还有“subimages”文件夹,则可以写成:

<a href="images/subimages/*.jpg">链接一张图片</a>

"/"代表的是下一级目录。

如果“html5l练习.html”中插入一张图片,点击图片跳转到sub.html页面上,则代码如下:

<a href="sub/sub.html"><img src="images/太阳插画.jpg"></a>

不用考虑图片和sub.html页面之间的关系,只需要考虑是哪个页面(html5l练习.html)链接到哪个页面(sub.html),这就是链接相对于文档。

3、下级链接上级

如果在sub.html页面中做链接,能看出下面代码的含义吗?

<p><a href="http://www.baidu.com" target="_blank"><img src="../images/太阳插画.jpg"></a>  </p>
<p><a href="../新闻页面.html">一级新闻页面</a></p>
<p><a href="../images/林心如.jpg">林心如</a></p>

"../"代表返回上一级目录。

这时候"sub.html"是起点的A页面,需要返回上一级,才能找到“新闻页面.html”,需要返回上一级,才能找到“images”文件夹,才能找到“images”文件夹下面的图片。

如果还需要返回多个上级,可以"../../"这样层层返回。

关键是理解根目录这颗“树”下面文件的层级关系,以及起点页面和终点资源的相对层级关系。

最终,明白不管层级如何,路径都是连贯的,不能跨级,父级不能直接链接孙子辈的,需要先找到儿子辈的,再找到孙子辈的,反之亦然。^_^

相对路径图.png

感觉挺简单的道理,为啥做成教程就这么绕呢T_T,也不知道童鞋们理解了没?

可以下载该案例,点击下载

物理、绝对、相对路径案例.rar

点赞


8
保存到:

相关文章

发表评论:

◎请发表你卖萌撒娇或一针见血的评论,严禁小广告。

Top