[HTML/HTML5]5 使用链接

5.1  添加指向其它Web页面的链接

　　无论目标Web页面是否属于你网站的一部分，还是属于其它网站，都可以添加指向其它Web页面的链接。只需要用<a>就可以添加链接。

 <a href="www.baidu.com">百度搜索</a>

　　<a>最常用的属性是href——它是hypertext reference的简写。href属性的功能是告诉浏览器从哪里能找都你链接的信息。其它属性还包括name、title、tabindex、accesskey和target属性。

　　位于<a>与</a>标记之间的文本就是呈现在Web页面中供你单击的文本。在绝大多数情况下，该文本会以一种与周围文本不同的颜色突出显示，并且带有下划线。为了确定href属性的值，要考虑所使用的链接类型。基本的链接类型包括以下两种：

• 绝对链接
• 相对链接

5.1.1  绝对链接

　　绝对链接就是那些包含完整路径名的链接。在绝大多数情况下，当链接到那些不属于你自己网站的页面或站点时，应该使用绝对链接。绝对链接必须在开头包含所使用的协议（http：//）。

 <a href="http://www.yahoo.com">Visit Yahoo!</a>

5.1.2  相对链接

　　之所以称为相对链接，是因为它并不包含所指向页面的完整路径名。在你的网站中，当想从一个页面链接到另外一个页面时，相对链接是最常用的链接形式。

 <a href="contact.html">Contact Me</a>

　　如果要在当前文件夹之下的另外一个文件夹中查找某个文件，则href属性的值将如下显示：

 <a href="wendy/contact.html">Contact Me</a>

　　如果链接到当前文件夹之上的父文件夹中的某个文件，就可以为目录树之上的每一层目录添加一个“../”。

 <a href="../../contact">Contact Me</a>

　　告诉浏览器返回网站根（root或base）目录的另外一种方法，是简单的使用一条斜杠，例如：

 <a href="/index.html">Return Home</a>

5.2  添加指向同一Web页面之中其它部分的链接

　　当链接到一个页面时，因为每一个页面都有一个文件名，所以浏览器知道查找哪一个页面文件。但有时我们可能想链接到网站某个页面中的一部分文件。要链接到Web页面中的一部分，首先必须为该部分定义一个名称。

5.2.1  创建锚点

　　锚点就是页面中的一个位置，它定义一个特殊的名称，以便随后链接到该锚点。如果没有首先对部分的锚点进行命名，就无法链接到锚点。

 <a name="section1">Section1</a>

　　在上面的例子中，位于<a>与</a>之间的文本就是显示在Web页面上的文本，它将该锚点标识为“Section1”。如果不喜欢为锚点定义一个标签，也可以使之保持空白。

 <a name="top"></a>

5.2.2  链接到锚点

　　要创建锚点，只需要使用a元素和name属性。要定义到锚点的链接，只需将一个井号（#）和锚点名称作为href属性的值即可。

 <a href="#top">Return to th top of the page</a>

　　如果想创建一个指向另一个Web页面中某个特定部分的链接（即不在当前页面之中），就可以使用目标页面的文件名和锚点名称，在二者中间用一个井号（#）隔开。

 <a href="index.html#intro">View Introduction</a>

5.3  定义链接的样式

　　在样式表中，实际上通过a元素来定义链接的颜色。

 <style type="text/css">
 body{background-color:white;}
 a:link{color:blue;}  /*a:link定义链接到被单击之前的颜色*/
 a:visited{color:purple;}  /*a:visited定义链接到被单击之后和被访问过之后的颜色*/
 a:hover{color:orange;}  /*a:hover定义当鼠标悬停于链接之上时，链接呈现的颜色*/
 a:active{color:red;}  /*a:active定义链接正在被单击时的颜色*/
 </style>

5.3.1  默认的链接颜色
　　在绝大多数情况下，浏览器默认的链接颜色是蓝色，默认的已访问链接的颜色是紫色，默认的活动链接的颜色是红色。

　　虽然默认的链接颜色并不是硬性要求，而且并不总是可能采取默认颜色，但对于未访问链接、已访问链接、活动链接，采用默认的蓝色、紫色和红色是很好的。

5.3.2  其它的链接样式

　　text-decoration属性用于定义在链接的文本之下是否显示下划线。默认情况下，所有链接的文本之下都会显示一条下划线，下划线的颜色与链接文本的颜色相同。

　　使用text-decoration属性，可以将其设置为overline（上划线）、line-through（中划线）和none（不带划线）。

 <style type="text/css">
 body{background-color:white;}
 a:link{
 color:blue;
 font-weight:bold;
 }
 a:visited{
 color:purple;
 }
 a:hover{
 color:orange;
 font-weight:bold;
 text-decoration:none;
 background-color:yellow;
 }
 a:active{
 color:red;
 font-weight:bold;
 }
 </style>

5.4  定制链接：设置Tab键顺序、键盘快捷方式和目标窗口

　　通过设置标题、Tab键顺序、键盘快捷方式和目标窗口，还可以进一步定制链接。
5.4.1  标题

　　当在某个链接（或在任何其它页面元素）中添加title属性时，实际上是为浏览器和用户提供提供了关于当前内容更为详细的一个说明——对于链接而言，就是对链接所指向目标文件的进一步说明。对于如何显示title属性的内容，不同浏览器之间可能会有所差异，但在绝大多数情况下，当把鼠标指针放在该链接上时，title属性指定的文本将以“工具提示”的方式显示出来。

 <a href="www.baidu.com" title="visit baidu">百度一下</a>

　　W3C鼓励尽可能多地在页面上添加title属性，包括图像、指向段落和文本部分的链接等，因为title属性有助于样式表的开发和提高页面的可用性。

5.4.2  Tab键顺序

　　使用tabindex属性，可以以手动方式定制Web页面上链接或表单字段元素的Tab键顺序。

 <!-- 当用户使用tab键在Web页面中导航时，tabindex属性的值定义了链接被选中的顺序  -->
 <a href="http://www.w3school.com.cn/" tabindex="1">W3School</a><br />
 <a href="http://www.google.com/" tabindex="2">Google</a><br />
 <a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>

5.4.3  键盘快捷方式

　　使用accesskey属性可以为Web页面中的链接设置相应的快捷方式。

 <!--  accesskey属性的值定义了用户应该输入的键盘快捷键 -->
 <a href="http://www.w3school.com.cn/" tabindex="1" accesskey="1">W3School</a>（Alt-1）<br />
 <a href="http://www.google.com/" tabindex="2" accesskey="2">Google</a>（Alt-2）<br />
 <a href="http://www.microsoft.com/" tabindex="3" accesskey="3">Microsoft</a>（Alt-3）

5.4.4  目标窗口
　　使用target属性来指定加载链接的浏览器窗口。

　　target属性常用的值：

• _blank：在一个新的、未命名的浏览器窗口中打开链接
• _self：在当前使用的同一个浏览器窗口中打开链接

 <a href="http://www.w3school.com.cn/" target="_blank">W3School</a>

 <a href="http://www.w3school.com.cn/" target="_self">W3School</a>