·64·
HTML网页设计参考手册
超链接基本知识
超链接的建立
内部链接
书签链接
外部链接
所谓超链接就是当单击某个字或某个图片时，就可以打开另外一个画面。它的作用对网页来说相当重要，如果没有它，那便只能在每打开一个页面时就要在地址栏内输入一次地址了。
第5章超链接·65·
5.1  超链接基本知识
5.1.1  超链接
对于初次接触网页设计的读者来说，可能对于超链接的概念还不是很明白。超链接就是从一个网页转到另一个网页的途径。
超链接是网页的重要组成部分。如果说文字、图片是网站的躯体，那么超链接就是整个网站的神经细胞，它把整个网站的信息有机地结合到一起。链接能使浏览者从一个页面跳转到另一个页面，实现文档互联、网站互联。
超文本链接（hypertextlink）通常简称为超链接（hyperlink），或者简称为链接（link）。链接是HTML的一个最强大和最有价值的功能。链接是指文档中的文字或者图像与另一个文档、文档的一部分或者一幅图像链接在一起。
5.1.2  绝对路径
绝对路径就是主页上的文件或目录在硬盘上的真正路径。使用绝对路径定位链接目标文件比较清晰，但是有两个缺点：一是需要输入更多的内容，二是如果该文件被移动了，就需要重新设置所有的相关链接。例如在本地测试网页时链接全部可用，但是到了网上就不可用了。这就是路径设置的问题。例如设置路径为“C:\Program files\1.htm”，在本地确实可以到，但是到了网站上该文件便不一定在这个路径下了，所以就会出问题。
5.1.3  相对路径
首先分析一下为什么会发生图片不能正常显示的情况。举一个例子，现在有一个页面index.htm，在这个页面中链接有一张图片photo.jpg，它们的绝对路径如下：
c:\website\index.htm
c:\website\img\photo.jpg
如果使用绝对路径c:\website\img\photo.jpg，那么在自己的计算机上将一切正常。因为确实可以在指定的位置（即c:\website\img\photo.jpg）上到photo.jpg文件。但是当将页面上传到网站时就很可能会出错了，因为网站可能在服务器的c盘，也可能在d盘，也可能在aa目录下，更可能在bb目录下，也就是说很有可能不存在c:\website\img\photo.jpg这样一个路径。此时就用到相对路径。所谓相对路径，
顾名思义就是自己相对于目标位置。在上例的index.htm中链接的photo.jpg可以使用img\photo.jpg来定位文件，那么不论将这些文件放到哪里，只要它们的相对关系没有变，就不会出错。
在编程中使用“..\”来表示上一级目录，“..\..\”表示上上级的目录，以此类推。再看几个例子，注意所有例子中都是index.htm文件中链接有一张图片photo.jpg。
看下面这个例子：
c:\website\web\index.htm
·66·
HTML网页设计参考手册
c:\website\img\photo.jpg
在此例中，index.htm中链接的photo.jpg应该怎样表示呢？
错误写法：img\photo.jpg，这种写法是不正确的。在此例中，对于index.htm文件来说，img\photo.jpg 所代表的绝对路径是c:\website\web\img\photo.jpg，显然不符合要求。
正确写法：使用..\img\photo.jpg的相对路径来定位文件。
总结一下，对于相对路径来说，设置起来一般有如下3种写法：
同一目录下的文件：只需要输入链接文件的名称即可，如01.html。
上一级目录中的文件，在目录名和文件名之前加入“../”，如../04/02.html；如果是上两级，则需要加入两个“../”，如../../file/01.html。
下一级目录：输入目录名和文件名，之间以“/”隔开，如：Html/05/01.html。
除了绝对路径和相对路径之外，还有一种称为根目录。根目录常常在大规模站点需要放置在几个服务器上，或者一个服务器上同时放置多个站点时使用。其书写形式很简单，只需要以“/”开始，表示根目录，之后是文件所在的目录名和文件名。
5.2  超链接的建立
5.2.1  超链接标记的基本语法
超级链接的语法根据其链接对象的不同而有所变化，但都是基于<A>标记的。
语法：<A href="文件名">链接元素</A>或<A href="URL">链接元素</A>
说明：在该语法中，链接元素可以是文字，也可以是图片或其他页面元素。其中href是hypertext reference的缩写。通过超级链接的方式可以使各个网页之间链接起来，使网站中众多的页面构成一个有机整体，使访问者能够在各个页面之间跳转。超级链接可以是一段文本、一幅图像或其他网页元素，当在浏览器中用鼠标单击这些对象时，浏览器可以根据指示载入一个新的页面或者转到页面的其他位置。
下面具体讲解各种超链接的创建方法。
5.2.2  建立文本超链接
在网页中，文本超链接是最常见的一种。它通过网页中的文件和其他的文件进行链接。
语法：<A href="链接地址">链接文字</A>
说明：在该语法中，链接地址可以是绝对地址，也可以是相对地址。
html网页设计超链接
实例代码：
<html>
<head>
<title>文本链接</title>
</head>
<body>
<center><h3>神话故事：八仙斗花龙</h3></center>
第5章超链接·67·href="next.html">下一篇：女娲补天</a><br><br>
<a
    ；传说，有一天八仙要到东海去游蓬莱岛。本来，腾云驾雾，一眨眼就可到，可是吕纯阳偏偏别出心裁，提出要乘船过海，观赏海景。他拿来铁拐李的拐杖，往海里一抛，喝声“变”，顿时变成一艘宽敞、漂亮的大龙船，八位大仙坐船观景，喝酒斗歌，好不热闹。不料，因此惹出一场麻烦来。原来，龙宫里有条花鳞恶龙，是龙王的第七个儿子，称为“花龙太子”。这天，他闲得没事，在水晶宫外游荡，忽闻海面上有仙乐之声，便循声寻去，猛见一条雕花龙船，内坐八位奇形怪状的大仙，其中有个妙龄女郎，楚楚动人，花龙太子见此仙姿，魂魄俱消，早忘了师傅南极仙翁的忠告，忘了龙王母的训导，想入非非，似魔似痴地迷上何仙姑了。<br>
    ；八仙在海上寻欢作乐，怎会想到花龙太子半路挡道。平静的海面突然掀起一个浪头，将雕花龙船打翻了。张果老眼尖，翻身爬上毛驴背；曹国舅心细，脚踏巧板浪里漂；韩湘子放下仙笛当坐骑；
汉钟离打开蒲扇蛰脚底；蓝采和攀住了花篮边；铁拐李失了拐杖，幸亏抱着个葫芦；只有吕纯阳，毫无戒备，弄了个浑身湿透。这时，汉钟离慌忙检点人数。点过来，点过去，只有七位大仙。男的俱在，独缺一个何仙姑。奇怪，这何仙姑到哪里去了呢？汉钟离掐指一算，大吃一惊，原来是花龙太子拦路抢亲，把何仙姑抢到龙宫里去了。
这一回，大仙们可大动肝火了。个个咬牙切齿，杀气腾腾，直奔龙宫。花龙太子知道七仙不会善罢干休，早在半路上伺候着。他见大仙们来势凶猛，慌忙挥舞珍珠鳌鱼旗，催动虾兵蟹将，掀起漫海大潮，向七仙淹来。汉钟离挺着大肚子，飘飘然降落潮头，轻轻扇动蒲扇。只听“呜…忽…”一声，一阵狂风把万丈高的虾兵蟹将都扇到九霄云外去了，吓得四大天王连忙关了南天门。花龙太子见汉钟离破了他的阵势，忙把脸一抹，喝声“变”。海里突然窜出一倏巨鲸，张开闸门似的大口来吞汉钟离。汉钟离急忙扇动蒲扇，不料那巨鲸毫无惧，嘴巴越张越大。
这下，汉钟离可慌了神了……
</body>
</html>
在这段代码中，有一个文本链接“下一篇：女娲补天”，它链接到了当前目录下的next.html文件。文件next.html的实例代码如下：
<html>
<head>
<title>文本链接</title>
</head>
<body>
<center><h3>神话故事：女娲补天</h3></center>
href="first.html">上一篇：八仙斗花龙</a><br><br>
<a
    ；有一天，大龙和精卫、小太极一起到远古时代去玩，居然看到了传说中能顶住上天、撑开天与地的「不周山」，也遇到了美丽的女娲娘娘，甚至看到女娲补天的过程……那真是一场惊天地而泣鬼神
的经历，讲来都令人鼻酸！<br>
    ；天上的大神女娲，用泥土做成泥娃娃，再赋予它们生命。从此女娲创造了人，人们世世代代繁衍生息，过着幸福的生活。然而，好景不长。有一年，火神祝融和水神共工打起仗来。共工把撑天的柱子不周山撞倒了，天塌下半边来，砸了很多窟窿，把地也砸裂了，地上的洪水及天河的水不停地漏下来，造成大地上水患、火海，真是悲惨啊！<br>
    ；女娲为了解救人类，决定采石补天，用五石把天补起来，再用东海神龟的四只脚顶住苍天。眼看着补天的大功就要告成，却发现五石不够用，大洞还没补好，这可怎么办呢？慈悲的女娲只好牺牲自己的生命，用身体来补天上的大洞，亲眼看到那场过程，大龙、精卫和小太极，以及所有的泥娃娃们都哭红了眼睛！经过几次努力，女娲终于补好了天，天地间恢复了宁静，还出现了五彩云霞。一切生物又都生机勃勃地活在大地上。女娲为人类和世界万物的生存而献身，真是令人感动。
</body>
</html>
运行文件first.html，可以看到文件中包含一个文本链接“下一篇：女娲补天”，其效果如图5-1所示。
HTML 网页设计参考手册
·68·单击页面中的文本“下一篇：女娲补天”，可以将页面转到next.html
文件，如图5-2
所示。
图5-1  文本链接的页面效果                                  图5-2  打开的链接页面 5.2.3  设置超链接的目标窗口
在创建网页的过程中，有时候并不希望超链接的目标窗口将原来的窗口覆盖，比如希望不论链接到何处，主页面都保留在原处。这时可以通过target 参数设置目标窗口的属性。
语法：<A href="链接地址" target=目标窗口的打开方式>链接元素</A>
说明：在该语法中，target 参数的取值有4种，见表5-1。
表5-1  目标窗口的设置 target 值
目标窗口的打开方式 _parent
在上一级窗口打开，常在分帧的框架页面中使用 _blank
新建一个窗口打开 _self
在同一窗口打开，与默认设置相同 _top 在浏览器的整个窗口打开，将会忽略所有的框架结构
在表5-1中提到的框架是一种页面结构，在后面的章节中还会详细讲解。
实例代码：
<html>
<head>
<title>目标窗口的打开方式</title>
</head>
<body>
<center><h2>世界影片介绍</h2></center>
<hr size=2 color="#990000">
<font size=4>《孤岛》The Island</font><br><br>
导演：迈克尔·贝 Michael Bay<br>
编剧：艾里克斯·库兹曼 Alex Kurtzman<br>
主演：伊万·迈克格雷戈 Ewan McGregor<br>
      ；斯嘉丽·约翰森 Scarlett Johansson<br>
      ；迪蒙·郝德森 Djimon Hounsou<br>
      ；迈克尔·克拉克·邓肯Michael Clarke Duncan<br>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。