2.3. 超链接
HTML 最迷人的地方在于其超文本链接，借助于这项今天看来简单但实则非常伟大的技术，在拥有数以万亿计网页的浩瀚互联网海洋中，以一个网页为起点，最多只需单击 19 次，便可到达其它任意一个网页[1]。Web 上的第一张网页 除了纯文本之外就只有超文本链接，正是这一简陋的 HTML 页面，开启了我们今天丰富多采的网络生活。
超文本链接（hypertext link），又称超级链接、超链接，用于从一个网页指向一个资源或位置。由于互联网的第一代浏览器 Mosaic 显示的网页底色通常都是灰底黑字，为了让超文本链接能够更方便识别，蒂姆·伯纳斯-李 将超链接定义为至今仍被大部分浏览器所接受的默认的蓝色并带有下划线的文字；当超链接已经被缓存过时，则转为紫色；当用户将鼠标悬停在超链接上，鼠标光标将显示为手型，以表示该链接是可以单击的；当用户单击超链接时，浏览器将在会显示或下载链接到的资源。
超链接在 HTML 中使用元素 a 创建，故超链接还可以被称为锚链（anchor）。
2.3.1. href 属性
超文本 链接 引用 的资源使用 href[2] （hypertext reference）属性指定，其属性值通常是一个 URL，如：
链接到一个页面: <a href="http://www.w3.org/TR/html401/struct/links.html">HTML Links</a>
href 属性值的另外一些形式：
链接到一个网站: <a href="http://www.cumt.edu.cn">中国矿业大学</a>
<br />
链接到一个文件：<a href="http://www.w3.org/2008/site/images/wplogo_transparent.png">wplogo_transparent.png</a>
<a href="http://www.w3.org/QA/Tools/css-validator/css-validator.jar">css-validator.jar</a>
<br />
链接到一个电子邮件地址: <a href="mailto:[email protected]">[email protected]</a>
链接到 HTML 页面、网站本质上都是链接到一个文件，链接到网站是链接到该网站的首页页面， HTML 页面也是一个文件；浏览器（或是相关浏览器插件）可以直接打开的文件，如上例中的 wplogo_transparent.png，则文件会直接在浏览器中显示，否则，文件将通过浏览器下载到本地计算机，如上例中的 css-validator.jar。
注意链接到电子邮件的 href 属性值的形式，以 mailto: 开头加上一个电子邮件地址，单击该链接会打开浏览器关联的电子邮件客户端（如 Microsoft Outlook 等），客户端的“收件人”一栏将显示指定的电子邮件地址以便给该电子邮件发送邮件。
2.3.1.1 绝对路径与相对路径
在本地文件系统中，我们要找到需要的文件必须知道文件的位置，而表示文件的位置的方式就是路径。例如只要看到这个路径：D:\website\images\photo.jpg，我们就知道 photo.jpg 文件是在 D 盘的 website 目录下的 images 子目录中。类似于这样完整的描述文件位置的路径就是 绝对路径（absolute path）。而 web 上的文件是存储在 web 服务器上的，访问它们需要使用一个完整的 URL，如 http://www.w3.org/images/photo.jpg，这是 web 上文件的绝对路径形式。它意味着域名 www.w3.org（其实是其经过域名解析得到的 IP 地址）对应的某台服务器上的网站根目录（假设为 E:\w3\2008）中，存在一个绝对路径为 E:\w3\2008\images\photo.jpg 的文件。
一般地，网站设计阶段的文件存储在本地文件系统的某个目录（如上面的 D:\website）中，而发布阶段需要将本地目录中的相关页面、资源上传到远程 web 服务器上的某个目录（如 E:\w3\2008 ）中。
假设，设计阶段，D:\website 中存在一个名为 index.htm 的网页文件，在它的 HTML 源代码中，我们使用绝对路径创建了一个超级链接指向 D:\website\images\photo.jpg：
<a href="D:\website\images\photo.jpg">查看照片</a>
此时，使用浏览器打开 D:\website\index.htm 文件，单击以上超级链接，是可以在浏览器中打开显示 photo.jpg 这个文件的。
但是，当我们尝试
- 在本地文件系统中将 website 目录整体移动到 C:\w3 目录中
- 将 website 目录中的文件、子目录整体上传至 www.w3.org 对应的某台 web 服务器的 E:\w3\2008 目录中
时，这个链接就失效了，除非将 a 元素的路径分别改为：
- C:\w3\website\images\photo.jpg
- E:\w3\2008\images\photo.jpg
，
这对于一个可能包含大量使用绝对路径超级链接的多个页面的网站来说，是非常繁琐且低效的做法。
此时应该考虑使用 相对路径（relative path）来指定 a 元素 的 href 属性值。所谓相对路径，顾名思义，就是要链接、引用的文件相对与当前文件的位置。如上例中 index.htm 中 a 元素的 href 属性可以指定为 images/photo.jpg，即相对于 index.htm 来说，photo.jpg 位于和其所在目录的 images 子目录中。在这种情况下，无论是本地系统中移动整个网站的位置，还是将其上传到可能和本地文件系统路径形式并不一致的服务器路径中，只要 index.htm 和 photo.jpg 的相对关系不变，链接始终都是有效的。
<a href="images/photo.jpg">photo.jpg</a>
另外，我们使用“../”来表示上级目录（父目录），“../../”表示上上级的目录，以此类推。如 D:\website\apps\chat\login.htm 中链接到 D:\website\images\photo.jpg 的相对路径写法应该是：../../images/photo.jpg。这个相对路径使用 ../../ 定位到上上级目录 D:\website，接下来再到 images 子目录中 访问 photo.jpg 文件。
<a href="../../images/photo.jpg">photo.jpg</a>
在将 D:\website 目录中的文件和子目录整体上传到域名 www.w3.org 对应的某台 web 服务器的根目录后，login.htm 的绝对路径为 http://www.w3.org/appschat/login.htm，而其中使用相对路径 ../../images/photo.jpg 指向的文件的绝对路径将根据 login.htm 的绝对路径作为基准形成 http://www.w3.org/images/photo.jpg 的形式。
HTML 中还定义了一个名为 base 的元素，它的 href 属性指定的路径（而不再是当前页面的绝对路径）将成为页面中所有指向其它资源的相对路径的 基准。如，
<base href="http://www.w3.org/2008/" />
此时，login.htm 指向的 ../../images/photo.jpg 的绝对路径将不再是 http://www.w3.org/images/photo.jpg，而是 http://www.w3.org/2008/images/photo.jpg。
base 元素是一个不可见的空元素，该元素应该被包含在 head 元素的开始和结束标签中。
绝对路径比较容易避免 死链 的问题，是搜索引擎比较喜欢的；相对路径在文件相对关系不变的情况下更容易移植。
2.3.2. target 属性
超链接指向的资源在超链接被单击后并不一定总是在当前浏览器页面中打开，可以使用 target 属性指定要打开文件的 目标 位置。如果一个 a 元素具有 target 属性且该属性值被设置为 _blank，则资源将在新的 空白 窗口（较新版本的 多标签浏览器 是在新的标签页）中打开。
<a href="http://www.cumt.edu.cn" target="_blank">在新窗口中打开“中国矿业大学”首页</a>
创建超级链接时决定是否在新窗口中打开链接到的资源文件并不是一件随意的事情：新窗口打开意味着起始页面会得以保持，这样可以增加用户在网站的停留时间，这对网站所有者来说是有利的；负面效应是过多的浏览器窗口会占用更多的系统资源并使得用户的屏幕拥挤杂乱。一般地，只有那些指向外部网站的超链接才指定 target 属性设置为在新窗口中打开；内部网站页面之间的相互链接则不需要，至少用户可以通过右键菜单（或称上下文菜单）来自主决定是否在新窗口打开页面。
2.3.3. name 属性与命名锚链
一个网页包含了比较多的内容时，用户可能需要在浏览器中使用鼠标上下拖动竖直方向滚动条或者使用键盘按键（↑、↓、PageUp、PageDown）在页面的不同位置进行切换以查找希望得到的内容。我们可以像字典右侧常见的右侧字母书签（见下图）那样在页面中创建一些 命名锚链（named anchor）。
词典右侧的黑色字母顺序书签
就像字母顺序书签之于词典，命名锚链指向的是网页中的位置。给 a 元素指定 name 属性，其属性值是一个网页设计人员自己定义的书签名称，此时 a 元素的 href 属性不是必需的。如
<a name="a">A</a>
<br />
377 个以 A 开头的单词
<br /><br />
<a name="b">B</a>
<br />
237 个以 B 开头的单词
<br /><br />
<a name="c">C</a>
<br />
464 个以 C 开头的单词
<br /><br />
<a name="d">D</a>
<br />
230 个以 D 开头的单词
<br /><br />
......
上例假设将一个英文词典中包含的所有英文单词都放在一行显示，合理的组织方式是将所有英文单词按字母顺序排序，同时，在每个字母的第一个单词前创建一个命名锚链来定义这些字母的第一个单词在网页中的位置。
只指定 name 属性而不指定 href 属性的 a 元素不是一个常规的超链接，无法单击它转到其它资源。只创建命名锚链只是实现词典书签类似功能的第一步，还需要创建一些超链接指向这些由命名锚链定义的文档位置，每个命名锚链位置以字符“#”开始加上命名锚链的 name 属性的属性值的形式来访问，如：
<a href="#a1">A</a>
<a href="#b1">B</a>
<a href="#c1">C</a>
<a href="#d1">D</a>
......
<br /><br /><br />
<a name="a1">A</a>
<br />
377 个以 A 开头的单词
<br /><br />
<a name="b1">B</a>
<br />
237 个以 B 开头的单词
<br /><br />
<a name="c1">C</a>
<br />
464 个以 C 开头的单词
<br /><br />
<a name="d1">D</a>
<br />
230 个以 D 开头的单词
<br /><br />
......
这样，在页面上单击最顶端的某个字母超链接，如果网页下方还有足够多的内容，则该链接指向的命名锚链定义的位置将出现在页面的最顶端。
页面的最顶端是一个最常用的页面位置，这个位置不需要额外定义，如果超级链接的形式是这样的：
<a href="#">返回页面顶端</a>
或是：
<a href="#">返回页面顶端</a>
单击超级链接即可跳转到页面最顶端显示页面最顶端的内容。
从一个页面上创建超级链接也可跳转到在另外一个页面上某个使用命名锚链定义的位置。如从 index.htm 链接到 dict.htm 中名称为 d 的命名锚链的位置，可以：
<a href="dict.htm#d">230 个以 D 开头的单词</a>