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

第2章链接和导航Web与其他媒体的实质区别是Web页面可以包含了链接，利用链接可以直接转向其他页面（甚至给定页面的特定部分）。链接通常称为超链接，Web的非凡成就与其息息相关。通过超链接，访问者可以在各个Web站点之间导航，方式是单击页面上的单词、短语和图像等。普通的Web站点由一组页面组成，用户通过超文本链接在各个页面之间导航。这些页面通常也含指向其他Web站点的链接，以及指向所在站点的其他页面的链接。本章将介绍如何创建站点中不同页面之间的链接，如何创建指向站点页面中特定位置的链接，以及如何创建指向其他站点（称为外部站点）的链接。如同第1章中户介绍的标记描述了文档的结构一样，链接描述了文档的哪些部分可以链接到其他文档的相应部分。因此，链接形成了不同文档之间的相互关系。在学习链接的时候，了解一些关键概念也是非常重要的，包括如何将站点结构化到不同的文件夹中（文件夹也称为目录），如何使用相对URL链接站点内的页面。在本章中将介绍以下内容：如何构造文件夹用于存放Web站点的页面如何链接站点内的不同页面如何链接到站点中页面的特定部分如何链接到其他站点本章仅介绍如何链接Web页面，而不会介绍链接或嵌入其他文件机制，特别是link元素（第7章中讨论样式表时将介绍该元素）或img元素和object元素（第3章中将介绍这些元素）。2.1基本链接为了介绍链接，首先查看几个简单的例子。一旦了解链接的基本概念，您将发现仍有许多知识需要学习。下面将逐步介绍这些知识。利用a元素可以指定链接。在起始标签a和结束标签/a之间的文本组成链接的内容，用户可以在浏览器中单击它们。下面部分将介绍如何链接到其他文档和电子邮件地址。2.1.1链接到其他文档为了链接到其他文档，起始标签a需要附带属性href，href属性的值是链接页面的地址。下面的示例是ch02_eg0l.html文档的body元素。该页面包含指向第二个页面index.html的链接：bodypReturntotheahref=index.htmlindexpage/a./p/body只要index.html文件与ch02_eg0l.html文件处于相同的文件夹中，则在单击“indexpage”时，就会在相同的窗口中加载index.html页面，并且替换当前的ch02_eg0l.html页面。如图2-1所示，a元素的内容形成了链接。图2-1注意：这就是本章下载代码中的链接的工作方式。记住，可以单击浏览器中的View菜单，然后选择ViewSource选项来查看HTML或XHTML页面的源代码。虽然可以将各种类型的元素放置在a元素中，但最好尽量使链接简明，并且使a元素中的内容实际地描述链接的目的页面。由于a元素中的内容比其周围的文本醒目（通常以不同的颜色显示），所以许多人在需要进入下一个页面时会简单浏览页面以获得相应的链接，而不会完整地阅读当前页面。因此，如果页面中所有链接的内容只是“单击此处(clickhere)”，则用户很可能不会长久地停留在该站点中，因为这些链接无法清楚并快速地告知他们目的页面的信息。注意：许多Web设计人员也在a元素中使用图像（下一章中将介绍相关内容），但是在使用图像时，必须确保图像能够清楚地指示链接的目的页面。如果希望链接到不同的站点，则可以使用下面的语法。其中指定了链接的目的页面的完整URL(UniformResourceLocator，统一资源定位符)，而不仅仅是文件名ch02_eg02.html(本章后面将详细介绍URL)：bodypWhynotvisittheahref=这个链接指向Wrox的Web站点。href属性的值与用户访问Wrox的Web站点时在浏览器中输入的内容相同。这种URL称为限定URL，因为它包含了该Web站点的域名。当希望链接到相同Web站点中的某个页面时，可以使用称为“相对URL”的简写形式；本章的第一个示例使用的就是这种URL，其中href属性的值不是以域名起始的。这样不仅不需要输入完整的URL，而且具有其他优点。在链接中使用title属性也是良好的编程习惯，因为在大多数浏览器中，当用户将光标悬停在链接上时，使用title属性将显示一个工具提示（在屏幕上显示说明标题的气泡状图标）；另外，对于语音浏览器——通常由视力受损人员使用——将会大声读出标题）。title属性的值应当能够描述链接的目的页面。当使用图像作为链接时，这一点尤其重要。例如，下面给出了到Google主页的链接(ch02_eg03.html)：ahref==SearchthewebwithGoogleGoogle/aisaverypopularsearchengine.图2-2显示了title属性，当用户将光标悬停在链接上时，该属性给出了链接的更多相关信息。图2-2需要注意的是，a元素中的所有内容都将显示为链接，包括文本或图像周围的空格，因此最好避免直接在起始标签a和结束标签/a之间使用空格。例如，下面的链接中具有起始和结尾空格(ch02_eg04.html)：Whynotvisittheahref=如图2-3所示，链接中的空格也将带有下划线。图2-3因此，最好在起始标签a和结束标签/a的外部使用空格，如下所示：Whynotvisittheahref=当然，在a元素内的单词之间仍然需要使用空格，只要不在链接的开头和末尾使用它们即可。2.1.2链接到e-mail地址您很可能已经看到，许多站点中的链接显示e-mail地址。当单击这样的链接披时，将在默认的e-mail程序中打开一封新的电子邮件，开且准备好发送电子邮件到链接指向的地址。为了创建指向e-mail地址的链接，需要使用a元素的如下形式的语法：ahref=mailto:[e-mail]@example.com/a其中，href属性的值以关键字mailto开头，后面紧跟一个冒号，然后是e-mail地址。与其他链接一样，a元素中的内容将是链接在浏览器中的可见部邻分，因此可以选择使用如下语句：ahref=mailto:[e-mail]-mailus/a或者，如果想让用户在单击e-mail地址之前看到该地址，可以采用如下语句：Forsalesenquiriese-mailahref=mailto:[e-mail]@example.com/a.但是，使用这种技术也存在如下的缺陷：一些恶意的Web用户会使用小程序自动搜索Web站点中的e-mail地址。搜索到e-mail地址之后，他们就会向这些地址发送垃圾邮件。在创建到e-mail地址的链接时，还有其他一些主要的备选方法：使用e-mail表单，从而访问者在Web站点上填写该表单以发送e-mail。接收到邮件后，可以正常回复它，因为自动程序无法根据联系人表单获得,e-mail地址。e-mail表单的应用需要CGI脚本或者服务器端的脚本语言，例如ASP.net、JSP、PHP、ColdFusion和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所示的目录结构能够帮助用户导航站点，而不用知道确切的文件名：并且用户可以选取他们想要的部分进行浏览，例如从中获得商业新闻，从中获得音乐页面。使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.2URL的组成URL由几个部分组成，每一部分向Web浏览器提供的信息有助于用户找到想要的页面。首先通过查看最常见的URL来帮助您理解URL的各个部分。图2-5中所示的URL有3个关键部分：模式、主机地址和文件路径，下面的小节中将依次讨论它们。图2-51．模式模式标识链接到的URL的类型，因而也标识了检索资源的方式。例如，大多数Web页面使用超文本传输协议(HypertextTransferProtocol，HTTP)传递信息，这就是大多数Web页面以http://开头的原因，但是在位用网上银行或者下载大型文件时，您可能也注意到了其他前缀。表2-1列出了最常见的模式。表2-1模式描述http://超文本传输协议(HTTP)用于向Web服务器请求页面，并将它们从Web服务器发送回浏览器https://安全超文本传输协议(Secur