您的位置：首页 > Web前端 > CSS

写给自己看的HTML、CSS、XHTML指南 六

2010-05-15 11:49 246 查看
上一章介绍了HTML的超链接部分，想必大家对于<a>元素的href属性的值会感到陌生，是不是我要链接一个网页，必须使用http://www.soso.com这种格式呢？

不，不是这样的，上一章提到的http://www.soso.com其实是一个绝对定位；那么，什么是绝对定位呢？在详细介绍绝对定位的概念时，我们先来思考一个问题：

大家上小学（中学）时，都有过给朋友写信的经历吧？将自己绞尽脑汁写出来的信寄给不在同一所学校（城市）的朋友（网友）；在这个过程中，我们必须要知道那个朋友的详细地址（不然寄给谁呢），然后花8毛钱，买上一张邮票，到邮局信箱完成投递，然后就是漫长的等待，等待自己朋友的回信。

PS：我想上面一段对于80后的我们来说，并不陌生。但90的孩子们，可能很少还有写信的经历了~写到这，不得不感叹时间流逝之快！

上述文字中，朋友的详细地址便是一个绝对定位，所谓的绝对定位，就是一个使用非常具体的URL，以便帮我们找到想找到的人。

回到Web中，我们如何找到我们想要找到的网站呢？必须先知道对方的具体的URL，然后进行指定，比如我想链接到腾讯公司的网站，则使用http://www.qq.com/。

在HTML中，我们通过使用<a>元素的href属性指定。

在这一过程中，浏览器充当信件投递员的角色，到具体的地址寻找！若寻找到，则浏览器下载该网站对应的页面。若没有找到，则投递失败！

是不是挺简单呢？嗯，继续往下读。

你已经介绍完了绝对定位，并且我也已经理解了，是不是该介绍介绍相对定位了？

嗯，没错，在介绍相对定位前，我们再来思考一个问题：

大家可曾有在过春节时，去亲戚家拜年的经历？从自己家出发，到亲戚家，必须要经过一段路程，而这段路程，需要列出我们所经过的地方，比如，左转，右转，直走等等步骤。

相对路径就是这样一种路径，它用来从当前位置出发，列出一系列经过的地方，直到找到我们所需要的文件或网页。

现在，我们在桌面上创建一个文件夹，取名叫：TestDriver，然后创建2个网页文件。

Test.html 文件包含以下内容：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"> 　
<html>
<head>

<title>这是第一个网页</title>

</head>

<body>

<h1>这是第一个网页</h1>

<p>
这是我们的第一个网页，<a href="Test2.html">跳转到第二页</a>
</p>
</body>

</html>

Test2.html 文件包含以下内容：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"> 　
<html>
<head>

<title>这是第二个网页</title>

</head>

<body>

<h1>这是第二个网页</h1>

<p>
这是我们的第二个网页，<a href="Test.html">跳转到第一页</a>
</p>
</body>

</html>

然后运行Test.html，然后点击：跳转到第二页 即可跳转到第二页，打开第二页后，点击：跳转到第一页 即可跳转到第一页。

怎么样，是不是很简单呢？

那么，接着往下读.........

现在，我们来一个高级一点的主题。

在TestDriver文件夹中，再创建一个Content文件夹，接着把Test2.html移动到Content文件夹中，接着运行Test.html块，并打开Test.html代码，运行后，点击跳转到第一页后，将会出现该页无法显示。为什么会这样呢？因为我们使用的是相对定位，先前Test.html和Test2.html位于同一文件夹下，但后来我们把Test2.html移到了TestDriver的子文件夹中，而Test.html中并没有及时修改正确的URL。因此我们必须对Test,html进行修改，找到以下代码块：

<p> 这是我们的第一个网页，<a href="Test2.html">跳转到第二页</a></p>

把<a href="Test2.html">跳转到第二页</a> 改成：<a href="Content/Test2.html">跳转到第二页</a> 后保存 再次运行即可。

在这里需要明白绝对路径中存在上溯和下探两种术语，所谓的上溯就是子目录中，一级一级的向上查找文件，每上一级在路径处增加"../"，每下探一级在路径处增加子文件夹的名字和"/"。

很显然，刚才我们使用的是下探，因此在路径处增加文件名和"/"。

那么，我们来看看关于上溯的一个例子吧。

在TestDriver文件夹中，再增加一个名为：Msg的文件夹，然后把Test.html移动至Msg文件夹中，

再修改Test.html文件中的<a>元素的href为：../Content/Test2.html即可。

若不理解，多实验实验。

今天的课程到此结束。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航