HTML教程 06第六章.docx

1、HTML教程 06第六章第六章超链接所谓超链接（hyperlink），就是当单击某个字或图片时，就可以打开另一个网页或画面。它的作用对网页来说极其重要，可以说是互联网的灵魂，是HTML最强大和最有价值的功能。超链接简称链接（link）。6.1超链接基本知识首先介绍URL的概念。URL（Uniform Resoure Locator：统一资源定位器）是Internet文件在互联网上的地址。在这个数据里可以包括以何种协议链接、要链接到哪一个地址、链接地址的端口（port）号以及服务器（server）里页面的完整路径和页面名称等信息。好比一个街道的地址，它使用数字和字母按一定顺序排列以确定一个地址。

2、比如，要是有一人，他的联系方式是：100035 北京市东城区八道湾胡同220号 吕布，你会想到，吕布是一个人名，他住在北京市东城区一个叫做八道湾的胡同里,邮政编码是100035。它的住宅在220号。同样道理，你也可以分解一个URL。比如： transfer protocol，因为它是用来转换网页的协议）。有时也使用ftp（file transfer protocol），意为文件传输协议，主要用来传输软件和大文件（许多做软件下载的网站就使用ftp作为下载的网址），还有telenet（远程登录），主要用于远程交谈以及文件调用等，意思是浏览器正在阅读本地盘外的一个文件，而不是一个远程计算机（现在te

3、lnet不太常用了）。让我们回到上面提到的URL。第二部分是。这是主机的名字，表示要访问的文件存放在名为www的服务器里，该服务器登记在域名之下。多数公司或企业有一个指定的服务器作为对外的网上站点，叫做www。所以，在你进行网上浏览时，如果你拿不准URL的名字，在www后加上公司的域名是个好办法。比如：或。另外，还要了解什么是绝对地址（路径）和相对地址（路径）。绝对地址或路径是将服务器上磁盘驱动器名称和完整的路径写出来，同时也会表现出磁盘的目录结构；相对地址是相对于当前HTML文档所在目录或站点根目录的路径。对于Internet来说还比较简单，因为人们引用Internet上的文件一般用绝对路径

4、。但对于本机来说，就需要详细了解绝对路径和相对路径的写法了，因为人们开发站点、设计网页，一般是在本机上先做好，然后上传到网上。而在本机上设计的整站，页面在互相链接时，一般使用的是相对路径，这样传到网络服务器上，不会影响页面之间的链接关系。举例来说，现在有一个页面index.html，在这个页面中链接有一张图片picture.jpg，它们的绝对路径如下（这里假设使用的是Windows系列操作系统）： c:mywebindex.html c:mywebimgpicture.jpg如果使用绝对路径c:mywebimgpicture.jpg来链接图片，那么在自己的计算机上一切正常，因为确实可以在c:m

5、ywebimg下找到picture.jpg文件。但是当把网站上传到服务器上时，就很可能出错，因为网站可能用服务器的C盘，也可能是D盘，也可能在www或aa等目录下，也就是说在服务器上很可能不存在c:mywebimg路径。此时，就要用到相对路径了。所谓相对路径，就是文件相对于自己的路径。例如，index.html中链接picture.jpg，因为该图形文件就在index.html所在目录的img子目录中，所以可以使用img/picture.jpg来定位文件。这样，无论今后将这些文件放在服务器上的哪个目录下，只要它们之间的相对位置不变，就不会出错。在编程中，使用“./”表示当前目录的上一级目录，“

6、././”表示上上级目录，依此类推。再看一个例子： c:mywebwebindex.html c:mywebimgpicture.jpg此时，要在index.html中链接picture.jpg文件，该怎样用相对链接表示呢？index.html要“找到”picture.jpg文件，首先需要到它所在的子目录web的上级目录中，然后从上级目录中找img子目录，就可在其中找到picture.jpg文件了。因此index.html中要找到picture.jpg，相对路径就是./img/picutre.jpg。再看第三个例子： c:mywebmainindex.html c:mywebhtmlchapt

7、er11_1.html c:mywebhtmlchapter11_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.

8、html中要找到1_2.html，因为它们在同一目录下，相对路径就是1_2.html。总结一下，对于相对路径来说，设置起来一般有如下三种写法： 同一目录下的文件，只要输入链接文件名即可，如01.html。 上一级目录中的文件，在目录名和文件名之前加入“./”。上一级的上一级，则在目录名和文件名之前加入././，依此类推。 下一级目录：输入目录名和文件名，如abc/def/mainindex.html，表示当前目录下的abc子目录下的def子目录下的index.html文件。还有一种特殊的目录：根目录（root directory）。根目录常常在大型站点需要放置在几个服务器上、或者一个服务器上同

9、时放置多个站点时使用。其书写形式很简单，只需要以“/”开始，表示根目录，之后是文件所在的目录名和文件名。这是一种绝对路径。讲了这么多，该怎样在网页中链接文件呢？这就需要使用超链接标记了。6.2基本的超链接标记超链接的语法根据其链接对象的不同而有所变化，但都是基于标记的，主要语法为：或者：其中，href是hypertext refernce（超文本引用）的缩写。target用于指定如何打开链接的网页，有以下几个值： _blank：打开一个新的浏览器窗口显示。 _self：用网页所在的浏览器窗口显示，是默认设置。 _parent：在上一级窗口打开，常用在框架页面中，请参看第八章“框架”。 _top

10、：在浏览器的整个窗口打开，将会忽略所有的框架结构。在和之间，是超链接要显示的文字或图片。当用户把鼠标放在这些文字或图片上时，一般来说鼠标会变成手的形状，此时单击文字或图片，超链接就会发生作用了。【例1】最基本的超链接。 itsway - 超链接 用新窗口打开新浪 用本窗口打开搜狐 在IE中的显示结果如下图所示。如果单击“用新窗口打开新浪”，就会新开一个浏览器窗口打开新浪网站；如果单击“用本窗口打开搜狐”，就会用本浏览器窗口打开搜狐网站。此时单击按钮工具栏上的“后退”按钮，可以返回本页面。再看一个例子：本机的网页如何互相链接。【例2】本机网页的互相链接。假设我们用的是Windows操作系统，并且

11、当前目录是c:htmlchap6，在该目录下有一个文件chap6_2a.html。当前目录下还有一个子目录test，其中存放着另一个文件chap6_2b.html。其中，chap6_2a.html的内容如下： itsway - 超链接 窗前明月光，疑是地上霜。 举头望明月，低头思故乡。 打开chap6_2b.html chap6_2b.html的内容如下： itsway - 超链接 江上往来人，但爱鲈鱼美。 君看一叶舟，出入风波里。 打开chap6_2a.html 在IE中，两个网页的显示结果如下图所示。当单击里面的超链接时，它们之间就会相互打开。这里写两首诗的目的，是为了让读者更好地区分这两

12、个网页。本题也可以用绝对链接来实现，只要把对应的语句改成：打开chap6_2b.html和打开chap6_2a.html即可。这里就不再演示了，请读者自己练习。6.3锚（anchor）当创建的网页内容多、页面很长时，还可以在网页内部进行跳转，这就需要定义“锚（anchor）”。有的书上叫做“书签”，但我还是觉得叫“锚”更形象，因为锚用于船舶，当船只靠岸后，一般需要扔进水里一个巨大的铁钩，以便钩住水底的石头或沉于淤泥中，这样船只就不容易飘走了。这就是锚。大船的锚甚至重达几百斤。同样，在一个篇幅巨大的网页中，也可以定义一些锚，以便快速定位。定义锚的主要语法为：文字其中，属性name是不可缺少的，它

13、的值也就是锚名，而“文字”并非是必须的。定义了锚之后，就可以用下面的语法格式进行跳转了：链接的文字【例3】页内锚的使用。 itsway - 超链接 三国演义 第一回宴桃园豪杰三结义斩黄巾英雄首立功 第二回张翼德怒鞭督邮何国舅谋诛宦竖 第三回议温明董卓叱丁原馈金珠李肃说吕布 并非必须的文字 第一回宴桃园豪杰三结义斩黄巾英雄首立功 滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。青山依旧在，几度夕阳红。白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事，都付笑谈中。 调寄临江仙 话说天下大势，分久必合，合久必分。 第二回张翼德怒鞭督邮何国舅谋诛宦竖且说董卓字仲颖，陇西临洮人也，官拜河东太守，自

14、来骄傲。当日怠慢了玄德，张飞性发，便欲杀之。玄德与关公急止之曰；“他是朝廷命官，岂可擅杀？”飞曰：“若不杀这厮，反要在他部下听令，其实不甘！二兄要便住在此，我自投别处去也！”玄德曰：“我三人义同生死，岂可相离？不若都投别处去便了。”飞曰：“若如此，稍解吾恨。” 第三回议温明董卓叱丁原馈金珠李肃说吕布且说曹操当日对何进曰：“宦官之祸，古今皆有；但世主不当假之权宠，使至于此。若欲治罪，当除元恶，但付一狱吏足矣，何必纷纷召外兵乎？欲尽诛之，事必宣露。吾料其必败也。”何进怒曰：“孟德亦怀私意耶？”操退曰：“乱天下者，必进也。”进乃暗差使命，赍密诏星夜往各镇去。 在IE中的显示结果如下图所示。如果单击页

15、面上端的各章标题，则会跳转到相应的锚定义处，从而可以直接阅读各章，而不必用鼠标或键盘上的翻页键滚屏了。在定义第一个锚时，在锚中增加了“并非必须的文字”，从而显示在页面上，但在后面定义锚chap2时，就没有加文字；在定义锚chap3时，把章标题直接作为锚的文字了。可见：锚文字并非必须的，但也可以利用。锚名却是必须的，因为我们要利用锚名进行跳转。在这个文件的首部分，有以下三句话用来跳转到后面定义的锚名处：第一回宴桃园豪杰三结义斩黄巾英雄首立功第二回张翼德怒鞭督邮何国舅谋诛宦竖第三回议温明董卓叱丁原馈金珠李肃说吕布定义锚之后，不仅可以在页内进行跳转，而且还可以进行网页间的跳转。如果要跳转到另一个页面

16、中的锚的定义位置，语法为：链接的文字其中，“网页文件名”需要加上相对路径或绝对路径。注意：href属性赋的值若包含锚的名字，必须在锚名前加一个“#”号。【例4】页间锚的使用。假设例3的HTML文件名为chap6_3.html，本例的HTML文件和它在同一个目录下，需要建立超链接直接跳转到chap6_3.html中的各章首部。参考代码如下。 itsway - 超链接 三国演义 第一回宴桃园豪杰三结义斩黄巾英雄首立功 第二回张翼德怒鞭督邮何国舅谋诛宦竖 第三回议温明董卓叱丁原馈金珠李肃说吕布 在IE中的显示结果如下图所示。如果单击各章标题，则会打开一个新的浏览器窗口，直接显示chap6_3.htm

17、l中的各章首部。6.4电子邮件、FTP和Telnet超链接还可以用来发电子邮件，语法为：链接的文字这就创建了一个自动发送电子邮件的链接，“mailto:”（注意其中有一个半角的冒号）后边紧跟想要制动发送的电子邮件的地址，例如：给站长发email显示结果如下图所示。如果单击它，系统就会打开电子邮件发送软件（如Outlook Express或Foxmail），从而可以写邮件了。在网络中还存在一种FTP（File Transfer Protocol）协议，即文件传输协议，通过它可以下载文件。语法为：链接的文字例如：北京大学FTP站点运行这段代码，单击超链接就可以进入北大的FTP站点了。但是，FTP需

18、要获得许可才能在网上下载或传播文件，因此需要从服务器管理员处取得登录的权限。不过有一些FTP服务器可以匿名访问，从而能获得一些公开的数据。FTP现在用的越来越少了，因为通过使用最广泛的HTTP协议的超链接，一样可以下载文件。可以这样直接使用：文件下载例如：文件下载还可以通过Telnet协议登录网上的一些BBS网址，这也是一种远程登录方式。语法为：链接的文字例如：清华大学BBS站点运行这段代码，单击超链接就可以进入清华的BBS站点了。不过BBS现在用的也不多了。网络上极多的论坛都是用HTML、CSS、JavaScript以及ASP、ASP.NET、Java或PHP等制作的，一般不使用Telnet

19、协议。超链接在很多地方都会出现。例如在后面将要学到的、等标记中。以前学习的、标记，也都有关于超链接的内容。下面我们回过头来，继续深入学习和标记的用法。6.5http-equiv属性的进一步学习在第二章中曾经学过标记的http-equiv属性，现在学习了超链接等内容之后，可以更全面地学习http-equiv属性设置了。一、强制打开新窗口强制页面在当前窗口中以独立的页面显示，可以防止自己的网页被别人当作一个frame页调用。至于什么是frame，将在后面的学习中讲到。语法为： 在该语法中，windows_target表示新网页的打开方式，content中设置的_top则代表打开的是一个独立页面。【

20、例5】下面的代码会打开一个独立页面。 itsway-HTML教程 本页面将作为独立的页面打开二、设置网页的定时跳转在浏览网页时经常会看到一些欢迎信息的界面，在经过一段时间后，这一页面会自动跳转到其他页面中，这就是网页的跳转。使用http-equiv属性的refresh值可以轻松实现这一功能，格式为： 在该语法中，refresh表示网页的刷新，跳转时间以秒为单位，url是在经过若干秒后跳转到的新网页地址。例如： 会在5秒后自动跳转到。【例6】下面的代码会在10秒后自动跳转到XX。 itsway-HTML教程 您好，本页在10秒后将自动跳转到XX网站在浏览器中的显示结果如下图所示。在10秒之后，网

21、页自动跳转到XX网站，如下图所示。如果链接地址被省略，网页的功能就变成了刷新页面本身，这在不断更新数据的页面中常常会遇到。刷新页面的代码如下： 它每隔1200秒也就是20分钟刷新代码所在的页面一次。三、设置网页的过渡效果这部分内容属于HTML的高级技巧，没有兴趣的朋友可以不看。:-)在浏览某些网站时，常常会在进入或退出某个网页时看到一些过渡效果，使网页看起开更加生动。这些效果可以在meta标记中实现。语法为： 或者： 其中，Page-Enter表示进入页面，Page-Exit表示离开页面。过渡效果持续时间以秒为单位，过渡方式的编号如下表所示。编号过渡方式编号过渡方式0盒状收缩12随意溶解1盒状放射13从左右两端向中间展开2园形收缩14从中间向左右两端展开3园形放射15从中间向上下两端展开4由下往上16从右上角向左下角展开5由上往下17从左下角向右上角展开6从左到右18从右下角向左上角展开7从右到左19从左上角向右下角展开8垂直百叶窗20从左下角向右上角展开9水平百叶窗21水平线状展开10水平格状百叶窗22垂直线状展开11垂直格状百叶窗23随机产生一种过渡方式