原创作品,未经许可不得转载
在前面学习“超链接”的课程中,我们已经学会了如何链接到一个外部的网页。
如果想链接到同网站内的某个页面呢?
你当然可以像之前所学的那样,给<a>
标签的href
属性设置一个带域名的完整的URL:
<a href="http://你的域名/aboutme.html">关于我</a>
<a href="http://你的域名/html5.html">HTML5课程</a>
但是这样写的话有个弊端:如果将来你的域名发生了改变,你就需要修改所有链接的代码。并且,很多时候,当项目还在开发阶段的时候,可能还没有确定使用什么域名(比如你现在可能就还没有域名)。
这种带域名的完整URL,称之为绝对路径。
如果想链接到同网站内的某个页面,一般会使用相对路径或全路径。
这节课我们先了解一下“相对路径”。
所谓“路径”,可以理解为“行走路线”。举个现实生活中的例子,从你家到你的学校,要往东走,再往南走,这个行走路线就是“路径”。网页上链接的“路径”也是类似的意思。举个例子:
假设你要链接到http://www.var365.net/cn/antbuster.htm
这个网址,那么“行走路线”就是先走到http://www.var365.net
,再走到cn
,最后走到antbuster.htm
这个终点。
所谓“相对路径”,就是相对于当前网页,如何找到目标网页。
假设你的网站中有如下几个网页,目录结构如下:
你的网站
|—— index.html
|—— aboutme.html
|—— courses
|—— html5.html
在网站的根目录下有两个网页:index.html
、aboutme.html
,以及一个文件夹courses
。在courses
文件夹下有一个网页:html5.html
。
若要从index.html
导航到aboutme.html
,用相对路径的方式,<a>
元素的href
属性应该这样设置:
<a href="./aboutme.html">导航到aboutme.html</a>
注意,href
属性的值的最前面有一个.
。一个.
的意思是“当前目录”。
./aboutme.html
的意思是:当前目录下的aboutme.html
。
若要从index.html
导航到courses
目录下的html5.html
,则应该这样写:
<a href="./courses/html5.html">导航到html5.html</a>
./courses/html5.html
的意思是:当前目录下的courses
目录下的html5.html
。
若要从html5.html
导航到index.html
,则应该这样写:
<a href="../index.html">导航到index.html</a>
注意,href
属性的值的最前面有两个点,即..
。..
的意思是“上一级目录”。
../index.html
的意思是:上一级目录下的index.html
。
如果目录结构再复杂一点,要导航到“上一级目录的、上一级目录下的”a.html
呢?
那就继续在前面加..
:
<a href="../../a.html">
导航到上一级目录的、上一级目录下的a.html
</a>
以此类推,可以有N多个“上一级目录”。