第5章超链接
超文本链接语言(网页)的精髓就是链接,通过链接才可以把世界各地的网页连到一起,成为互联网。超链接是网站中使用比较频繁的HTML元素，因为网站的各种页面都是由超链接串接而成，超链接完成了页面之间的跳转。超链接可以是一个字、一个词或者一组词，也可以是一幅图像，可以通过单击这些内容跳转到新的文档或者当前文档中的某个部分。
本次实验将学习：
(1) 超链接的类别和应用特点。
(2) 普通超链接(文本、图片)的创建方法和相关设置。
(3) 锚点链接的创建方法和相关设置。
(4) 链接对象(电子邮箱、FTP等)。
实验目标：
(1) 掌握常见新闻列表的链接方法。
(2) 掌握书签链接制作帮助文档的方法。
5.1讲述与示范
<a>标记表示一种链接，通过这个标记的定义，可以从一个文档跳转到另外一个文档。其基本的语法如下，其中，href属性确定链接的目标文档，标记中的文字将会代表该链接显示在页面中。
<a href="链接的目标地址">表示该链接的文字</a>
下面的实例就是一个指向新浪网的链接标记。
<a href="https://www．sina．com．cn">新浪网</a>
在所有浏览器中，链接的默认外观如下。
(1) 未被访问的链接带有下画线而且是蓝色的；
(2) 已被访问的链接带有下画线而且是紫色的；
(3) 活动链接带有下画线而且是红色的。
在实际的页面设计中涉及链接设计的工作主要有两个： 确定链接的地址和修改不同链接的显示样式。
实验1： 网页欣赏
图51是美文网的主页界面，美文网的主要内容是展示分类的文章，超链接的作用主要是跳转到指定的内容页面，显示出完整的文字内容。当把光标移到一些网站的名字上时，光标的形状将会变成一个小手，文字也会自动变色并加上下画线，单击上面的名称，就会跳转到指定的内容页面，这就是超链接的作用。
图51美文网主页界面
超链接的功能和作用，就是跳转到指定的资源文件。这些资源文件可以是网页文件，也可以是声音、视频、图片等资源文件。图52是某培训网站的在线视频学习界面，应用了图片和视频的链接。链接指向的是一个视频等包含多媒体文件的页面，单击它们可以直接在线播放和浏览。如果当前连接指向的视频或其他资源文件是单独文件，而非嵌入页面，则会将该文件下载下来。
图52某培训网站的在线视频学习界面
实验2： 新闻列表的制作
实验要求：
如图53所示，基于实验42的页面代码，将其中的每行文字加上超链接，根据提供的素材，当鼠标单击文字“点选名将 抢礼包《千军破》首服开启”时，在新的窗口显示所链接的文档内容(文件资源见game0601001.html)。
图53实验42新闻列表
实验分析：
这是网站上常见的新闻列表，链接的形式是文字链接，链接打开的目标是一篇新闻页面。在页面代码41.html的基础上，只需要对每一个列表项内容加上<a>标记。
实验步骤：
步骤1： 复制文件41.html的代码到文件51.html，打开文件，为列表项添加链接
<p class="first_line"><a href="#">暴雪： 商业艺术与技术的平衡之道</a></p>
<ul>
<li><a href="game0601001．html" target="_blank">
点选名将 抢礼包《千军破》首服开启</a></li>
<li><a href="#">战国新游《王者天下》开启 抢礼包</a></li>
<li><a href="#">快来玩《德州扑克》 与人斗其乐无穷</a></li>
<li><a href="#">《十年一剑》真武侠一区开启 抢礼包</a></li>
<li><a href="#">可买卖游戏代码 传魔兽大灾变过审批</a></li>
<li><a href="#">儿时游戏50年变迁 00后迷动画爱网游</a></li>
<li><a href="#">监狱强迫犯人打网游 徐州禁少年进网吧</a></li>
<li><a href="#">iPad成为最赚钱的移动游戏平台</a></li>
</ul>
加上了<a>标记，指定了href属性之后，页面运行效果如图54所示。另外，target属性用于指定打开链接的目标窗口，target的值常用的有两个： _blank为在新窗口打开目标链接，_self为在自身窗口打开目标链接，也是系统默认的值。
图54未加样式的文字链接效果
从运行效果可以看出，每个链接下都显示一条下画线，默认的文字链接颜色是蓝色。有时候，考虑到页面设计的整体效果，通常会将链接的默认显示效果加以修改。
步骤2： 修改链接的默认显示样式
一般而言，类似新闻列表这种链接形式，通常都不会将下画线显示出来，这可以通过设置链接的textdecoration属性为none达到目标，如下。
a:link{ text-decoration:none;}
下面在页面代码的style部分，添加了针对<a>标记的样式定义。
<style type="text/css">
．container{width:350px;margin:0 auto;text-align:left;
background-color:#EFEFDA;padding: 20px;}
．first_line{font-family:黑体;font-size:16px;padding-left:20px;}
ul{list-style-type: disc;font-size:16px;line-height:24px;}
a:link{color:#333333; text-decoration:none;}
a:visited{color:#333333; text-decoration:none;}
a:hover{color:#ff0000; text-decoration:underline;}
a:active{color:#ff0000; text-decoration:underline;}
</style>
默认的链接样式在单击前的样式是： 蓝色14px下画线，访问后为紫色，上述样式代码定义了链接的4种状态发生时的显示样式。
(1) a:link未访问的链接样式，取消了链接的默认下画线显示；
(2) a:visited表示已访问的链接样式，也就是对超链接访问后的样式；
(3) a:hover表示光标停留在链接上，但尚未单击时的样式；
(4) a:active表示光标单击激活链接的样式。
一般情况下，完成一个超链接的样式，这4种状态的样式都需要重设，本例中链接样式和访问过的样式设置相同，设置了文字的颜色为深灰色，无下画线。光标划过状态和单击状态样式设置相同，设置了文字的颜色为红色，加下画线。
实验3： 利用书签链接制作帮助文档
实验要求：
根据提供的素材faq.doc，利用书签链接制作一个效果如图55所示的常见问题回答页面。
图55FAQ文档
实验分析：
这是网页设计中常见的一种问题回答的FAQ页面类型，通常问题和问题的回答会在一个页面内利用书签链接的形式关联起来。
从实现上看，效果图中包括问题列表和问题回答两大内容。问题列表可以采用简单的无序列表实现，而回答部分由于有问题和回答两个内容，可以采用定义列表<dl>来实现。
从样式效果来看，在问题列表部分，“常见问题回答”应当是一种独立的标题形式，字号应当比“使用入门”这种问题分类标题大一些，而问题定义作为列表项可以比分类标题更小一些，在回答内容部分，问题名称和回答需要分别定义，并且回答部分应当具有缩进的效果来保持页面结构的可读性。
定义书签链接需要注意以下两个步骤。
（1） 首先是定义书签，可以利用某个元素的id定义，如“<p id="书签名">内容</p>”，也可以采用“<a name="书签名">链接标题<a/>”方式定义。
（2） 其次，是利用“<a href="#书签名">链接标题</a>”来定义链接。
实验步骤：
步骤1： 创建页面52.html，完成内容的基本布局
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
．container{width:650px;margin:0 auto;text-align:center;
background-color:#EFEFDA;padding: 20px;}
</style>
</head>
<body>
<div class="container">
<!--在此内部添加内容-->
</div>
</body>
</html>
步骤2： 添加问题列表
由于问题列表和回答都在一个页面内，因此可以使用下面的格式定义书签链接。
<a href="#whatis">什么是Google Maps API？</a>
下面是部分样例代码，注意每个href指向的都是当前页面内的一个书签，用#开头。
<div class="container">
<p id="top"><h1>常见问题解答</h1></p>
<ul>
<p><h2>使用入门</h2></p>
<li><a href="#whatis">什么是Google Maps API？</a></li>
<li><a href="#whatcountries">Google Maps API覆盖哪些国家/地区？</a></li>
<!--此处省略了其他问题列表-->
<p><h2>使用Google Maps API</h2></p>
<li><a href="#">Google Maps API密钥系统是怎样工作的？ </a></li>
<!--此处省略了其他问题列表-->
<li><a href="#loadasync">怎样在载入网页后将API以异步方式载入到网页中？
</a></li>
</ul>
</div>
步骤3： 添加问题的答案
对问题回答部分可以采用<dl>标记，这是一种简单而又有效的方法。例如，下面的代码实现了利用<dl>标记完成问题答案的设计。
<dl>
<dt id="whatis">什么是Google Maps API？</dt>
<dd>
<p>
Google Maps API为开发人员提供了多种将Google Maps嵌入网页中的方法，并允许简单使用或广泛的自定义。
<br>
如果您经营的是企业网站或商业网站，则可能还会对Google Maps API Premier感兴趣。<a href="#top">返回问题列表</a>
</p>
</dd>
<dt id="whatcountries">Google Maps API覆盖哪些国家/地区？</dt>
<dd>
<p>
Google Maps团队正不断导入新的地图数据，逐渐扩大全球覆盖范围。以下电子表格显示了最新的覆盖范围详细信息。
<br>请查看地图覆盖范围详情电子表格。
<br>另请参见支持的语言电子表格。<a href="#top">返回问题列表</a>
</p>
</dd>
</dl>
在页面代码中，利用下面的代码定义了问题标题。
<dt id="whatis">什么是Google Maps API？</dt>
这里的id对应于步骤2代码中<a>标记中的href属性值。这里没有使用“<a name="书签名">链接内容</>”是因为采用id对应链接在编码上更简洁和直接。
另外，在每个问题的最后，均添加了一个返回顶部的链接“<a href="#top">返回问题列表</a>”，用来在页面滚动时，能够随时回到问题列表部分。
步骤4： 添加对应的样式
根据上面的页面代码分析，样式设计时可以考虑列表部分和回答部分，具体如下。
<style type="text/css">
．container{width:650px;margin:0 auto;padding: 20px;font-size: small;}
h1 {font-size: 160%;}
h2 {font-size: 140%;}
p { line-height: 125%;}
ul {line-height: 125%;}
dt { font-weight: bold; margin: 5px; padding: 0;}
</style>
其中，h1对应于页面标题，规定在默认字号上扩大1.6倍，样式h2则对应于问题分类标题，样式p规定所有的段落中行高为1.25倍，样式ul规定所有的列表项的行高为1.25倍，样式dt则规定了问题答案的标题采用粗体。页面运行的效果如图56所示。
图56书签链接
实验4： 电子相册的制作
实验要求：
为图片加上超链接，单击每一幅图片时，在当前图片上方显示该图片的大图，不跳转至新页面，如图57所示。
图57电子相册的制作
实验分析：
这是关于图片展示的网页，为图片添加超链接和锚点，可以将<img>标记置于<a>标记之间，形成一个图片形式的链接，并且指定该链接的href属性值为定义的锚点。
实验步骤：
步骤1： 定义整体页面结构，并复制图片资源到本章目录下
在主体内容里，定义一个<ul>无序列表，放置三个<li>列表项，其中每一个列表项中指定了图片资源，并针对不同的图片资源设置了不同的锚点<a name="">，而在<ul>标签下定义一个段落<p>，放置三幅带有超链接的图片，分别链接到定义好的锚点。部分代码如下。
<！DOCTYPE html>
<html>
<head>
<title>电子相册</title>
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<ul>
<li><a name="p1"><img src="images/pics1．jpg" alt="pics1" /></a></li>
<li><a name="p2"><img src="images/pics2．jpg" alt="pics2" /></a></li>
<li><a name="p3"><img src="images/pics3．jpg" alt="pics3" /></a></li>
</ul>
<p>
<a href="#p1"><img src="images/p1．jpg" alt="p1" /></a>
<a href="#p2"><img src="images/p2．jpg" alt="p2" /></a>
<a href="#p3"><img src="images/p3．jpg" alt="p3" /></a>
</p>
</ul>
</body>
</html>
上述代码运行的效果见图58。从效果图可以看出，每一幅有链接的图片外围均被一个蓝色的边框所包围，呈现出链接的默认状态。
图58未加样式的图片链接效果
步骤2： 为图片链接添加样式定义
通常，在页面中会将图片的默认链接状态呈现的蓝色边框取消，这可以通过对img添加自定义属性，从而覆盖默认属性达到效果。对img设定左右内边距，使得图片外围可以通过底背景的设置达到边框的效果。具体设置如下。
ul li img {
padding:40px 0 0 20px;
}
清除列表项前的默认圆点，通过设置<ul>的liststyletype:none即可。具体的样式如下面的页面代码所示。
为实现通过单击下方的图片链接，上方切换出对应的大图片的效果，这里使用了一个小技巧。定义<ul>中overflow： hidden； 这个属性设置表示当前<ul>标记内如果有元素溢出，则不显示。然后定义ul的大小为宽480px、高360px，同时定义ul下的li标记也为宽480px、高360px，目的是使得每一个ul下只能容下一个li标记列表项。因此，放置三个列表项，则溢出不显示，默认只显示第一个。具体样式定义如下面的页面代码所示。
．container{width:500px;margin:auto;}
ul {
width:480px;
height:360px;
background:#333;
list-style-type:none;
overflow:hidden; /*溢出隐藏*/
}
ul li {
width:480px;
height:360px;
}
ul li img {
padding:40px 0 0 20px;
}
p {
text-align:center;
padding-top:10px;
}
这样当单击缩略图时，对应的超链接指向定义好的锚点，就可以显示单击过的图片，如图57所示。
5.2理论解答题
1. 选择题
(1) 将超链接的目标网页在上一级窗口中打开的方式是()。
A. parent B. _blank C. _top D. _self
(2) 超链接元素a有很多属性，其中用来指明超链接所指向的URL的属性的是()。
A. href B. herf C. target D. link
(3) ()元素用来在网页中插入一个图片。
A. font B. img C. table D. p
(4) 下列路径中属于绝对路径的是()。
A. address.htm
B. staff/telephone.htm
C. https://www.sohu.com/index.htm
D. /Xuesheng/chengji/mingci.htm
(5) 用于同一个网页内容之间相互跳转的超链接是()。
A. 图像链接 B. 空链接 C. 电子邮件链接 D. 锚点链接
(6) 当光标停留在超链接上时会出现()标记定义的文字。
A. table B. href C. title D. word
(7) 整个框架集包含3个框架，在其中一个框架中的网页中设置超链接，超链接的目标选项有()个。
A. 4 B. 5 C. 6 D. 7
(8) 关于超链接元素a的说法错误的是()。
A. 用name属性创建一个命名锚点，可以让链接直接跳转到下一个页面的某一章节，而不用用户打开那一页，再从上到下慢慢找
B. 要想访问本页的锚点，可在URL地址的后面加一个“#”和这个锚点的名字
C. href属性用来指定连接到的URL
D. href属性不能用来指定到一个邮箱地址
(9) 在HTML中，（）是相对地址。
A. https://www.sina.com/index.htm
B. main/index.htm
C. file://192.168.0.100/index.htm
D. https://www.sina.com/logo.gif
(10) 在HTML文件中，不属于超链接元素a的属性的是()。
A. name B. href C. font D. target
(11) HTML使用超链接元素a来创建一个连接到其他文件的链接，链接的资源()。
A. 只能是HTML页面和图像 B. 不可以是声音
C. 不可以是图片 D. 可以是网络上的任何资源
(12) 在下列的HTML中，()可以产生超链接。
A. <a url="https://www.pqshow.com">pqshow.com</a>
B. <a href="https://www.pqshow.com">pqshow</a>
C. <a>https://www.pqshow.com</a>
D. <a name="https://www.pqshow.com">pqshow.com</a>
(13) 下列表示可链接文字的颜色是黑色的是()。
A. <body link=black> B. <body text=black>
C. <body vlink=black> D. <body alink=black>
(14) 下列表示已经单击(访问)过的可链接文字的颜色是黑色的是()。
A. <body alink="#000000"> B. <body link="#000000">
C. <body vlink="#000000"> D. <body blink="#000000">
(15) 下列表示正被单击的可链接文字的颜色是白色的是()。
A. <body link="#ffffff"> B. <body vlink="#ffffff">
C. <body alink="#ffffff"> D. <body blink="#ffffff">
(16) 链接(Link)的基本语法是()。
A. <a goto="URL"> … </a> B. <a herf="URL"> … </a>
C. <a link="URL"> … </a> D. <a href="URL"> … </a>
(17) 下列表示跳转到页面的bn锚点的代码是()。
A. <a link="#bn"> … </a> B. <a href="bn"> … </a>
C. <a href="#bn"> … </a> D. <a herf="bn"> … </a>
(18) <a href="#bn"> … </a>表示()。
A. 跳转到bn页面 B. 跳转到页面的bn锚点
C. 超链接的属性是bn D. 超链接的对象是bn
(19) 跳转到hello.html页面的bn锚点的代码是()。
A. <a href="hello.html&bn"> … </a>
B. <a href="bnl#hellohtml"> … </a>
C. <a href="hello.html#bn"> … </a>
D. <a href="#bn"> … </a>
(20) <a href="hello.html#top"> … </a>表示()。
A. 跳转到hello.html页面的顶部
B. 跳转到hello.html页面的top锚点
C. 跳转到hello.html页面的底部
D. 跳转到hello.html页面的文字top所在链接
(21) 下列表示新开一个窗口的超链接代码是()。
A. <a href=URL target=_new>…</a>
B. <a href=URL target=_self>…</a>
C. <a href=URL target=_blank>…</a>
D. <a href=URL target=_parent>…</a>
(22) <a href=URL target=_parent>…</a>表示()。
A. 打开一个空窗口的超链接代码
B. 在父窗口打开超链接的代码
C. 新开一个窗口的超链接代码
D. 在本窗口中打开一个超链接的代码
(23) <a href=URL target=_self>…</a>表示()。
A. 打开一个空窗口的超链接代码 B. 新开一个窗口的超链接代码
C. 在父窗口打开超链接的代码 D. 在本窗口打开超链接的代码
2. 填空题
(1) 在默认情况下，浏览器内已选择的超链接文本显示为，已访问的超链接显示为。
(2) HTML中的<a>标记中定义窗口弹出方式的属性为，弹出方式分别为。
(3) 在页面A.html中使用“<a name="chapter_1">第一章</a>”设置了锚点，要从页面B.html跳转到页面A设置的锚点处，其HTML的用法是。
(4) 设置链接目标的打开方式时，表示在一个空的框架中打开目标网页。
(5) 是网页与网页之间联系的纽带，也是网页的重要特色。
3. 简答题
(1) 绝对路径、相对路径和基准地址的区别与联系是什么？
(2) 怎样在单击链接时打开新窗口？
(3) 在相对链接中，有时会看到“· ”和“·· ”两个符号，它们的含义是什么？
(4) 什么是超链接？锚点链接和普通的超链接有什么相同和不同的地方？
(5) 链接网页的“目标”位置有几种？
5.3学 生 实 验
1. 根据下面提供的素材，找到每一个链接对应的网址，仿照实验4相册的例子，利用无序列表完成页面编码，如图59所示。
图59文字链接
2. 根据下面提供的素材，利用嵌套列表或者定义列表的方法完成页面编码，如图510所示。
图510嵌套列表或定义列表
3. 根据提供的素材(见文件hw53.doc)，制作一个图片链接，如图511所示，单击每个图片，在新窗口中显示对应的内容。
图511图片链接