Web编程入门经典 第2章 链接和导航

2017-03-27
8192

第2章 链接和导航Web 与其他媒体的实质区别是Web 页面可以包含了链接，利用链接可以直接转向其他页面（甚至给定页面的特定部分）。链接通常称为超链接，Web 的非凡成就与其息息相关。通过超链接，访

第2章 链接和导航

Web 与其他媒体的实质区别是Web 页面可以包含了链接，利用链接可以直接转向其他页面（甚至给定页面的特定部分）。链接通常称为超链接，Web 的非凡成就与其息息相关。通过超链接，访问者可以在各个Web 站点之间导航，方式是单击页面上的单词、短语和图像等。 普通的Web 站点由一组页面组成，用户通过超文本链接在各个页面之间导航。这些页面通常也含指向其他Web 站点的链接，以及指向所在站点的其他页面的链接。

本章将介绍如何创建站点中不同页面之间的链接，如何创建指向站点页面中特定位置的链接，以及如何创建指向其他站点（称为外部站点）的链接。

如同第1章中户介绍的标记描述了文档的结构一样，链接描述了文档的哪些部分可以链接到其他文档的相应部分。因此，链接形成了不同文档之间的相互关系。

在学习链接的时候，了解一些关键概念也是非常重要的，包括如何将站点结构化到不同的文件夹中（文件夹也称为目录），如何使用相对URL 链接站点内的页面。 在本章中将介绍以下内容：

● 如何构造文件夹用于存放Web 站点的页面

● 如何链接站点内的不同页面

● 如何链接到站点中页面的特定部分

● 如何链接到其他站点

本章仅介绍如何链接Web 页面，而不会介绍链接或嵌入其他文件机制，特别是元素（第7章中讨论样式表时将介绍该元素）或元素和元素（第3章中将介绍这些元素）。

2.1 基本链接

为了介绍链接，首先查看几个简单的例子。一旦了解链接的基本概念，您将发现仍有许多知识需要学习。下面将逐步介绍这些知识。

利用元素可以指定链接。在起始标签和结束标签之间的文本组成链接的内容，用户可以在浏览器中单击它们。下面部分将介绍如何链接到其他文档和电子邮件地址。

2.1.1 链接到其他文档

为了链接到其他文档，起始标签需要附带属性href ，href 属性的值是链接页面的地址。

,

下面的示例是ch02_eg0l.html文档的元素。该页面包含指向第二个页面/upload/12/bcbuqravobf.html 的链接：

Return to the index page.

只要/upload/12/bcbuqravobf.html 文件与ch02_eg0l.html文件处于相同的文件夹中，则在单击“index page ”时，就会在相同的窗口中加载/upload/12/bcbuqravobf.html 页面，并且替换当前的ch02_eg0l.html页面。如图2-1所示，元素的内容形成了链接。

图2-1

注意：

这就是本章下载代码中的链接的工作方式。记住，可以单击浏览器中的View 菜单，然后选择View Source选项来查看HTML 或XHTML 页面的源代码。

虽然可以将各种类型的元素放置在元素中，但最好尽量使链接简明，并且使元素中的内容实际地描述链接的目的页面。由于元素中的内容比其周围的文本醒目（通常以不同的颜色显示），所以许多人在需要进入下一个页面时会简单浏览页面以获得相应的链接，而不会完整地阅读当前页面。因此，如果页面中所有链接的内容只是“单击此处(click here) ”，则用户很可能不会长久地停留在该站点中，因为这些链接无法清楚并快速地告知他们目的页面的信息。

注意：

许多Web 设计人员也在元素中使用图像（下一章中将介绍相关内容），但是在使用图像时，必须确保图像能够清楚地指示链接的目的页面。

如果希望链接到不同的站点，则可以使用下面的语法。其中指定了链接的目的页面的完整URL(Uniform Resource Locator ，统一资源定位符) ，而不仅仅是文件名ch02_eg02.html(本章后面将详细介绍URL) ：

Why not visit the Wrox Web site?

这个链接指向Wrox 的Web 站点。href 属性的值与用户访问Wrox 的Web 站点时在浏览器中输入的内容相同。这种URL 称为限定URL ，因为它包含了该Web 站点的域名。

,

当希望链接到相同Web 站点中的某个页面时，可以使用称为“相对URL ”的简写形式；本章的第一个示例使用的就是这种URL ，其中href 属性的值不是以域名起始的。这样不仅不需要输入完整的URL ，而且具有其他优点。

在链接中使用title 属性也是良好的编程习惯，因为在大多数浏览器中，当用户将光标悬停在链接上时，使用title 属性将显示一个工具提示（在屏幕上显示说明标题的气泡状图标）；另外，对于语音浏览器——通常由视力受损人员使用——将会大声读出标题）。

title 属性的值应当能够描述链接的目的页面。当使用图像作为链接时，这一点尤其重要。例如，下面给出了到Google 主页的链接(ch02_eg03.html)：

Google is a very popular search engine.

图2-2显示了title 属性，当用户将光标悬停在链接上时，该属性给出了链接的更多相关信息。

图2-2

需要注意的是，元素中的所有内容都将显示为链接，包括文本或图像周围的空格，因此最好避免直接在起始标签和结束标签之间使用空格。例如，下面的链接中具有起始和结尾空格(ch02_eg04.html)：

Why not visit the Wrox Web site ? 如图2-3所示，链接中的空格也将带有下划线。

图2-3

因此，最好在起始标签和结束标签的外部使用空格，如下所示：

Why not visit the Wrox Web site ?

当然，在元素内的单词之间仍然需要使用空格，只要不在链接的开头和末尾使用它们即可。

,

2.1.2 链接到e-mail 地址

您很可能已经看到，许多站点中的链接显示e-mail 地址。当单击这样的链接披时，将在默认的e-mail 程序中打开一封新的电子邮件，开且准备好发送电子邮件到链接指向的地址。

为了创建指向e-mail 地址的链接，需要使用元素的如下形式的语法： name@example.com

其中，href 属性的值以关键字mailto 开头，后面紧跟一个冒号，然后是e-mail 地址。与其他链接一样，元素中的内容将是链接在浏览器中的可见部邻分，因此可以选择使用如下语句：

E-mail us

或者，如果想让用户在单击e-mail 地址之前看到该地址，可以采用如下语句：

For sales enquiries e-mail sales@example.com.

但是，使用这种技术也存在如下的缺陷：一些恶意的Web 用户会使用小程序自动搜索Web 站点中的e-mail 地址。搜索到e-mail 地址之后，他们就会向这些地址发送垃圾邮件。 在创建到e-mail 地址的链接时，还有其他一些主要的备选方法：

● 使用e-mail 表单，从而访问者在Web 站点上填写该表单以发送e-mail 。接收到邮件后，可以正常回复它，因为自动程序无法根据联系人表单获得,e-mail 地址。e-mail 表单的应用需要CGI 脚本或者服务器端的脚本语言，例如ASP.net 、JSP 、PHP 、Cold Fusion和Ruby 。第5章中将给出关于e-mail 表单的示例。

● 利用JavaScript 将e-mail 地址写进Web 页面（第12章将介绍这方面的内容）。这种术背后的主要思想是，在Web 上搜索e-mail 地址的程序无法读取地址的JavaScript 版本。 前面已经介绍如何创建最基本的链接，下面将研究关于链接的更具深度的主题。为了深入了解页面之间的链接，您需要阅读后面的几页内容，其中将详细解释如何将Web 站点中的文件组织到文件夹中，并且详细地分析URL(URL是一种地址，用于标识Web 站点上的页面和其他资源) 。

2.2 理解目录和目录结构

目录是Web 站点中文件夹的名称（如同硬盘中包含不同的文件夹一样，Web 站点包含多个目录）。通常一个Web 站点将包含多个目录，其中每个目录包含Web 站点的不同部分。例如，一个具有多个分部的大型Web 站点将为每个分部准备一个独立的目录，并且不同类型的文件（例如图像和样式表）通常保存在各自的特定目录中。

如同可能将硬盘中的文件组织到单独的文件夹中一样，将Web 站点中的文件组织到目录

,

中非常重要，这样就能够更加方便地找到需要的文件，并且能够控制所有文件。可以设想一下，如果将Web 站点中使用的所有文件放置到同一个文件夹中，对这些文件的操作将会很快变得非常复杂。

图2-4中给出了一个新站点的目录结构的示例，站点的每一部分具有一个独立的文件夹，而不同类型的文件也具有独立的文件夹。在主文件夹中有专门用于存放图像、脚本和样式表的文件夹。另外注意，Music 部分分别为Features 、MP3和Reviews 准备了单独的文件夹。

另外，类似于图2-2所示的目录结构能够帮助用户导航站点，而不用知道确切的文件名：并且用户可以选取他们想要的部分进行浏览，例如从http://www.ExampleNewsSite.com/Business/中获得商业新闻， 从http://www.ExampleNewsSite.com/Entertainment/Music/中获得音乐页面。

使Web 站点具有良好的组织结构是非常重要的。一个小型的Web 站点可能会以令人惊讶的速度快速成长，并且包含的文件远远超出最初设想的数量。因此，在开始构建任何类型的Web 站点时，都应当首先创建能够适应这种快速成长的优秀目录结构。

在学习链接相关内容的过程中了解一些用于描述目录结构和目录间关系的术语是非常重要的，因此重新查看图2-4中的目录结构示例：

图2-4

● 保存整个Web 站点的主目录称为Web 站点的根目录；在本示例中，根目录是exampleNewSite.com 。

● 位于其他目录中的目录称为子目录。这里，Film 是Entertainment 的子目录。 ● 包含其他目录的目录称为父目录。这里，Entertainment 是Arts 、Film 、Music 和TV 的父目录。

,

2.2.1 链接的目标位置

在本章开始部分的示例中，创建了到同一个目录中不同页面的链接和到不同Web 站点中页面的链接。

现在您已经了解了如何将站点组织到单独的目录中，接下来需要学习如何链接到当前站点不同文件夹中的页面——例如，如何从主页面链接到Entertainment 部分中的一个页面，该部分位于Entertainment 文件夹中。

可以在站点的每一个链接中使用完整的URL(完整的URL 也称为绝对URL ，在Web 浏览器的地址栏中输入的就是这种URL) ，尽管最好使用相对URL(相对URL 是一种简写形式，用于链接站点不同文件夹中的文件) 。相对URL 指定某个文件相对于当前文件的位置。

在了解如何创建相对URL 以及相对URL 与绝对URL 的区别之前，您需要掌握URL 的结构。

2.2.2 URL的组成

URL 由几个部分组成，每一部分向Web 浏览器提供的信息有助于用户找到想要的页面。首先通过查看最常见的URL 来帮助您理解URL 的各个部分。图2-5中所示的URL 有3个关键部分：模式、主机地址和文件路径，下面的小节中将依次讨论它们。

主机地址

模式

图2-5 文件路径

1．模式

模式标识链接到的URL 的类型，因而也标识了检索资源的方式。例如，大多数Web 页面使用超文本传输协议(Hypertext Transfer Protocol，HTTP) 传递信息，这就是大多数Web 页面以http://开头的原因，但是在位用网上银行或者下载大型文件时，您可能也注意到了其他前缀。

表2-1列出了最常见的模式。

表2-1

,

2．主机地址

主机地址是Web 站点的地址，利用它可以找到Web 站点。主机地址的形式可以是IP 地址(4组0到255之间的数字，例如192.0.110.255) ，也可以是站点的域名（更为常见的形式），例如www.wrox.com 。

注意：

可以利用IP 地址找到任何连接到Internet 的计算机；但是，域名比IP 地址更容易记住，因此更为常用。但是，实际上所有的域名在后台都将被转換为保存Web 站点的计算机的IP 地址，转換的方法是咨询域名服务器(Domain Name Server ，DNS ) ，DNS 中包含了运行Web 站点的计算机的域名和IP 地址的目录。

注意，WWW 实际上不是域名的组成部分，尽管它通常用于主机地址中——它与所使用的HTTP 协议无关。

3．文件路径

文件路径始终以正斜杠(/)开始，并且可能包含一个或多个目录名（目录是Web 服务器上的文件夹的别名）；每个目录名以正斜杠字符(/)隔开，并且文件路径可能以文件名结束。下面的Overview.html 就是一个文件名：

/books/newReleases/BeginningWebDevelopment/Overview.html

如果文件路径中不包含文件名，则Web 服务器通常执行以下3种操作中的一种（取决于它的配置）：

● 返回一个默认文件（对于以HTML 编写的Web 站点，默认文件是index.html 或default.html ）

● 提供所在目录中的文件列表

● 显示一条消息，表明无法找到所访问的页面或者无法浏览文件夹中的文件

4．URL 的其他部分

URL 还可以包含许多不常见的其他部分。

证书用于为站点中的密码保护部分指定用户名和密码。证书位于主机地址的前面，通过@符号与主机地址隔开。注意，用户名和密码以冒号隔开。下面的URL 中显示了用户名administrator 和密码letmein ：

端口类似于Web 服务器的门。一个Web 服务器通常具有几个服务器程序，这些服务器程序运行于同一台机器中，每个程序使用不同的端口进行通信。例如，http://和https://默

,

认情况下使用不同的端口(标准http://通常使用端口80，https://通常使用端口443) 。

端口的使用机会很多，但是如果指定端口，则应该将其放在域名的后面，并且以冒号隔开。例如，如下地址指定了运行在8080端口上的Web 服务器：

段标识符位于文件名的后面，用于指示页面的特定部分，浏览器应该直接转到该部分。它们通常用于长页面中，以方便用户快速到达页面的特定部分，而不需要滚动整个页面以查找该位置。

段标识符以英镑符号#与文件名隔开，如下所示：

本章后面的部分中将详细介绍段标识符。

路径参数用于向服务器程序传递额外的信息。它们以问号(?)与URL 隔开，并且以名/值对的形式出现，名和值之间以等号隔开（如果没有问号，路径参数就相当类似于属性）。路径参数通常用于从访问者处收集信息，并向服务器上的程序传递信息，以便向访问者返回所需要的页面。这种参数通常称为查询字符串。

当使用Web 页面上的表单时，例如搜索表单或在线订购表单，浏览器能够将用户提供的信息附加在URL 中，以向服务器传递信息——此时用户不需要将路径参数输入到URL 中。

在下面的例子中，将路径参数searchTerm=HTML添加到URL 中，用于表明用户搜索术语HTML ：

2.2.3 绝对URL 和相对URL

URL 用于定位Internet 中的资源。每一个Web 页面和图像——事实上是Internet 中的每一个文件——都具有唯一的URL ，即能够用于找到特定文件的地址。Internet 中任意两个文件都不会具有相同的URL 。

如果想访问某个Web 站点中的特定页面，需要在浏览器的地址栏中输入该页面的URL 。例如，为了获得本章前面虚构的新闻站点中的电影页面，可以输入如下URL:

这是一个绝对URL ，其中包含了用于唯一标识Internet 中某个文件所需的所有信息。 绝对URL 可能很快变得相当长，并且Web 站点的每一个页面可以包含很多链接。因此，有必要了解指向Web 站点中文件的URL 的简写形式：相对URL 。

相对URL 用于指示资源相对于当前页面的位置。例如，假设您正在查看如下虚拟新闻站点的娱乐部分的索引页面：

然后您希望添加到每个分部的链接：Film 、TV 、Arts 和Music 。没有使用每个页面的完

,

整URL ，而是可以使用相对URL 。例如：

Film/index.html

TV/index.html

Arts/index.html

Music/index.html

可以确定的是，比起输入下面的地址，使用相对URL 会快很多：

您可能有兴趣知道的是，Web 浏览器仍然请求完整URL 而不是缩短的相对URL 。但是，浏览器会将相对URL 转换为完整的绝对URL 。

在站点中使用相对URL 的另一种关键优点是，用户可以方便地改变站点的域名或者将站点的某个分布复制到新站点中，而不需要改变所有的链接，因为每一个链接都相对于相同站点中的其他页面。

注意：

相对ULR 只适用于相同Web 站点的相同目录结构中的链接；不能使用它们链接到其他服务器上的页面。

下面的小节中将概述可以使用的不同类型的相对URL 。

1．相同目录

如果希望链接到或者包含相同目录中的资源，可以只使用该文件的名称。例如，为了从主页面(index.html)链接到“联系我们”页面(contactUs.html)，可以使用如下形式的相对URL:

contactUs.html

该文件位于相同的文件夹中，因此不需要指定其他任何内容。

2．子目录

图2-4中的Film 、TV 、Arts 和Music 目录都是Entertainment 目录的子目录。如果正在编写Entertainment 目录中的一个页面，可以采用如下形式的相对URL 创建到子目录的索引页面的链接：

Film/index.html

TV/index.html

Arts/index.html

Music/index.html

该种相对URL 包含了子目录名，后面紧跟一个正斜杠(/)以及希望链接到的页面的名称。 对于每一个额外的子目录，可以只添加该目录的名称，并紧跟一个正斜杠(/)。因此，

,

如果从站点根文件夹中的页面（例如站点的主页面）创建链接，则可以使用如下所示的相对URL 到达相同的页面：

Entertainment/Film/index.html

Entertainment/TV/index.html

Entertainment/Arts/index.html

Entertainment/Music/index.html

3．父目录

如果想创建从某个目录到它的父目录（包含该目录的目录）的链接，则可以使用“../”符号（两个句点或圆点，后跟一个正斜杠）。例如，为了从Music 目录中的一个页面链接到Entertainment 目录中的某个页面，可以使用如下的相对URL:

../index.html

如果想创建从Music 目录到根目录的链接，则可以重复使用“../”符号：

../ ../index.html

每一次重复使用“../”符号，就会向上到达另一个目录。

4．从根目录

也可以指示文件相对于站点的根文件夹。因此，如果想创建从站点中的任意页面到contactUs.html 页面的链接，可以使用该页面的路径，并在路径前面放置一个正斜杠。例如，如果contactUs.html 页面位于根文件夹中，只需要输入：

/contactUs.html

或者，可以使用如下形式的相对ORL 创建从站点的任意位置到Music 部分的索引页面的链接：

/Entertainment/Music/index.html

起始部分的正斜杠表示根目录，后面的部分是从根目录开始的路径。

5．默认文件

您可能已经注意到，在许多站点中不需要实际地指定希望浏览的确切页面。例如，只需要输入域名或者域名加目录，如下所示：

或者

这是因为许多Web 服务器允许它们的所有者在访问者只指定目录时向其发送默认文件。因此，如果输入http ：//www.exampleNewsSite.com/Entertainment/，则服务器将返回Entertainment 目录的默认文件，如果输入http://www.exampleNewSite.com/，则服务器返回Web 站点根文件夹的默认文件（请记住，正斜杠字符可以用于指示相对于根目录）。

标签：

相关推荐

鹤山的哪些小区有羽毛球场(鹤山翰林学校口碑如何？) 2023-02-08 海口到琼海坐高铁需多少时间 海口坐什么车去琼海市最快？ 2023-02-08 冰钓鲤鱼打什么窝最好(冰钓鲤鱼怎样找鱼窝？) 2023-02-08 投掷飞镖是锻炼什么(每天掷飞镖，能锻炼身体的哪些部位？) 2023-02-08 男人白色跑步鞋配什么裤子好看(男士白色运动鞋搭配什么裤子好看？) 2023-02-08 陇南有哪些电器商城(甘肃陇南有哪些档次较高比较大型的商场？) 2023-02-08 佛山西到义乌有高铁吗(佛山有没有高铁？) 2023-02-08 广西百色太阳今天怎样(百色天气朋友圈说说？) 2023-02-08