（7）html链接与导航

最新推荐文章于 2024-08-11 11:19:40 发布

mxd_xyz

最新推荐文章于 2024-08-11 11:19:40 发布

阅读量1.4k

点赞数

分类专栏： html学习笔记

本文链接：https://blog.csdn.net/mxd395/article/details/23826593

版权

html学习笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

（一）URL简介：

URL即统一资源定位符，用于指定WEB资源所在位置。URL有三个关键部分：模式、主机地址和文件路径。

模式标识了文件的传输方式与协议，大部分网页采用超文本传输协议，故使用http:// 开头。主机地址一般为网站域名，也可以使数字形式的IP地址。文件路径总是以“/”开始，对应着网站的目录结构。若文件路径中没有包含文件名，网站通常返回默认文件，如www.baidu.com和www.baidu.com/index.php效果是一样的（一号店官网也是这样）。

（二）绝对路径（URL）和相对路径（URL）

Web中每一个文件都有唯一确定的URL，该完整的URL即为绝对路径。相对路径用于指示资源相对于当前网页的位置（相对URL只适用于相同网站的文件）。

假设当前网页URL为http://www.test.com/music/eason.htm:

要添加同一目录下的jack.htm网页连接，只需使用：<a href="jack.htm"></a> ，其对应的绝对路径为：（http://www.test.com/music/jack.htm）

要添加子目录下jack1/jack1.htm,只需使用：<a href="jack1/jack1.htm"></a> ，其对应的绝对路径为：（http://www.test.com/music/jack1/jack1.htm）

父目录使用 <a href="../jack1.htm"></a>

根目录 使用 <a href="/index.htm"></a>

（三）<base>元素

base元素指定了网页的基URL，当浏览器遇到相对URL时，会在其前面添加基URL。

假设已有<base href="http://www.test.com/music/">，当遇到<a href="eason.htm">时，其相应的链接绝对地址应为http://www.test.com/music/eason.htm.

我的网站主目录下有两个文件/testsmarty/templates/test1.htm和/testsmarty/templates/test2.htm.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" />  
		<base href="/testsmarty/templates/"></base>
		<title>链接与导航1</title>
	</head>
	
	<body>
		<p>这里是test1页面</p>
		<p><a href="http://www.baidu.com" title="百度">转向baidu</a></p>
		<p><a href="test2.htm" target="_blank">转向第二个页面</a></p>		
	</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" />  
		<base href="/testsmarty/templates/"></base>
		<title>链接与导航2</title>
	</head>
	
	<body>
		<p>这里是test2页面</p>
		<p><a href="test1.htm" target="_blank">转向第一个页面</a></p>	
	</body>
</html>

设置了<base href="/testsmarty/templates/"></base>之后，可以实现相互跳转。