4-1 <a> … </a>的基本应用

<a>是超链接元素，这个元素的英文全名是Anchor，可将它翻译成“锚”，其主要目的是在单本设置的超链接后，可以跳到指定网络节点位置。在Internet中节点的位置，也就是Internet地址，我们称之为URL（Universal Resource Locator）。<a>元素的基本使用方式如下：

    <a href="URL"> … </a>

□ href

超链接的URL。

程序实例ch4_1.html：分别建立两个超链接，使得单击超链接后可以分别进入深石数字或Silicon Stone公司的网页。

执行结果 下图是4_1.html刚执行时的画面。

将鼠标指针指向“深石数字”，鼠标指针变为手形，窗口左下角会列出深石数字的超链接地址，如下图所示，单击后将进入深石数字公司网页。

将鼠标指针指向“Silicon Stone Education”，鼠标指针变为手形，窗口左下角会列出Silicon Stone Education的超链接地址，如下图所示，单击后将进入Silicon Stone公司网页。

超链接被浏览过后，超链接文字改成以紫色显示。

4-2 浏览脉络的设定

所谓的浏览脉络（Browsing Context）是指开启浏览器页面的方式，此时我们可以在<a>元素的使用方式内增加target属性。

    <a href="URL" target="target_
value"> … </a>

□ target

属性值可以是下列几种：

_self：在目前的浏览页面下显示，这是系统默认值。

_blank：在现成的浏览器下新增一个浏览页面。

_parent：如果目前的页面有父层级，则在父层级页面显示。

_top：在目前浏览器的最顶端显示。

程序实例ch4_2.html：采用_blank和_self重新设计ch4_1.html中的超链接。

执行结果

单击超链接之后，将用原来的页面显示深石数字公司网页，如下图所示，方法与实例ch4_1.html相同。

单击浏览器窗口左上角的图标，可以返回原来的ch4_2.html页面。若是单击Silicon Stone Education超链接，如下图所示。

可在浏览器内增加一个新的页面来显示Silicon Stone Education公司的网页。

4-3 从一个文件跳到另一个文件

在建立网页时，我们很可能为网页内容建立许多页面，每一个页面其实就是一个HTML文件。这一节我们将从相对路径下各种可能状况（4-3-1 ~ 4-3-3节）与绝对路径（4-3-4节）两方面说明如何在显示一个页面时，用超链接跳到另一份HTML文件页面。

4-3-1 超链接的HTML文件在同一个文件夹

这是最简单也最实用的状况，所有的HTML文件皆在同一个文件夹。一般是用在小型网页设计中。以<a>元素而言，我们可以修改使用格式如下：

    <a href="HTML-file"> … </a>

接下来的实例ch4_3.html主要以笔者计算机中的数据结构为基础，如下图所示。

程序实例ch4_3.html：这个程序包含ch4_3.html、bigdata.html和photography.html等文件，同时这3个HTML文件是在同一个文件夹ch4中。主要HTML文件是ch4_3.html，程序执行时会列出Big Data Series和Photography这两个超链接，单击Big Data Series超链接将进入bigdata.html文件页面。单击Photography超链接将进入photography.html文件页面。bigdata.html文件页面和photography.html文件页面皆有一个Back超链接，单击后可以返回ch4_3.html文件页面。

bigdata.html

photography.html

执行结果

如果单击Big Data Series超链接，可以进入bigdata.html文件页面。

如果单击Back超链接，可以返回ch4_3.html文件页面。下图是另一个执行结果页面。

如果单击Photography超链接，可以进入photography.html文件页面。

如果单击Back超链接，可以返回ch4_3.html文件页面。

4-3-2 超链接的文件在子文件夹

在设计大型网站时，网页通常是由许多的HTML文件所组成，一页最上层的网页可能有许多超链接，每一页超链接又可能会有其他好几个更深一层的超链接。为了管理这些HTML文件，网页的程序设计师会将HTML文件依层次建立在不同的子文件夹内。

在设计网页时，要引用到目前文件夹的子文件夹，可以使用下列方法，这样整个设计就简单多了。

    <a href="subfolder/HTML-file"> … </a>

subfolder是指子文件夹名称。下一节将介绍的实例ch4_4.html以笔者计算机中的数据结构为基础，ch4_4.html位于ch4文件夹，bigdata.html和photography.html文件在ch4文件夹下的child子文件夹中，如下图所示。

上述数据结构将衍生一个问题，bigdata.html和photography.html文件将如何定义超链接返回父文件夹ch4的ch4_4.html文件？

4-3-3 超链接的文件在父文件夹

若想返回父文件夹，基本上只要在连接文件前方加上“../”即可，此时<a>元素的使用格式如下：

    <a href="../HTML-file"> … </a>

程序实例ch4_4.html：这个程序执行的结果和ch4_3.html相同，所以不再列出结果，在此笔者仅列出程序实例ch4_4.html与ch4_3.html不相同的内容。

请读者留意第12行与第15行超链接到子文件夹的语法。

bigdata.html与photography.html返回到父文件夹超链接的语法相同，如下所示：

4-3-4 绝对路径

一般网页设计较少使用绝对路径，主要原因是只要未来HTML文件所在的工作文件夹有更动，相关的超链接就可能出错。不过本书为了讲述完整的知识，笔者在此还是举例说明。其实在ch4_3.html的执行结果中，当鼠标指针指向超链接文字时，窗口左下角的网址就是绝对路径的网址。

使用绝对地址设定超链接，则<a>元素格式如下：

    <a href="file:///disk:/subfolder
… /HTML-file"> … </a>

“file:///”是绝对地址的定义格式，disk是指驱动器号。在disk和subfolder之间的“:/”符号也可以使用“|”取代。

程序实例ch4_5.html：使用绝对地址重新设计ch4_3.html，下面只列出程序代码与ch4_3.html不相同的地方。

请读者重点关注上述程序的第12和16行。