第5章超级链接
使Web充满生机的是页面之间的链接、图像和Flash动画等内容。这些资源并没有放在HTML中，而只是在页面中引用了它们。它们是单独保存的，甚至和页面保存在不同的主机上。本章主要介绍超链接的基本概念和原理，以及如何创建常见形式的链接。
本章重点
为网页添加超链接。
添加书签链接、电子邮件超链接、FTP链接。
视频讲解
5.1超链接简介
网页文件的最大魅力是超越各个文件的空间，通过超链接相互连接构成一个纷繁复杂的互联网世界。超链接(hyperlink)是一个网站的精髓，超链接在本质上属于一个网页的一部分，它是一种允许一个网页同其他网页或站点之间进行链接的元素。各个网页链接在一起后才能真正构成一个网站。超链接除了可链接文本外，还可链接各种媒体，如声音、图像和动画等，通过它们可以将网站建设成一个丰富多彩的多媒体世界。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型打开或运行。
一般网站首页上的导航条会有很多栏目，每个栏目对应一个链接。图51所示的是一个班级网站的首页，该首页的顶端就是导航条。
图51班级网站首页
单击“班级新闻”栏目，页面就会跳转到班级新闻页面news.html(见图52)中，实现了与网站中其他网页的链接。
图52班级新闻页面
视频讲解
5.2创建超链接
建立超链接的标记是<a>(anchor，锚)，以<a>开始，以</a>结束。锚可以指向网络上的任何资源，例如一个HTML页面、一幅图像、一个声音或视频文件等。
基本语法：
<a href="url" title="指向链接显示的文字" target="窗口名称">超链接名称</a>
语法说明：
一个链接有三个基本部分，即目标地址(URL)、链接标签(title)和打开位置(target)。
(1) <a>： 标记<a>表示一个链接的开始，</a>表示链接的结束。
(2) href： 链接的属性，和url结合定义了这个链接所指的目标地址。
(3) url： 资源地址，指要链接到的网页或者文件的地址。url可以是一个绝对网页，例如“https://www.w3school.com.cn”，或者是一个相对网页，还可以是一个PDF等文档，一般全部使用小写字母表示，以免某些对大小写敏感的服务器出现识别问题。
(4) target： 用于指定打开链接的目标窗口，其默认方式是原窗口，对于其具体的属性描述用户可参考表51，此参数常常被省略。
(5) title： 用于指定指向链接时所显示的提示信息。
(6) 超链接名称： 链接目标资源的文字显示说明，浏览者单击“超链接名称”，就会链接到指定url的资源。
(7) 可以在标记中添加tabindex="n"这样的属性，规定用户使用制表符键时的移动顺序。
表51target属性
属性值描述
_parent在上一级窗口中打开，一般使用分帧的框架页会经常使用
_blank在新窗口中打开
_self在同一个帧或窗口中打开，该项一般不用设置，它是默认的
_top在浏览器的整个窗口中打开，忽略任何框架
程序51是一个创建链接的实例，分别使用了<a>标记、href、title和target属性。
<!--程序51-->
<html>
<head>
<title>创建链接</title>
</head>
<body>
<center>
<h2>创建链接</h2>
<hr>
<p><a href="https://www.sina.com.cn" title="打开新浪首页">新浪</a>
<!--添加新浪链接-->
<br>
<a href="https://www.baidu.com" target=_blank>百度</a> <!--添加百度链接-->
<br>
<a href="https://www.pku.edu.cn">北 京 大 学</a><!--添加北京大学链接-->
</p>
</center>
</body>
</html>
在图53所示的运行界面中，把鼠标移向“新浪”，就会在鼠标附近显示一个“打开新浪首页”的提示框。通过单击超链接名称“新浪”“百度”“北京大学”即可进入相关网站，这些被添加了链接的标记文本常常显示为带下画线的蓝色文本。
图53创建链接
被单击的链接标签可以是文本，也可以是图像。标签文本通常带有蓝色的下画线，以表示这是一个链接，但对于图像就不合适了。在网站设计中，标签的外观和效果越漂亮，访问者就越有可能单击它。实际上，设计网站的一个重要的考虑因素就是如何吸引访问者单击自己的网站。
5.2.1设置超链接路径
在建立链接时，属性href定义了这个链接所指的目标地址，也就是路径。理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本。每一个网页都具有独一无二的地址，在英文中被称为URL(Uniform Resource Locator)，即统一资源定位器。同一个网站下的每一个网页都有不同的地址，但是在创建一个网站的网页时不需要为每一个链接都输入完整的地址，我们只需要确定当前文档同站点根目录之间的相对路径关系就可以了。
在HTML文件中主要提供了三种路径，即绝对路径、相对路径和根路径，不同的路径用在不同的链接中。HTML将链接分为内部链接和外部链接，内部和外部是相对于站点文件夹而言的。所谓内部链接,就是站点文件夹内文件之间的链接； 所谓外部链接，就是站点文件夹内的文件链接到站点文件夹之外的文件。在添加内部链接的时候常用到相对路径和根路径； 在添加外部链接的时候常用到绝对路径。内部链接和外部链接将在5.2.2节和5.2.3节中介绍，这里先介绍绝对路径、相对路径和根路径。
1. 绝对路径
绝对路径指文件的完整路径，包括完整的协议名称、主机名称、文件夹名称和文件名称，一般用于网站的外部链接(参见5.2.3节)。常见的绝对路径有以下两种。
(1) https链接： 例如https://www.sina.com.cn。
(2) ftp链接： 例如ftp:// 202.38.218.16。
需要注意的是，如果链接的资源和当前页面都在一个网站内，尽量不要使用绝对路径，在同一网站内使用相对路径便于页面的移植。
2. 相对路径
相对路径适用于创建网站的内部链接。相对路径是以当前文件所在的路径为起点进行相对文件的查找，它包含了从当前文件指向目的文件的路径。一个相对路径不包括协议和主机地址信息，因为它的路径与当前文档的访问协议和主机名相同，甚至有相同的目录路径，所以通常只包含文件夹名和文件名，有时甚至只有文件名。用户可以用相对路径指向与源文档位于同一服务器或同一文件夹中的文件，下面举例说明。
(1) 如果链接到同一目录下的文件main.html，则只需输入要链接文件的名称，例如href="main.html"。
(2) 如果要链接到下级子目录中的文件，如main.html是本地当前路径下被称为“web”子目录下的文件，只需先输入目录名，然后加“/”，再输入文件名，即href="web/main.html"。
(3) 如果要链接到上一级子目录中的文件，如main.html是本地当前目录的上一级子目录下的文件，则先输入“../”，再输入文件名，即href="../main.html"。
(4) 如果要链接到上两级子目录中的文件，如main.html是本地当前目录的上两级子目录下的文件，则先输入“../../”，再输入文件名，即href="../../main.html"。
3. 根路径
根路径也适用于创建内部链接，但是在大多数情况下不建议使用根路径。当一个站点放置在几个服务器上或者在一个服务器上放置了几个站点的时候，可以使用根路径。在绝大多数情况下，链接本地机器上的文件时使用相对路径比较好，不仅在本地机器环境下适合，就是上传到网络或其他系统下也不需要进行多少更改就能准确链接。
根路径目录地址的书写也很简单，首先以一个斜杠开头，代表根目录，然后书写文件夹名，最后书写文件名，例如/download/main.html； 如果根目录要写盘符，则在盘符后使用“|”而不用“:”，这一点与DOS的写法不同，例如“C|/web/news/index.html”，它代表C盘web/news/目录下的文件index.html。
5.2.2内部链接
所谓内部链接，指的是在同一个网站内部不同HTML页面之间的链接关系，在建立网站内部链接的时候，要明确哪个是主链接文件(即当前页)，哪个是被链接文件。内部链接采用相对路径链接比较好。根据图54所示的某班级网站站点目录结构，表52所示的是内部链接语句中相对路径的写法。
图54某班级网站站点目录结构
表52站点内部链接
主链接文件描述被链接文件描述超链接代码
从班级网站文件夹下的文件index.html
链接到班级网站新闻目录xinwen下的文件news.html
<a href="xinwen/news.html" class= "head">班级新闻</a>
新闻目录xinwen下的文件news.html
链接到xinwen目录上一级目录（班级网站文件夹下）的文件index.html
<a href="../index.html" class="head"><b>首页</b></a>
新闻目录xinwen下的文件news.html
链接到本级目录中的文件news1.html
<a href=news1.html>关于普通话考试的通知</a>
5.2.3外部链接
所谓外部链接，指的是跳转到当前网站外部，与其他网站中的页面或其他元素之间的链接关系。这种链接的URL地址一般用绝对路径，要有完整的URL地址。最常用的外部链接格式是<a href="https://网址">，还有其他的格式，如表53所示。
表53常用的URL格式
服务URL格式描述
WWWhttp://www.sina.com进入万维网站点
FTPftp://192.168.0.1进入文件传输服务器
Newsnews://news.newsfan.net启动新闻讨论组
Emailmailto://abc@gmail.com启动邮件
注意： 如果链接目标是一种浏览器不知道如何处理的文件(如Excel等)，那么浏览器会尝试打开一个辅助程序来查看这个文件，或者下载到访问者的硬盘上。
视频讲解
5.3链 接 对 象
5.3.1图片链接
用户可以为一个图片指定链接。
基本语法：
<a href="url" target="目标窗口的打开方式"><img src="图片地址"></a>
语法说明：
(1) href： 用来设置图片链接的页面地址URL。
(2) target： 用来设置目标窗口的打开方式，其具体设置可参考本章的表51。
(3) <img>： img标记表示插入图片，在一个HTML文件中显示图片通常使用<img>标记，这在本书后面的章节中会详细介绍，属性src是图片的地址。
程序52是建立图片链接的实例。
<!--程序52-->
<html>
<head>
<title>建立图片链接</title>
</head>
<body>
<center>
<h2>图片链接</h2>
<hr>
<a href="https://www.baidu.com" target="_blank">
<img src="images/baidu_logo.gif" /></a>
</center>
</body>
</html>
该程序运行时，通过单击页面中显示的图片就可以打开一个新的页面，进入百度网站。页面效果如图55所示。
图55建立图片链接
有时可以在网页上装载一些小图片，例如某些图像的缩小版本或称为缩略图。访问者可以选择某个希望查看的小图片，单击后可以链接到该图像的全尺寸版本。具体例子见本章5.4节中的实例“班级相册”。
注意：
(1) 不要使用“单击这里”作为显示标签，应该使用文本中已经存在的关键词来表示链接。
(2) 对于图像链接的边框，如果没有设置img的边框属性border="0"，就会出现边框。
5.3.2书签链接
在浏览页面时，如果页面篇幅很长，要不断地拖动滚动条，这给浏览带来不便，要使浏览者既可以从头阅读到尾，又可以很快地寻找到自己感兴趣的特定内容进行部分阅读，这个时候可以通过书签链接来实现。当浏览者单击页面上的某一“标签”时就能自动跳到网页中相应的位置进行阅读，给浏览者带来方便。
基本语法：
(1) 在同一页面内使用书签链接的格式：
<a href="#书签名称" target="窗口名称">链接标题</a>
（2） 在不同页面之间使用书签链接的格式(在不同页面中链接的前提是需要指定好链接的页面地址和链接的书签名称)：
<a href="URL地址#书签名称" target="窗口名称">链接标题</a>
对于以上两种书签链接形式，链接到的目标为：
<a name="书签名称">链接内容</a>
语法说明：
书签链接可以在同一页面内链接，也可以在不同页面之间链接。
1. 建立书签
选择一个目标定位点，用<a>标记的name属性的值来确定书签名称：
<a name="书签名称">链接内容</a>
2. 为书签制作链接
在网页的某个地方建立对这个书签名称的链接标题，在链接标题的基础上建立链接，该链接的href属性的值要和书签名称相同，前面还要加上“#”号，例如<a href="#书签名称" target="窗口名称">链接标题</a>(同一页面内要使用书签链接)或<a href= " URL地址#书签名称">链接内容</a>(不同页面内使用书签链接)。设置好后，单击链接标题就跳转到书签名称所标识的链接内容了。图56是关于书签应用的一个实例的运行效果。
图56建立书签链接
程序53和程序54组成的实例实现了图56所示的效果，在53.html页面内可实现同一页面内的书签链接，在53.html和54.html之间可以实现不同页面之间的书签链接。
<!--程序53-->
<html>
<head>
<title>书签链接</title>
</head>
<body>
<p>
<a name="top"><h2>课程介绍</h2></a>
<a href="#T1">数据结构</a><br>
<a href="#T2">计算机组成原理</a><br>
<a href="#T3">计算机网络</a><br>
<a href="#T4">人工智能</a>
<hr>
<br><br>
<h3><a name="T1">数据结构</a> </h3>
<p> “数据结构”是计算机应用技术、网络工程与管理、计算机信息管理、计算机控制技术以及计算机软件等专业的一门重要专业基础课程，是计算机算法理论基础和软件设计的技术基础。</p>
<a href="#top">返回页首</a>
<h3><a name="T2">计算机组成原理</a> </h3>
<p> “计算机组成原理”是计算机专业本科生必修的一门硬件专业基础课，该课程主要讲解简单、单台计算机的完整组成原理和内部运行机制。</p>
<a href="#top">返回页首</a>
<h3><a name="T3">计算机网络</a> </h3>
<p> “计算机网络”是信息管理与信息系统专业本科生的专业课之一。本课程的内容包括传输介质、局域异步通信、远程通信、差错检测、局域网技术、网络拓扑、硬件编址、网络安全等。</p>
<a href="#top">返回页首</a>
<h3><a name="T4">人工智能</a> </h3>
<p> “人工智能”是计算机科学的重要分支，是计算机科学与技术专业的核心课程之一，也是自动化、电子信息工程等专业的一门重要的选修课程。</p>
<p><a href="5-4.html#zhineng">人工智能发展现状介绍</a></p>
<a href="#top">返回页首</a>
</body>
</html>
在程序53中：
(1) 第8行首先定义了一个显示为“课程介绍”这样的书签，标记名为top，当需要回到顶端时，能够通过这个书签快速定位。
(2) 第9行到12行分别定义了4个到书签(4门课程)的链接。
(3) 在第15、20、24和29行分别定义了4个书签，并和前面定义的4个书签链接一一对应。
(4) 每门课程后都提供了一个“返回页首”的定义。
(5) 第9行定义了一个到其他页面内书签的链接，见程序54。
显示页面内容后，单击其中一门课程的名称，如“人工智能”，可以跳到该页面中“人工智能”文字内容的位置，如图57所示，实现了同一页面内的书签链接。其他几个书签链接的方法类似，而且每个文字段落后都有一个“返回页首”的链接，单击之后页面位置将定位在top书签开始的位置。
图57同一页面内的书签链接
程序54是页面间书签的应用，它需要和程序53结合在一起使用。
<!--程序54-->
<html>
<head>
<title>人工智能发展现状介绍</title>
</head>
<body>
<h1><font color="#339933">人工智能发展现状介绍</font></h1>
<p> 目前人工智能研究的三个热点是： 智能接口、数据挖掘、主体及多主体系统。</p>
<p> 智能接口技术是研究如何使人们能够方便自然地与计算机交流。为了实现这一目标，要求计算机能够看懂文字、听懂语言、说话表达，甚至能够进行不同语言之间的翻译。</p>
<p> <a name="zhineng">人工智能</a>的诞生与普及是科技发展的必然的结果，生命与智能的物理过程终将被人们所解开。而对机器智能对人类的超越及由此造成的威胁的担心也是必要的。但终究，人工智能是一个兴起的，具有无可匹敌的重大意义的，并将长期使人们为之兴奋的研究话题</p>
<a href="5-3.html#top">返回</a>
</body>
</html>
在浏览程序53的内容时，单击“人工智能发展现状介绍”书签链接，浏览器将打开程序54，显示如图58所示的内容，在该图中单击页面中最后的“返回”链接，浏览器将回到程序53的内容，从而实现不同页面内的书签链接。
图58不同页面内的书签链接
5.3.3下载文件的链接
如果希望制作下载文件的链接，只需在链接地址处输入文件所在的位置即可。当浏览器用户单击链接后，浏览器会自动判断文件的类型，以做出不同情况的处理。
基本语法：
<a href="url">链接内容</a>
语法说明：
(1) url： 代表文件所在的相对路径或绝对路径。
(2) 文件类型可以是Word文档、PDF文档、可执行文件、压缩文件等。
程序55是下载文件的实例。
<!--程序55-->
<html>
<head>
<title>下载文件</title>
</head>
<body>
<p>
这是一本电子书：
<a href="ds.rar">数据结构--C#</a>
</p>
</body>
</html>
程序运行后，单击“数据结构”链接，浏览器会自动打开新的对话框，我们可以选择是否将文件保存到磁盘，单击“保存”按钮，选择存盘路径，就可以开始文件下载。若不想保存，可以单击“取消”按钮。页面效果如图59所示。
图59文件下载
下载的文件，如果是Word文档等，通过服务器端的配置可以直接用程序打开相应的文档。
5.4小实例
程序56描述了班级网站首页中导航条的简单创建，这里综合运用了链接和样式来设计导航。在head部分的style标记中定义了导航条的使用效果(a和navi部分)，当访问者将鼠标移向每个栏目的名称时，字的颜色会发生变化，单击栏目名，则进入相应的页面。
<!--程序56-->
<html>
<head>
<title>班级网站</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
td {font-size:12px;line-height: 20px;}
a:link {color: #ffffff;text-decoration: none;}
a:visited {text-decoration: none;color: #ffffff;}
a:hover { text-decoration: underline; color: #FF0000;}
a:active {text-decoration: none;color: #ffffff;}
.navi{color: #ffffff; height:40px; line-height:40px;
text-align:right;background-image:url(images/menu-bg.gif);}
</style>
</head>
<body>
<table width="940" border="0" align="center"
cellpadding="0" cellspacing="0">
<tr>
<td class="navi">
<a href="index"><b>首页</b></a>
<a href="xinwen/news.html">班级新闻</a>
<a href="photo/photo1.html">班级相册</a>
<a href="gerenzhuye/student.html">个人主页</a>
<a href="liuyan/message.html">留言本</a>
<a href="benqishili/li.html">网页设计</a>
<a href="about/about.html">关于我们</a>
</td>
</tr>
</table>
</body>
</html>
页面效果如图510所示。
图510班级网站首页导航条的创建
该程序中的CSS代码部分可以参考本书中对CSS的内容介绍。该页面中定义了网站主页的7个链接，通过单击这些链接可以进入相关主题的页面。
程序57是创建班级网站相册的例子。此页面中显示了需要显示的图像文件的缩略图，例如004_s.jpg(缩略图可以使用ACDSee等工具制作)，当访问者单击图片时再显示原始图像。
<!--程序57-->
<html>
<head>
<title>班级相册</title>
</head>
<style type="text/css">
.img_x{margin:15px;height:80px;width: 120px;border:1px solid #8397A0;}
</style>
<body>
<center>
<h2>图片链接</h2>
<HR>
<table>
<tr>
<td align="center">
<a href="images/004.jpg" target="_blank">
<img src="images/004_s.jpg" width="400" height="545"
border="0" class="img_x" alt="单击图片查看大图"></a>
</td>
<td align="center">
<a href="images/005.jpg" target="_blank">
<img src="images/005_s.jpg" width="600" height="404"
border="0" class="img_x" alt="单击图片查看大图"></a>
</td>
<td align="center">
<a href="images/006.jpg" target="_blank">
<img src="images/006_s.jpg" width="600" height="404"
border="0" class="img_x" alt="单击图片查看大图"></a>
</td>
</tr>
</table>
</center>
</body>
</html>
页面效果如图511所示。使用缩小版本(即缩略图)是在页面上提供大量的图像信息，同时避免访问者长时间等待的好方法。程序57中的缩略图一般只有原始图像的1/15，下载花费的时间很少。
图511班级相册
注意： 和缩略图一起出现的文本提示信息可以说明图像文件的实际大小，让访问者知道将要下载文件的大小。
小结
本章主要介绍了关于各种链接的定义。建立超链接的标记是<a>，以<a>开始，以</a>结束，锚可以指向网络上的任何资源，例如一个HTML页面、一幅图像、一个声音或视频文件等。
在具体应用链接时需要考虑下面的建议：
(1) 一般规则是对于自己站点上的网页的链接使用相对URL，对于其他站点上的资源链接使用绝对URL。
(2) 如果指定路径但省略文件名，就会链接到目录下的默认文件(网站可以自己定义默认页面)，如果路径也省略，就会链接到网站的默认主页。
(3) URL内容部分最好使用小写字母来表示。
(4) 不要使用“单击这里”作为显示标签，应该使用文本中已经存在的关键词来表示链接。
(5) 可以对链接应用样式进行格式化，如使用图像作为标签来吸引用户的注意力。
(6) 可以为页面内的链接规定制表符顺序，这样访问者就可以用键盘在页面上移动。
(7) 对于供下载的资源，如果超出了一定的大小，最好事先进行压缩，甚至把一个文件分成几个压缩文件来保证传输的安全。
习题
1. ()是在新窗口中打开网页文档。
A. _self B. _blank C. _top D. _parent
2. 在网页中必须使用()标记完成超链接。
A. <a>…</a> B. <p>…</p>
C. <link>…</link> D. <li>…</li>
3. 超链接是建立网站、网页的主要元素之一。若要建立同一网页内的链接，应采用()链接形式。
A. 链接到一个Email B. 书签式链接
C. 框架间链接 D. 链接到一个网站
4. 关于超链接，下列说法正确的是()。
A. 不同网页上的图片或文本可以链接到同一网页或网站
B. 不同网页上的图片或文本只能链接到同一网页或网站
C. 同一网页上被选定的一个图片或一处文本可以同时链接到几个不同网站
D. 同一网页上的图片或文本不能链接到同一书签
5. 若要在页面中创建一个图像超链接，要显示的图形为myhome.jpg，所链接的地址为“http://www.pcnetedu.com”，以下用法正确的是()。
A. <a href=http://www.pcnetedu.com">myhome.jpg</a>
B. <a href="http://www.pcnetedu.com"><img src="myhome.jpg"></a>
C. <img src="myhome.jpg"><a href ="http://www.pcnetedu.com"></a>
D. <a href =http://www.pcneredu.com><img src="myhome.jpg">
6. 下列选项中，（）是相对路径。
A. http://www.sina.com.cn B. ftp://219.153.40.150
C. ../a.html D. /a.html
7. 在HTML文件中，URL是。
8. 在HTML文件中，超链接可以分为。
9. 关于超链接，属性用于指定链接的目标窗口。
实验
1. 用列表实现新闻列表项，并加超链接，如图512所示。
图512新闻列表
2. 利用书签链接制作帮助文档。要求在同一个页面内实现文件不同内容的链接，如图513所示。
图513帮助文档
3. 相册的制作，要求展示个人照片，缩略图的照片能够链接到高清晰的照片，如图514所示。
图514个人相册