6.2　创建指向另一个网页的链接

如果你有多个网页，那么很可能希望创建从一个页面到另一个页面（以及返回）的链接（参见图6.2.1～图6.2.4）。还可以链接到其他网站的页面，无论是你自己制作的还是由他人创建的（参见图6.2.5～图6.2.8）。

  1. 创建指向另一个网页的链接

  • 输入，其中page.html是目标网页的URL，如图6.2.1所示。

  • 输入标签文本，也就是默认突出显示的文本，如图6.2.2所示，访问者激活它时，就会转到第1步中所指的页面。也可以添加一个img元素替代文本（或同文本一起）作为标签。（参见图6.5.1，以及6.5节中的“将缩略图链接到图像”。）

  • 输入结束对链接的定义。

  1. ...
  2. <body>
  3.  
  4. <article>
  5.      <h1>Cookie and Woody</h1>
  6.  
  7.      <img src="img/cookiefora.jpg" width="143" height="131" alt="Cookie" />
  8.  
  9.      <img src="img/woodygran.jpg" width="202" height="131" alt="Woody" />
  10.  
  11.      <p>Generally considered the sweetest and yet most independent cats in the <a href="pioneer-valley.html"> Pioneer Valley</a>, Cookie and Woody are consistently underestimated by their humble humans.</p>
  12. </article>
  13.  
  14. </body>
  15. </html>

图6.2.1　由于在href属性中只有文件名（没有路径），文件pioneer-valley.html必须与包含这个链接的网页位于同一个目录。否则，当用户激活该链接时，浏览器将找不到pioneer-valley.html

6.2　创建指向另一个网页的链接 - 图1

图6.2.2　当访问者指向链接（在大多数浏览器中，默认显示为带下划线的蓝色文字）时，目标URL会显示在状态栏中。可以通过CSS改变这个默认样式。如果用户激活该链接……（参见图6.2.3）

6.2　创建指向另一个网页的链接 - 图2

图6.2.3　……与这个目标URL相关联的页面就会显示在用户的浏览器中

  1. HTML5的块级链接

HTML5几乎允许在链接内包含任何类型的元素或元素组（参见图6.2.4）。例如段落、列表、整篇文章和区块——几乎任何元素都行，交互式的内容除外，如其他链接、audio、video、表单元素、iframe等。通过使用HTML验证器对页面进行测试（参见20.5节）以防止链接中出现不允许包含的元素。

  1. ...
  2. <body>
  3.  
  4. <a href="giraffe-escapes.html">
  5.     <hgroup>
  6.        <h1>Giraffe Escapes from Zoo</h1>
  7.        <h2>Animals worldwide rejoice</h2>
  8.     </hgroup>
  9. </a>
  10.  
  11. ...
  12. </body>
  13. </html>

图6.2.4　这种类型的链接在以前的HTML版本中是不允许的，但HTML5允许这样做

这些块级链接（block-level link，非官方称谓）是同HTML早期版本有巨大差异的地方。在以前的HTML中，链接中只能包含文本、图像等所谓的行内元素，也即标记文本短语（如em、strong、cite等）的元素（在HTML5中属于短语内容）。

有趣的是，尽管在以前的HTML规范中块级链接是不允许的，但浏览器都支持。这意味着你现在就可以使用它们，而且它们在旧的浏览器和现代浏览器中均能正常工作。不过，使用它们的时候也要小心（参见图6.2.4和图6.2.5）。

  1. ...
  2. <body>
  3.  
  4. <a href="pioneer-valley.html">
  5.     <article>
  6.        <h1>Cookie and Woody</h1>
  7.  
  8.        <img src="img/cookiefora.jpg" width= "143" height="131" alt="Cookie" />
  9.  
  10.        <img src="img/woodygran.jpg" width= "202" height="131" alt="Woody" />
  11.  
  12.        <p>Generally considered the sweetest and yet most independent cats in the Pioneer Valley, Cookie and Woody are consistently underestimated by their humble humans.</p>
  13.     </article>
  14. </a>
  15.  
  16. ...
  17. </body>
  18. </html>

图6.2.5　不过做过了头。要避免这里显示的情况，链接包含了一大块内容。尽管这个链接仍然起作用，在HTML5里也是合法的，但屏幕阅读器可能会反复朗读全部内容，即使很多链接信息不是访问者通常想听到的。最好让链接只包含最相关的内容

有一些可访问性方面的注意事项，特别涉及不同的屏幕阅读器如何处理块级链接的问题。无障碍访问专家Derek Featherstone和Steve Faulkner的文章深入探讨了这个问题，参见http://simplyaccessible.com/article/html5-block-links/和www.paciellogroup.com/blog/2011/06/html5-accessibilitychops-block-links/。他们建议将最相关的内容放在链接的开头，而且不要在一个链接中放入过多内容。Featherstone指出，随着屏幕阅读器和浏览器逐渐开始官方支持块级链接，可访问性问题可能只是暂时的。

一般来说，用的最多的还是第一个例子（图6.1.1）那样简单、传统的链接样式，不过也要知道，制作精巧的块级链接也是用得上的。

提示　href指hypertext reference（超文本引用）。

　

提示　可以改变标签文本的默认样式（参见第10章），甚至可以用图像作为标签（参见6.5节）。

　

提示　通常，对指向站内网页的链接使用相对URL，对指向其他网站页面的链接使用绝对URL。更多信息参见1.7节。

　

提示　指向另一个网站的页面的链接可能是这样的：Label text（参见图6.2.6、图6.2.7和图6.2.8）。rel属性是可选的，即便没有它，链接也能照常工作。它描述包含链接的页面和链接指向的页面之间的关系。它也是另一种提升HTML语义化程度的方式。搜索引擎也可以利用这些信息。下面的地址维护了一个持续更新的rel值的列表：http://microformats.org/wiki/existing-rel-values。

  1. ...
  2. <body>
  3.  
  4. <article>
  5.      <h1>The Glory of Cats</h1>
  6.  
  7.      <p><a href="http://en.wikipedia.org/wiki/Cat" rel="external"
  8.      title="Cat entry on Wikipedia">Cats</a> are wonderful companions. Whether it's a bottle cap, long string, or your legs, they always find something to chase around.</p>
  9.  
  10.      <p>In fact, cats are so great they even have <a href="http://www.catsthemusical.com/" rel="external" title="Official site of Andrew Lloyd Webber's musical">their own musical</a>. It was inspired by T.S. Eliot's <cite>Old Possum's Book of Practical Cats</cite>.</p>
  11. </article>
  12.  
  13. </body>
  14. </html>

图6.2.6　如果创建指向其他网站的链接，需要使用由http://、服务器、完整路径和文件名构成的绝对URL。rel和title属性是可选的，但推荐使用rel="external"指示这是一个指向其他网站的链接（关于cite元素，参见第4章）

6.2　创建指向另一个网页的链接 - 图3

图6.2.7　同指向站点内页面的链接一样，当访问者指向一个指向其他网站的链接（默认显示为带下划线的蓝色文字）时，目标URL会显示在状态栏，title文本（如果有的话）显示在链接旁。如果访问者激活该链接（参见图6.2.8）……

6.2　创建指向另一个网页的链接 - 图4

图6.2.8　……与这个目标URL相关联的页面就会显示在访问者的浏览器中

提示　仅指定路径，省略文件名，就可以创建指向对应目录下默认文件（通常为index.html）的链接：www.site.com/directory/。如果连路径也省略，就指向网站的默认（首）页：www.site.com。

　

提示　在URL中应该全部使用小写字母，除非指向的页面或目录名称中含有大写字母。（对于你自己的网站，应使用小写字母对所有的文件夹和文件命名，并与链接URL对应。）

　

提示　不要让链接的标签太长。如果标签是句子的一部分，应在链接定义中仅保留关键词，让句子的其他部分位于a元素的外面。

　

提示　一定要在网站的每个页面包含指向网站各主要板块（包括首页）的导航。这可以让访问者自由地浏览网站，不管他们是直接访问网站，还是通过其他网站的链接访问的。你无法知道访问者会从哪里进入你的网站，可能是通过指向网站内页的“深度”链接，因此你应该让他们可以从那里开始访问网站的其余部分。

　

提示　不管怎样，应避免使用“点击此处”作为标签。这种类型的链接文本在万维网上实在是太常见了，它会破坏网站的可用性和可访问性，从而对网站的拥有者产生不利的影响。当用户快速扫过页面上的链接（无论是通过屏幕还是通过屏幕阅读器）时，会发现“点击此处”缺乏上下文（“点击此处？为什么？”）。它对激活链接几乎不会产生激励，而且依赖于访问者阅读链接周围的文字，并寄希望于这些文字可以解释链接的目的。不难理解，访问者通常更倾向于跳过这样的链接。此外，正如本章开头提到的，“点击”一词并不适用于用户触发链接的所有方式。相反，应该使用文本中已经存在的关键词对链接进行标识。例如，应使用“了解我们的销售情况”，而不是“点击此处了解我们的销售情况”。

　

提示　要创建指向某页面特定位置的链接，可以使用锚（参见6.3节）。

　

提示　正如本章引言中提到的，可以使用键盘浏览网页。每次按下Tab，焦点就会转到HTML代码中出现的下一个链接、表单控件或图像映射。这个顺序不一定与屏幕上出现的顺序一致，因为页面的CSS布局可能不同。通过使用HTML的tabindex属性，可以改变使用Tab键的顺序，但不建议使用它，因为它在大多数情况下是不必要的、过时的做法。（在某些情况下它可能有用，但通常这是出于使用JavaScript增强交互体验的需要，这已属于高级主题。）相反，应在对内容进行标记时稍加注意，确保使用Tab键的顺序是符合逻辑的。应对自己的页面使用Tab键进行测试，就像用户的操作一样，再对HTML作相应的调整。

　

target属性

可以让链接在新的窗口或标签页（取决于所用的浏览器）打开，但这被认为是一种不好的实践，不推荐使用。这样说是有理由的。

首先，应该让用户决定是否在不同的窗口或标签页打开链接，而不是让HTML开发人员决定。否则，我们就支配了用户的浏览行为。

也有一些可用性和可访问性方面的考虑。缺乏经验的用户在激活一个链接却没有在当前窗口看到结果时可能会有一些疑惑。使用浏览器并非对所有人都是一件容易的事；我曾向不同年龄段的人展示标签页，他们之前并不知道可以同时打开多个页面。类似地，屏幕阅读器等辅助设备的用户将不得不另外花费努力去转向新的窗口或标签页，前提还是他们明确知道是哪个窗口或标签页加载了新的内容。

如果所有这些并未说服你避免使用在新窗口和标签页打开的链接，或者你的老板或客户不赞同你不使用它们的理由，可以看看如何创建这种链接：在链接定义中输入target="window"，其中window是应该显示相应页面的窗口的名称（由你自己选择）。

例如，Some page会在名为doodad的新窗口或标签页中打开some-page.html。

如果让多个链接指向同一个窗口（即使用同一个名称），链接将都在同一个窗口打开。或者，如果你希望链接总是在不同的窗口或标签页打开（即使多次激活同一个链接），就使用HTML预定义的名称_blank，即使用target="_blank"。

不过我还是不推荐你这样做，能免则免。

target还有一种用法，就是在iframe中打开链接。可以用同样的方法编写target，只是其值应与iframe的id对应。你很少有机会用到这个，特别是在通常不推荐使用iframe的情况下（尽管它们有时会有用武之地）。关于iframe元素的更多信息，参见https://developer.mozilla.org/en/HTML/Element/iframe。

尽管这里不会讲解图像映射的用法，但你应知道它们是用来为单张图片的一个或多个区域添加链接的。可以将每个链接区域定义为矩形、圆形或多边形。缺乏经验的编码人员常常误用它们创建基于图像的导航，而不是使用更为合理的技术，如用CSS或图像替换技术（如果CSS不够用的话）制作的HTML文本。图像映射的鼎盛已是多年以前的事情了，那时上述这些技术还不普遍（甚至不可能实现）。现在图像映射已经用得很少了，但偶尔还有一些合理的用例，例如，对于某个国家的地图，希望定义指向各地区、省或州的链接。可以在网上搜索“HTML image maps”（HTML图像映射）了解有关图像映射的更多信息。