HTML教程 06第六章.docx
《HTML教程 06第六章.docx》由会员分享，可在线阅读，更多相关《HTML教程 06第六章.docx（19页珍藏版）》请在冰点文库上搜索。
HTML教程06第六章
第六章 超链接
所谓超链接（hyperlink），就是当单击某个字或图片时，就可以打开另一个网页或画面。
它的作用对网页来说极其重要，可以说是互联网的灵魂，是HTML最强大和最有价值的功能。
超链接简称链接（link）。
6.1 超链接基本知识
首先介绍URL的概念。
URL（UniformResoureLocator：
统一资源定位器）是Internet文件在互联网上的地址。
在这个数据里可以包括以何种协议链接、要链接到哪一个地址、链接地址的端口（port）号以及服务器（server）里页面的完整路径和页面名称等信息。
好比一个街道的地址，它使用数字和字母按一定顺序排列以确定一个地址。
比如，要是有一人，他的联系方式是：
100035北京市东城区八道湾胡同220号吕布，你会想到，吕布是一个人名，他住在北京市东城区一个叫做八道湾的胡同里,邮政编码是100035。
它的住宅在220号。
同样道理，你也可以分解一个URL。
比如：
transferprotocol，因为它是用来转换网页的协议）。
有时也使用ftp（filetransferprotocol），意为文件传输协议，主要用来传输软件和大文件（许多做软件下载的网站就使用ftp作为下载的网址），还有telenet（远程登录），主要用于远程交谈以及文件调用等，意思是浏览器正在阅读本地盘外的一个文件，而不是一个远程计算机（现在telnet不太常用了）。
让我们回到上面提到的URL。
第二部分是。
这是主机的名字，表示要访问的文件存放在名为www的服务器里，该服务器登记在域名之下。
多数公司或企业有一个指定的服务器作为对外的网上站点，叫做www。
所以，在你进行网上浏览时，如果你拿不准URL的名字，在www后加上公司的域名是个好办法。
比如：
或。
另外，还要了解什么是绝对地址（路径）和相对地址（路径）。
绝对地址或路径是将服务器上磁盘驱动器名称和完整的路径写出来，同时也会表现出磁盘的目录结构；相对地址是相对于当前HTML文档所在目录或站点根目录的路径。
对于Internet来说还比较简单，因为人们引用Internet上的文件一般用绝对路径。
但对于本机来说，就需要详细了解绝对路径和相对路径的写法了，因为人们开发站点、设计网页，一般是在本机上先做好，然后上传到网上。
而在本机上设计的整站，页面在互相链接时，一般使用的是相对路径，这样传到网络服务器上，不会影响页面之间的链接关系。
举例来说，现在有一个页面index.html，在这个页面中链接有一张图片picture.jpg，它们的绝对路径如下（这里假设使用的是Windows系列操作系统）：
●c:
\myweb\index.html
●c:
\myweb\img\picture.jpg
如果使用绝对路径c:
\myweb\img\picture.jpg来链接图片，那么在自己的计算机上一切正常，因为确实可以在c:
\myweb\img下找到picture.jpg文件。
但是当把网站上传到服务器上时，就很可能出错，因为网站可能用服务器的C盘，也可能是D盘，也可能在www或aa等目录下，也就是说在服务器上很可能不存在c:
\myweb\img路径。
此时，就要用到相对路径了。
所谓相对路径，就是文件相对于自己的路径。
例如，index.html中链接picture.jpg，因为该图形文件就在index.html所在目录的img子目录中，所以可以使用img/picture.jpg来定位文件。
这样，无论今后将这些文件放在服务器上的哪个目录下，只要它们之间的相对位置不变，就不会出错。
在编程中，使用“../”表示当前目录的上一级目录，“../.../”表示上上级目录，依此类推。
再看一个例子：
●c:
\myweb\web\index.html
●c:
\myweb\img\picture.jpg
此时，要在index.html中链接picture.jpg文件，该怎样用相对链接表示呢？
index.html要“找到”picture.jpg文件，首先需要到它所在的子目录web的上级目录中，然后从上级目录中找img子目录，就可在其中找到picture.jpg文件了。
因此index.html中要找到picture.jpg，相对路径就是../img/picutre.jpg。
再看第三个例子：
●c:
\myweb\main\index.html
●c:
\myweb\html\chapter1\1_1.html
●c:
\myweb\html\chapter1\1_2.html
此时，要在index.html中链接1_1.html文件，该怎样用相对链接表示呢？
index.html要“找到”1_1.html文件，首先需要到它所在的子目录main的上级目录中，然后从上级目录中进入html子目录，再进入chapter1子目录，就可以找到picture.jpg文件了。
因此index.html中要找到1_1.html，相对路径就是../html/chapter1/1_1.html。
相反，如果在1_1.html中要找到index.html，相对路径就是../../main/index.html；如果在1_1.html中要找到1_2.html，因为它们在同一目录下，相对路径就是1_2.html。
总结一下，对于相对路径来说，设置起来一般有如下三种写法：
●同一目录下的文件，只要输入链接文件名即可，如01.html。
●上一级目录中的文件，在目录名和文件名之前加入“../”。
上一级的上一级，则在目录名和文件名之前加入"../../"，依此类推。
●下一级目录：
输入目录名和文件名，如abc/def/main\index.html，表示当前目录下的abc子目录下的def子目录下的index.html文件。
还有一种特殊的目录：
根目录（rootdirectory）。
根目录常常在大型站点需要放置在几个服务器上、或者一个服务器上同时放置多个站点时使用。
其书写形式很简单，只需要以“/”开始，表示根目录，之后是文件所在的目录名和文件名。
这是一种绝对路径。
讲了这么多，该怎样在网页中链接文件呢？
这就需要使用超链接标记了。
6.2 基本的超链接标记
超链接的语法根据其链接对象的不同而有所变化，但都是基于标记的，主要语法为：
……
或者：
……
其中，href是hypertextrefernce（超文本引用）的缩写。
target用于指定如何打开链接的网页，有以下几个值：
●_blank：
打开一个新的浏览器窗口显示。
●_self：
用网页所在的浏览器窗口显示，是默认设置。
●_parent：
在上一级窗口打开，常用在框架页面中，请参看第八章“框架”。
●_top：
在浏览器的整个窗口打开，将会忽略所有的框架结构。
在和之间，是超链接要显示的文字或图片。
当用户把鼠标放在这些文字或图片上时，一般来说鼠标会变成手的形状，此时单击文字或图片，超链接就会发生作用了。
【例1】最基本的超链接。
itsway--超链接用新窗口打开新浪
用本窗口打开搜狐
在IE中的显示结果如下图所示。
如果单击“用新窗口打开新浪”，就会新开一个浏览器窗口打开新浪网站；如果单击“用本窗口打开搜狐”，就会用本浏览器窗口打开搜狐网站。
此时单击按钮工具栏上的“后退”按钮，可以返回本页面。
再看一个例子：
本机的网页如何互相链接。
【例2】本机网页的互相链接。
假设我们用的是Windows操作系统，并且当前目录是c:
\html\chap6，在该目录下有一个文件chap6_2a.html。
当前目录下还有一个子目录test，其中存放着另一个文件chap6_2b.html。
其中，chap6_2a.html的内容如下：
itsway--超链接窗前明月光，疑是地上霜。
举头望明月，低头思故乡。
打开chap6_2b.html
chap6_2b.html的内容如下：
itsway--超链接江上往来人，但爱鲈鱼美。
君看一叶舟，出入风波里。
打开chap6_2a.html
在IE中，两个网页的显示结果如下图所示。
当单击里面的超链接时，它们之间就会相互打开。
这里写两首诗的目的，是为了让读者更好地区分这两个网页。
本题也可以用绝对链接来实现，只要把对应的语句改成：
打开chap6_2b.html
和
打开chap6_2a.html
即可。
这里就不再演示了，请读者自己练习。
6.3 锚（anchor）
当创建的网页内容多、页面很长时，还可以在网页内部进行跳转，这就需要定义“锚（anchor）”。
有的书上叫做“书签”，但我还是觉得叫“锚”更形象，因为锚用于船舶，当船只靠岸后，一般需要扔进水里一个巨大的铁钩，以便钩住水底的石头或沉于淤泥中，这样船只就不容易飘走了。
这就是锚。
大船的锚甚至重达几百斤。
同样，在一个篇幅巨大的网页中，也可以定义一些锚，以便快速定位。
定义锚的主要语法为：
文字
其中，属性name是不可缺少的，它的值也就是锚名，而“文字”并非是必须的。
定义了锚之后，就可以用下面的语法格式进行跳转了：
链接的文字
【例3】页内锚的使用。
itsway--超链接
三国演义
第一回 宴桃园豪杰三结义 斩黄巾英雄首立功
第二回 张翼德怒鞭督邮 何国舅谋诛宦竖
第三回 议温明董卓叱丁原 馈金珠李肃说吕布
并非必须的文字
第一回 宴桃园豪杰三结义 斩黄巾英雄首立功 滚滚长江东逝水，浪花淘尽英雄。
是非成败转头空。
青山依旧在，几度夕阳红。
白发渔樵江渚上，惯看秋月春风。
一壶浊酒喜相逢。
古今多少事，都付笑谈中。
——调寄《临江仙》
话说天下大势，分久必合，合久必分。
……
第二回 张翼德怒鞭督邮 何国舅谋诛宦竖 且说董卓字仲颖，陇西临洮人也，官拜河东太守，自来骄傲。
当日怠慢了玄德，张飞性发，便欲杀之。
玄德与关公急止之曰；“他是朝廷命官，岂可擅杀？
”飞曰：
“若不杀这厮，反要在他部下听令，其实不甘！
二兄要便住在此，我自投别处去也！
”玄德曰：
“我三人义同生死，岂可相离？
不若都投别处去便了。
”飞曰：
“若如此，稍解吾恨。
”……
第三回 议温明董卓叱丁原 馈金珠李肃说吕布 且说曹操当日对何进曰：
“宦官之祸，古今皆有；但世主不当假之权宠，使至于此。
若欲治罪，当除元恶，但付一狱吏足矣，何必纷纷召外兵乎？
欲尽诛之，事必宣露。
吾料其必败也。
”何进怒曰：
“孟德亦怀私意耶？
”操退曰：
“乱天下者，必进也。
”进乃暗差使命，赍密诏星夜往各镇去。
……