深入浅出HTML-第6章：链接到 Web
链接到 Web
默认情况下，链接被显示为文档中的一串带下划线的文本。当鼠标逗留在链接上方时，指针会从默认形状变为另一种形状, 以表示这是一个链接. 当你选择链接时，浏览器会导航到链接所指向的地方。
1、锚标签
链接的使用基于一个标签：锚标签。这个标签属性不多，但是提供了许多功能，锚元素的基本语法如下：
<a href="http://urlgoeshere.com">Text to display</a>
：
可以用锚元素标记任何与其交互时会导致浏览器导航到另一个位置的标记代码。在和之间的文本会向用户展示。这些文本通常具有下划线。在其他类型的浏览器中，链接的提示线索有所不同，具体取决于用户代理本身。当用户点击链接时，浏览器会被导向href属性所指定的文档。
- 必需属性：无。
- 可选属性：
□ charset： 说明目标 URL（所指向的文档）使用的编码字符集。
□ coords： 指定用于在客户端图像映射中定义一个形状的坐标。
□ href： 这是期望当用户点击链接时被打开的 URL,是锚标签最常用的属性。
□ hreflang： 说明由 href属性指定的URL（所指向的文档）使用的基础语言
□rel： 说明当前文档和目标 URL 之间的关系。可能值包括alternate、stylesheet、start、next、prev、contents、index、glossary、copyright、chapter、section、subsection、appendix、help、bookmark。
□ rev：说明目标 URL 和当前文档之间的关系。可能值包括 alternate、 stylesheet、 start、next、 prev、contents、index、glossary、copyright、chapter、section、subsection、appendix、help、bookmark。
□ shape：定义图像映射中当前标签对应的映射区域的类型。可能值包括 circle、default、poly、rect。
□ type： 说明目标 URL 的 MIME 类型。 - 标准属性
□ accesskey
□ class
□ dir
□ id
□ lang
□ style
□ tabindex
□ title
□ xml:lang - 事件属性
□ onblur——元素失去焦点时运行的脚本
□ onclick
□ ondblclick——鼠标双击元素时触发
□ onfocus——元素获得焦点时运行的脚本
□ onkeydown——在用户按下按键时触发{（在键盘上）按键时触发}
□ onkeypress——在用户敲击按钮时触发，除去功能键，如：Esc,Shift,Ctrl…
□ onkeyup——按键一松开就触发的事件。键盘上任意键都会触发onkeyup()事件
□ onmousedown——按下鼠标按钮时触发
□ onmousemove——当鼠标指针移动到元素上时触发
□ onmouseover——当鼠标指针移动到元素上时触发，只在刚进入区域时触发
□ onmouseup——当在元素上释放鼠标按钮时触发
2、使用＜a＞标签
①链接到其他文档
锚标签最常见的用法就是链接到另一个文档。锚标签的一种典型用法是：当你在因特网上发布一个 XHTML 文档时，把你的文档链接到其他文档：
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Using Links</title>
</head>
<body>
<P>
<a href="http://www.google.com">Search</a>
</p>
</body>
</html>
这个样例用了一个带 href 属性的＜a＞标签，使用户能够使用 Google 进行搜索。点击开标签＜a＞ 和闭标签＜∕a＞之间的文本或图像将导致链接被激活。如果当前焦点在链接元素上，用户也可以通过按回车键激活链接。 href 属性提供了位置，即浏览器应该导航到的地方：
Search
代码提供了指向所请求的文档的完整URL。完整 URL 描述了一个绝对路径。如果要链接到的文档与当前文档存储在不同的地方，那就需要使用绝对链接，以便浏览器知道究竟该到什么地方去获取这个文档。绝对链接至少应该提供域名，此外还可以包含目录和所要链接的特定文件（文档）的名称。
在链接到本域中的其他文档时，可以选择使用相对链接。相对链接走的是捷径，不必指定想要链接到的文档的域名，也可能不必指定其目录路径。相对路径基于原文档所在位置。到与原文档位于同一目录的文档的链接不必包含路径。要访问原文档所在目录的子目录下的文档，只需在子目录名后面加一个斜线再加文档名即可：images/filename。要访问当前文档所在目录的上一级目录中的文档或文件，可以使用两个句点来代表上一级目录：…/filename。下例中 href 属性并未包含任何域或文件路径信息：
<!D0CTYPE html
PUBLIC "-∕∕W3C∕∕DTD XHTML 1.0 Strict//EN"
"http:∕∕www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Usiπg Links-Relative Links<∕title>
<∕head>
<body>
<P>
Options:<br∕>
<a href="home.html">Home<∕a><br∕>
<a href="news.html">News<∕a><br∕>
<a href="menu∙html">Menu<∕a><br∕>
<a href="locations.html">Locations</a>
<∕p>
<∕body>
<∕html>
上述代码中添加了多个链接，为用户提供了多种选择。由于使用了相对链接，浏览器会认为： 既然你没有另外提供一个位置以供查找文档，那么这个文档一定位于当前文档所在的域和文件路径。本例中，它将在原文档所在的同一位置寻找名为 home.html 的文档。
使用相对链接在网站中的文档之间导航是个好主意, 这样一来，以后要是想改变文档的位置（这会导致 URL 中的一些部分发生改变），做起来要容易得多。
当网站规模越来越大，并且包含着 XHTML、图像和 CSS 等各种类型的文件时，你可能会将这些文件分门别类地放在不同文件夹中，以增强其条理性。可以使用后面跟着一个斜线的两个句点指示浏览器在目录路径中向上移动一级。
<a href="..∕home∕index.html">Home Page<∕a>
②链接到非 XHTML 文档
一种常见用法是提供到 FTP 站点的链接，以便用户下载文件。例如，下面的链接能让用户通过浏览器访问微软的 FTP 站点。当用户点击这个链接时，将被连接到微软的 FIP 站点：
<a href="ftp://ftp.microsoft.com">Microsoft FTP Site</a>
这样的技术也可用于链接到因特网上的其他非XHTML文件。如果你有一个.pdf 文档想通过网站提供给外界，那么只需使用一个类似下例的链接即可：
<a href="menu.pdf">Download Menu in PDF (500k)<∕a>
如果所链接到的不是一个 HTML/XHTML 文档，那么把它的类型和大小明确地告诉用户是一 个很好的做法。前面的例子中就说明了链接的目标是一个 500k大的.pdf 文档。这可以向用户提供足够的信息，以便用户判断自己的计算机是否支持这种文件以及这个文件下载起来是不是太大了。
③链接到电子邮件地址
除了链接到其他 XHTML文档之外，锚元素最常见的用途之一就是自动链接到电子邮件地址。 这是一种确保用户的电子邮件发送到正确的目的地的好办法。把标签用于电子邮件时，可以这样使用 href：Feedback
默认情况下，当用户点击这个链接时，浏览器将打开默认电子邮件应用程序的新窗口。如果没有设置默认电子邮件应用程序，那么什么事都不会发生。在上述例子中，电子邮件地址“[email protected]”会被自动插入电子邮件应用程序中的“ 收件人” 一行。如果电子邮件
应用程序支持的话，"?subject=Feedback”中等号后面的部分会被自动插入电子邮件应用程序中的“主题” 一行。
3、把图像用作链接
下列代码展示了组合使用＜img＞标签和＜a＞标签把图像变成链接的方法。
<!D0CTYPE html
PUBLIC "-//W3C∕∕DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/×html1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type≡"text/css">
img {border: none;}
</style>
<title>Using Links - Image Links</title>
</head>
<body>
<P>
<a href="mailto:[email protected]">
<img src="email_btn.gif" alt="Email Webmaster" /></a>
</p>
</body>
</html>
确保
你可以用任何喜欢的图像创建链接。通常人们会创建一些按钮形状的图像用作链接。用图像作链接时应该记住的一件事是：你希望使用的任何文字都必须是图像自身的一部分。你也许还想用动画.gif 文件把网站变得更有趣一点。动画.gif 文件中使用了一系列图像来产生动画效果。注意， 动画.gif文件不宜过多使用，因为这会分散读者对于内容的注意力，并使网站显得滑稽。另外一 种常见用法是完全用图像来取代文本。例如，你可能会把这种方法用于工具栏或其他一些场合， 在这些场合中使用图像能与整个文档更好地保持协调。
使用 CSS 是一种比使用
4、使用 ID
锚的妙处之一在于你可以用它链接到文档中的一个特定位置。例如，一个餐馆网站中可能有一个只包含一系列烹饪术语定义的文档，菜单文档可以直接链接到某些术语以便用户查找与他们不熟悉的术语相关的信息。当他们点击一个术语的链接时，将打开定义术语的文档并定位到该术语的定义所在位置。这样一来，用户就不必在文档中查找那个术语了。为了设置一个ID,你首先需要为 id 属性提供一个值。
<a id="filet">Definition goes here</a>
既然已经设置了一个 ID,现在需要能够直接链接到它。为此，你与往常一样需要指定 URL, 此外还要加上一个磅号，后面跟着希望链接到的元素的 ID (#id)。例如，为了链接到文档 definitions.html 中其id 值为 filet 的定义，可以使用如下代码：
<a href="http://www.mywebsite/definitions.html#filet"></a>
很多时候你可能希望链接到同一文档中的某部分内容。例如，假设文档中有一个步骤或规则的列表，其详细说明在文档的后面部分。id属性也可用在这里。id 属性的另一个常见用法是在比较长的文档中制作“ 页首” 和“ 页尾” 链接。下列代码展示了一种用法：用户在滚动到页面底端时，可以通过点击一个链接迅速跳到页面顶端。
<!DOCTYPE html
PUBLIC "-∕∕W3C∕∕DTD XHTML 1.0 Strict∕∕EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Using IDs Within the Same Doc<∕title>
<∕head>
<body>
<P>
<a id="top">
..
..
..
<∕ρ>
<P>
<a href="#top">Return to top<∕a>
<∕p>
<∕body>
<∕html>
当用户点击“Return to top” 链接时，浏览器将查找到 top 这个 ID,并带领用户返回页首。
5、为锚标签添加 CSS
默认情况下，浏览器会为链接添加下划线，并将其呈现为特定颜色以便
引起用户的注意。但是默认的颜色可能与你的视觉性设计方案并不协调。你可以用 CSS 改变链接的外观：
<!DOCTYPE html
PUBLIC "-∕∕W3C∕∕DTD XHTML 1.0 Strict∕∕EN"
"http:∕∕www.w3.org∕TR∕xhtml1∕DTD∕×html1-strict.dtd">
<html>
<head>
<style type="text∕css">
a:link { color: red; text-decoration: none }
a:visited ( color: green; text-decoration: none)
a:hover (color: blue; text-decoration: underline}
a:active {color: black; text-decoration: none)
a:focus {color: yellow; text-decoration: underline}
<∕style>
<title>Using CSS with Anchors<∕title>
<∕head>
<body>
<p>
<a href="mailto:[email protected]">Send Feedback<∕a>
<∕p>
<∕body>
<∕html>
使用CSS把一些特定样式应用到各种可能状态下的链接。其中用到了一种新的概念，叫作伪类(pseudo class)。把伪类与选择符结合使用，可以把样式应用到处于特定状态的元素或元素的特定部分。伪类的结构如下所示：selector:pseudo-class {property: value}
如果一个链接未曾被选择过，它将显示为红色。如果用户已经点击过一个链接(visited),它将显示为绿色。当用户点击链接时(active),它变为黑色。当用户把鼠标移到链接上方时(hover),它变为蓝色。最后，代码中为 focus 伪类添加了一条样式。当用户使用快捷健或制表键把焦点移到链接上时，它会变成黄色，并被加上下划线。定义链接的样式时，别忘了为使用替代性定点设备(alternative pointing device)或键盘的用户指定针对 focus 伪类的样式。在用户点击它之前，它显示为红色文本。
当用户的鼠标逗留在链接上方时，它变为蓝色，并被加上下划线。
可以为 link、visited、hover和active 伪类应用许多不同的样式，以提供自定义的观感(look and feel)。应用这些样式的顺序很重要。有一句话可以帮你记住这个顺序： LoVeHAte (它代表 link、visited、hover、active)。
可以用 CSS 创造一些很酷的效果。通过使用背景、边框和其他一些属性，可以创建一个菜单，当用户的鼠标划过其中的链接时，它会改变颜色。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/×html1-strict.dtd">
<html>
<head>
<style type="text/css">
a {color: black;
font: 12px Arial,Helvetica,sans-serif;
text-decoration: none;
border: 2px solid black;
display: block;
width: 2OOpx;
padding: 3px lOpx;
background: #dcdcdc;}
a:hover, a:active, a:focus {
background: #4169E1;
font-weight: bold;}
</style>
<title>Using Links - Changing Backgrounds</title>
</head>
<body>
<p>
Options:<br/>
<a href="home.html">Home</a><br />
<a href ="news. html">News</a><br />
<a href="menu.html">Menu</a><br />
<a href="locations.html">Locations</a>
</p>
</body>
</html>
通过调整样式，可以显著地改变链接的呈现结果。对于处于选择状态的链接，不仅改变了其背景色，还改变了字体的粗度以使其引人注目。还应该注意到的是，代码中添加了一些属性，使不用鼠标的用户也能轻松使用菜单项。 a:active 和 a:focus 属性提供了与使用鼠标时完全相同的功能。当用户使用制表键遍历这些控件时，很容易看出焦 点在哪个菜单项上。
下例去掉了背景色，调整了高度和宽度以便与位图的尺寸一致，此外还调整了衬距，并用 background -image 属性指定了背景图像。
<!DOC1YPE html
PUBLIC "-∕∕W3C∕∕DTD XHTML 1.0 Strict∕∕EN"
"http: ∕∕www.w3.org∕TR∕xhtmll∕DTD∕xhtmll-strict∙dtd">
<html>
<head>
<style type≡"text∕css">
a {color: black;
font: 12px Arial,Helvetica,sans-serif;
text-decoration: none;
display: block;
width: 200px;
height: 22px;
padding-top:8px;
text-align:center;
background-image:url('btnOn.gif');}
a:hover {
background-image:url('btnθff.gif');
font-weight: bold;)
<∕style>
<title>Using Links with Background Images<∕title>
<∕head>
<body>
<p>
Options:
<a href ="home. html">Home<∕a><br ∕>
<a href="news.html">News</a><br ∕>
<a href="menu. html">Menu<∕a><br ∕>
<a href="wlocations.html">Locations<∕a>
<∕p>
<∕body>
<∕html>
6、创建图像映射
使用图像映射，可以把一幅图像分成多个特定区域，并把它们用作到同一文档或其他文件的链接。当用户把鼠标移到图像中具有热点（hotspot）的部分时，指针的形状会发生变化以表明是一个
链接，此外 alt 属性也会显示出来。
图像映射并不常用，因为它们倾向于把行为和布局信息嵌入到文档中，而且其功能对于文档的读者来说并不总是那么直观。在使用图像映射时，应该设法保证其界面对于用户的直观性。如果达不到这个要求，用户可能根本不知道这些链接的存在。有些文档甚至会在图像上方或下方添加一些使用说明。
要使用图像映射，首先应该准备好一幅用来添加热点的图像，并创建一个用来指定所需链接和坐标的 map 元素。
图像映射中需要用到两个新标签： ① ② 在图中，鼠标指在方形区域上，这表示用户想订一份方形比萨饼。浏览器显示了该区域的 alt 文本，鼠标指针的形状也发生了变化，表示这是一个链接。如果用户点击它，浏览器将导航到所指定的链接位置。 还有一种形状是 poly,提供了最大的灵活性。使用 poly 形状的时候，需要指定一批用空格分隔的点，它们构成了多边形的轮廓。下列代码示范了如何描述一个奇形怪状的多边形： 指定一批点的坐标,每个点的坐标中，横坐标在前，纵坐标在后，横、纵坐标之间用逗号分隔，相邻两个点的坐标用空格分隔（也可用逗号分隔〉。应该注意的是，相邻两个点的坐标要么用空格分隔，要 么用逐号分隔，最好不要混用，否则就失去了使用空格的意义。shape 属性为 rect 时，指定的依次是矩形的左边的x坐标、上边的 y 坐标、右边的x坐标、下边的 y 坐标 （下面分别表示为 x1、 y1、 x2、 y2） ,也可视为矩形左上角的横、纵坐标和右下角的横、纵坐标。所以其 coords属性格式可以是"x1、y1、x2、y2", 也可以是"x1、y1、x2、y2"一译者注：标签用于声明带有可点击区域的客户端图像映射。
□ id： 为 map 元素指定一个唯一的 ID。
□ name： 为 map 元素指定一个唯一的名称。
□ class
□ dir
□ id
□ lang
□ style
□ title
□ xml：lang
□ onblur
□ onclick
□ ondblclick
□ onfocus
□ onkeydown
□ onkeypress
□ onkeyup
□ onmousedown
□ onmousemove
□ onmouseout
□ onmouseover
□ onmouseup：元素用于说明图像映射中的一个区域。
□ alt： 指定区域的替代性文本。
□ coords：指定映射中可点击区域的坐标。如果 shape 属性等于 rect,则坐标的祗式为左、上、右、下。如果 shape 属性等于 circ,则格式为圆心 x、圆心 y、半径。如果 shape 属性等于 poly,则格式为 x1、 y1、x2、y2、…、xn、yn。
□ href； 一个 URL,用于指定区域的链接。
□ nohref： 使用值 true 和 false 将一个区域从图像映射中排除。
□ shape： 说明区域的形状。有效值为 circle(circ)、 poly、 rect。
一个＜ area＞ 元素必须在 href^nohrefΛ 性中指定一个.如果指定了nohref属性，表示这个区域不对点击发生反应，也即它被从图像映射中排除了 。nohref属性在 HTML 中不需要值，但在XHTML中必须有一个值：nohref=“nohref”。注意，其值是字符串“nohref”，而不是作者所说的 "true"或“false”.在客户端脚本中设置＜area＞元素对应的 noHref属性值时，才便用布尔值 true 或 false。
□ accesskey
□ class
□ dir
□ id
□ lang
□ style
□ tabindex
□ title
□ xml:lang
□ onblur
□ onclick
□ ondblclick
□ onfocus
□ onkeydown
□ onkeypress
□ onkeyup
□ onmousedown
□ onmousemove
□ onmouseout
□ onmouseover
□ onmouseup
了解图像映射如何工作的最佳方式是创建一个图像映射。先在 body 元素中创建一个映射容器，将其 id 属性设置为 map。需要用 area 标签描述实际的热点。因为打算使用的链接有两个（圆形比萨饼和方形比萨饼）, 所以需要使用两个不同的 area 元素。描述用于方形比萨饼的区域时，应该选择 rect 这种形状，并指定其左、上、右、下的坐标值。描述用于圆形比萨饼的区域时，应该选择 circ 这种形状，并指定其圆心坐标和半径。此外，还要提供 href 和 alt 属性值，前者用于说明当用户点击该区域时应用程序将导航到的地方。为了得到所需坐标值，应该使用某种图像编辑程序（如 Microsoft Paint），把鼠标指针移到所示区域的相应位置上，即可得知其坐标值。对于圆形，需要得到圆心坐标，并计算出半径值。
在文档中定义好＜map＞ 和一些＜ area＞ 之后，需要把映射挂到将应用它的图像上。所要做的就是使用 ＜img＞标签的 usemap 属性并指定想使用的映射的id值。
设置 usemap 属性值时，在想使用的映射的 id 值前要加一个符号 “#”。usemap 属性值实际上是一个 URL。<!DOCTYPE html
PUBLIC "-∕∕W3C∕∕DTD XHTML 1.0 Strict∕∕EN"
"http:∕∕www.w3.org∕TR∕×html1∕DTD∕xhtml1-strict.dtd">
<html>
<head>
<style type="text∕css">
img {border-style: none}
<∕style>
<title>Image Maps<∕title>
<∕head>
<body>
<P>
<map id="map" name="map">
<area shape="rect" href="square.html"
coords="2θ,27 97,76" alt="0rder
Square Pizza" ∕>
<area shape="circle" href="round.html"
coords="167,51 35" alt="0rder
Round Pizza"∕>
<∕map>
<img usemap="#map" src="imagemap.gif"
alt="Choose square or round pizza!"∕>
<∕p>
<∕body>
<∕html>
<area shape="poly", href="poly.html" coords="140,210,190,257,140,305 110,260"
alt="A Polygon">
一个图像即使未曾设置边框，如果它被用作链接， 那么浏览器会默认地为它加上一个蓝色边框，以提醒用户这个图像是一个链接.