别再纠结了！尽管把你的烦恼交给我们吧，我们会将问题转化为一整套解决方案提供给你！方案的前期咨询根本不需你花一分钱。还不马上咨询？
或许一套通用软件就能让你从烦恼中解脱出来，那就先到我们的软件产品仓库中选一款吧！我们还可以为你提供现有软件的扩展定制，即客户化定制。
购买软件与汉堡包不同，软件产品和软件实施相结合才能发挥作用！没有良好的软件实施，必败！而采用我们的方案或产品，免费获得软件实施支持。
坚持用心建站！ 您只需告知所需要到达的终点，我们将带你一起穿越网站策划、平面设计、页面制作、程序开发和后期维护，享受全程的贴心服务。
何必专门招人负责网站维护呢？你可能反驳招人能兼干其他工作，但是这样就不够专注。而我们提供的网站后期维护更专业，更专注，更划算。
18. HTML 链接——让我们建一张网吧！
- 详细资料
- 发布于 2012年9月18日
- 点击数：4582
序言
在本篇文章中，你们将学习 Web 发展史中最具有创新性的发明之一，即“链接”。有了链接，阅读文档的人可以通过点击链接跳转到另一个文档，还可以从一个服务器跳转到另一个服务器，且无需断开连接和再次连接。自链接发明以来，Web 已发生了很大的变化，但有一点依然没变，那就是：链接是 Web 体验非常重要的部分，你使用链接的方式，将使访问者易于或难于访问你的网站。
在你们学习完本篇文章后，你们将了解如何创建易于理解的，且可以在任何环境下发挥功能的链接。此外，你们还将了解链接如何影响你的网站在搜索引擎上的排名，并了解一些为链接添加文字说明的诀窍。如同前几篇文章一样，点击这里可下载一个zip 文件，其中包含几个我在本篇文章中将要引用的文件。本篇文章的内容目录如下：
- 什么是链接？
- 一个锚链接的剖析
- 链接还是目标？
name属性和href属性 - 不要让被链接的对象有任何的含糊
- 框架和弹出窗口——不要使用
- 出站链接和入站链接的优点
- 为链接添加文字说明
- 对链接进行样式化
- 总结
- 练习题
什么是链接？
链接是一个网站（通常使用 HTML 创建，但不总是使用 HTML 创建）中指向其它资源的部分，这里的其它资源包括其它 HTML 文档、文本文件、PDF 等。有一些通过使用 link 元素创建的链接（在前几篇文章中你们已经看到过这类链接，它们被用于将 CSS 文件导入 HTML 文档）是浏览器必须自动跟踪的链接，还有一些链接则是用户可选择去激活的链接。这些链接被称为 anchors（锚），你可以通过使用 a 元素把锚加入文档。
一个锚链接的剖析
你可以通过在元素内加入一个 a 元素，将文档中的任何内联元素设置为一个锚链接。例如，在以下这个 HTML 文档中，Yahoo Developer Network（雅虎开发者网络）这段文本就被设置为一个链接（linkexample.html）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Link Example</title> <link rel="stylesheet" href="/styles.css"> </head> <body> <h1>A link to the YDN</h1> <p><a href="http://developer.yahoo.com">Yahoo Developer Network</a></p> </body> </html>
激活这个链接的访问者（可以通过鼠标点击，或在某些情况下使用键盘或语音来激活链接），将离开当前所在的网站而前往雅虎开发者网络站点。链接被激活后自身的外观也可以发生变化，这将在本篇文章讲述对链接进行样式化的部分讨论。
锚元素具有以下几个可用属性：
href属性：锚指向的资源（外部文件或一个锚 ID）。id属性：如果锚被充当一个目标，而不是一个链接时，使用锚 ID。title属性：锚所指向外部资源的附加信息。
还是让我们先考察一下锚最重要的属性，然后再讲述，你怎么做才能容易地抓牢你的访问者。
链接还是目标？name 属性和 href 属性
a 元素可发挥几种功能，但这取决于你为它赋予的属性。最常用到的属性将是 href 属性，它定义链接所指向的资源。同时，这个属性可包含不同的属性值：
- 在同一文件夹中的一个 URL 地址，相对于当前文件夹（例如 “../../help/help.html”，其中连写的两个英文句点“..”，指的是“站点文件夹层级中的上一级目录”），或者相对于服务器根目录（例如“/help/help.html”，在 URL 地址最前面有一个“/”，指的是地址开始于页面所在计算机的根目录）
- 在另一台不同服务器上的一个 URL 地址（例如“http://wait-till-i.com” 或 “ftp://ftp.opera.com/” 或“http://developer.yahoo.com/yui”）
- 前面有一个 # 符号的一个片段标识符或锚点名称（例如“#menu”），它指向位于同一文档中的某个目标。
- URL 地址和片段标识符的混合体，你可以将
href属性指向一个后面跟有片段标识符的 URL 地址（例如 “http://developer.yahoo.com/yui/#cheatsheets”），从而直接链接到一个不同文件的某一个部分。
以上任何一种 href 属性值都将使 a 元素成为一个指向某处的链接。另一方面，id 属性将使 a 元素成为页面内的一个锚——别的链接指向的某种东西。这有点儿晕，因为它们都使用锚元素（a）。为了便于记忆，你可以这样想：id 属性让一个链接成为一个锚，你可以使用这个锚与文档某一个部分相链接。以下这个示例 HTML 文档中就包含了所有不同类型的链接（linkexamples.html）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Different Link Example</title>
<link rel="stylesheet" href="/linkexamplestyles.css">
</head>
<body>
<h1>Different Link examples</h1>
<h2>Example of in-page navigation with fragment identifiers, links and anchors</h2>
<div id="nav">
<ul id="toc">
<li><a href="#sec1">Section One</a></li>
<li><a href="#sec2">Section Two</a></li>
<li><a href="#sec3">Section Three</a></li>
<li><a href="#sec4">Section Four</a></li>
<li><a href="#sec5">Section Five</a></li>
</ul>
</div>
<div id="content">
<div>
<h2><a id="sec1">Section #1</a></h2>
<p><a href="#toc">Back to menu</a></p>
</div>
<div>
<h2><a id="sec2">Section #2</a></h2>
<p><a href="#toc">Back to menu</a></p>
</div>
<div>
<h2><a id="sec3">Section #3</a></h2>
<p><a href="#toc">Back to menu</a></p>
</div>
<div>
<h2><a id="sec4">Section #4</a></h2>
<p><a href="#toc">Back to menu</a></p>
</div>
<div>
<h2><a id="sec5">Section #5</a></h2>
<p><a href="#toc">Back to menu</a></p>
</div>
</div>
<h2>Some other link examples</h2>
<ul>
<li><a href="http://developer.yahoo.com">Yahoo Developer Network</a></li>
<li><a href="http://dev.opera.com/articles/view/the-freelancing-business-part-1-pricing/#marketing">Tips on marketing yourself</a></li>
<li><a href="ftp://get.opera.com/pub/opera/win/">Download different Opera versions</a></li>
<li><a href="http://farm1.static.flickr.com/56/188791635_0b8bdd808d.jpg?v=0">Photo of my book</a></li>
</ul>
</body>
</html>
用浏览器打开这个文档，并试着去激活里面的一些链接。你会发现激活第一个列表中的任何链接，就都将跳转到文档的相应部分。这是因为它们都是由同一个片段标识符连接起来的，例如，该列表中的第一个链接有一个属性值为 #sec1 的 href 属性，其属性值与第一个 h2 元素内的链接的 ID 值相同。这就是在你把一个文档中的两个锚元素连接起来时所全部需要做的，即如果你把其链接在 href 属性中时，使用相同的前面带有一个 # 的属性值。你可能已经发现浏览器中的地址栏中所显示的 URL 地址已经改变，现在片段识别符被显示在地址的最后，这意味着访问者可以把这个部分加为书签，或将该链接用电子邮件发送给其他人，告诉他们应该访问的确切的 URL 地址。
不过，如果你激活任何一个“Back to menu”的链接，同样的功能也会出现。这是如何实现的呢？原因在于片段标识符可以是任何带有一个 ID 的元素。简单地说：
- 锚链接可以有一个片段标识符，如同
ref的属性值。这个片段标识符必须以 # 起始。 - 当被激活时，这个链接将跳转到任何一个带有这个
id属性值的 HTML 元素。页面上的每个 ID 都必须是唯一的。 - ID 遵循一些命名约定。最重要的一点是，ID 都必须以一个字母数字字符起始，且其中不能有任何空格。
以上讲述了示例文档中链接到菜单和不同部分的链接，其它链接又是怎么样的呢？如果你一一激活这些链接，就会看到它们指向不同的目标，激活一个链接会被带到另一个网站，激活另一个链接则显示一张图片，再激活一个链接则显示另一个网页中的某个部分（通过跳转到一个特定的 ID）。如果这些链接你都能正常激活，那是很好的事。不过如果你或你使用的浏览器不能理解其中一些资源，那又将如何呢？
不要让被链接的对象有任何的含糊
关于链接，必须记住的最重要一点是：它们是你网站最基本的一部分，对于网站访问者来说，链接非常重要。他们确信点击你在网页上提供的链接，就可以找到适当的相关信息。如果由于被链接的资源不可用，或是以访问者无法打开的格式提供的资源，造成链接不能正常工作。那么，将损害你网站的可信度，这是你应该避免的。
使用 title 属性为链接提供附加信息
像几乎所有其它 HTML 元素一样，你也可以为 a 元素添加 title 属性，用于为链接添加附加信息。这样当访问者将鼠标悬停在链接上时，浏览器就会显示一个“工具提示”，告诉访问者该链接的附加信息。例如，你可以在 title 属性中加入对被链接文档的内容和地址的简短介绍（titleexample.html）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Adding extra information with a title attribute</title>
<link rel="stylesheet" href="/linkexamplestyles.css">
</head>
<body>
<h1>Adding extra information with a title attribute</h1>
<ul>
<li>Find more information on the <a title="The Yahoo Developer Network is the main hub for all the developer tools Yahoo offers, including the Yahoo User Interface Library (YUI) and the Design Patterns repository" href="http://developer.yahoo.com">Yahoo Developer Network</a>.</li>
</ul>
</body>
</html>
说明1：为链接添加 title 属性，以让在访问者将鼠标悬停在链接之上时，以工具提示的形式显示信息
不过，你不能指望访问者都有足够的耐心和良好的手眼协调能力，都能看到以工具提示形式显示的重要信息。那些完全看不见网页的视力受损的用户，就几乎肯定无法获取这些信息。尽管屏幕阅读器有可以为视力受损的用户读出这种 title 属性的功能选项，但在默认状态下这个功能是被关闭的，这也就是你绝不应使用 title 属性来传达关键性信息的原因之所在。这里所称的关键性信息，可包括：
- 指向非 HTML 文档的资源，如 PDF 文件、图像、视频、声音文件或下载等的链接。
- 离开当前站点，指向另一个服务器的链接（外部链接和内部链接的对比）。
- 指向将在一个不同的框架或弹出窗口中打开的文档的链接。
链接到非 HTML 文档的资源——不要让人们猜测
如果你点击一个链接，而你使用的浏览器却不知道如何处理该链接指向的资源，那可能是很恼人的。很多网站都存在这个问题，那就是在提供一些指向图像、PDF 文件和视频等的链接时，未提醒访问者“这些链接指向的是浏览器可能无法直接打开的资源”。不可忽视的是，视频常常引起浏览器崩溃。此外，被链接的资源的文件体积可能（如 20MB 大的 PDF 文件）很大，这意味着访问者可能会选择下载文件而不是在浏览器中直接打开文件，以避免消耗大量内存或干脆就无法打开文件。
Web 有一个最为成功之处，即不会让访问者去猜测当他们在 Web 上执行某一操作时会发生什么，而是明确地告诉他们执行的操作将会得到什么结果。就链接而言，你需要做的是明确地告诉访问者被链接的资源是什么。以下是一些示例（linkingnonhtml.html）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Linking non-HTML resources</title>
<link rel="stylesheet" href="/linkexamplestyles.css">
</head>
<body>
<h1>Linking non-HTML resources</h1>
<ul>
<li>Find more information on the <a href="http://developer.yahoo.com">Yahoo Developer Network site (external)</a></li>
<li>Download the <a href="http://www.wait-till-i.com/stuff/JavaScript-DOM-Cheatsheet.pdf">Dom Cheatsheet (PDF, 85KB)</a></li>
<li>Pick and <a href="ftp://get.opera.com/pub/opera/win/">download different Opera versions from their FTP (external)</a></li>
<li>Check out a <a href="http://farm1.static.flickr.com/56/188791635_0b8bdd808d.jpg?v=0">Photo of my book (JPG, 200KB)</a></li>
</ul>
</body>
</html>
通过提供此类关于被链接的文件及其大小的信息，你就可以让访问者自行决定如何去处理这些链接，而不是预先就假定访问者使用的浏览器已做了一些设置或已安装了一些软件。如果你再对链接进行了适当的样式化，你还可以让链接的外观变得更为好看且一目了然。为保险起见，你还可以在页面上放置一个帮助文件，说明不同文件格式之间的差别，以及在哪里可以下载到显示或打开这些格式的文件的软件。
外部链接和内部链接的对比
公司的决策人都很害怕人们在访问公司的网站时过早地离开网站。这常常是很多公司不在其网站上提供第三方链接（除非第三方为通过链接而实现的访问量支付费用）的原因之所在。这是错误的做法，我将在后面部分再讨论这个问题。现在我将谈谈为把访问者留在网站上人们所采取的措施，以及这些措施如何影响到网站的成功。
框架和弹出窗口——不要使用
既想在页面上提供一些外部链接，又害怕因访问者点击这些外部链接而让他们离开当前访问的网站，使得一些 Web 开发人员发明了所谓框架和弹出窗口，这其实是两种损害网站可用性的不好做法。
使用 HTML 框架意味着你把在浏览器中显示的页面分隔为几个不同的文件。这样做的好处是，无论你从自己的服务器还是从第三方的服务器载入页面的某些部分时，文件看起来似乎都是一样的。但实际上框架会损害用户体验，有很多负面效果：
- 这样搜索引擎就不能将整个网页编入索引，而可能在搜索结果中，显示那些离开上下文就毫无意义网页的某些部分。
- 访问者无法将整个网页加入书签，也就是说，他们在下一次打开书签时，看到的将不是所存入的整个网页，而依然是上次所看到的框架部分。
- 那些依靠辅助技术设备上网的访问者，在框架间导航时会非常困难。
- 第三方可能不愿看到其网站在框架内显示，因此会使用“framebreaker”（框架破坏者）脚本。在你试图将他们的网站嵌入框架时，以一个真正的 URL 地址来替代框架。这是为了阻止不法分子诱使互联网用户，在某个看起来像银行站点的网站上，输入如信用卡号码等信息（被称为“网络钓鱼”）。
放在一个框架集里的链接，使用锚的 target 属性来定位正确的框架。框架集中的每一个框架都有一个特定的名称，激活链接就将在那个框架中打开在 href 属性中所定义的文档。如果框架集不可用时（例如，当一个访问者是通过搜索引擎找到带有链接的文件时），每个链接都会在浏览器的新窗口中打开。
在链接到第三方网站时，在新窗口打开第三方网站也是常用的方式，可通过使用一个脚本化的弹出式窗口或使用属性值为 _blank 的 target 属性实现。由于现代的浏览器都带有弹出式窗口拦截器，现在依靠这种在新窗口中打开第三方网站的技术，已不再是安全和保险的方式。
简言之，除非你真正知道你正在做什么，在创建链接时不要使用 target 属性。总之，使用 target 属性的做法已经过了，这是因为目前多数浏览器都具有多标签浏览界面，这样用户可以在停留在你网站上的同时，在新标签页中打开第三方的网站以备在随后再阅读。在某些情况下，你可能想指明外部链接和内部链接之间的不同，但你还是始终应该让用户自行决定如何去处理这些链接。
出站链接和入站链接的优点
即使第三方是你的竞争对手，你还是可以在自己的网站上创建指向这些第三方网站的链接，这样做是有一些充分理由的。
- 这样做可以让访问者信任你的网站，表明你对自己网站内容的质量有充分的信心，一点也不惧怕来自第三方网站的竞争。
- 这样做也是一个为用户提供全面服务的机会，即你可以将其它网站上的内容和文章，或甚至是产品链接到你的网站上——这些内容和文章或产品是你的网站未提供的，但是是访问你网站的人可能有兴趣做进一步的了解。
- 你可以基于第三方的已发布的一篇老文章，提出问题并提供更好的或是不同的解决方案，为此就可以创建一个指向该篇文章的链接，以作为参照。
至于入站链接（即从第三方网站链接到你的网站上）的有用性，基本上是不言而喻的。在越多的高质量网站上面，有指向你的网站的链接（带有相关的关键词），则你的网站在 Google 等搜索引擎上的排名就会越靠前。不过要做到这一点，你需要先证明，你并不排斥在自己的网站上创建指向其它网站的链接。
由于与链接相关的关键词是很重要的，因此下面我们就要来看一下，创建好链接的另外一个关键因素，即如何为链接添加文字说明。
为链接添加文字说明
在以上关于链接到非 HTML 文档的资源的部分，我已经谈到一些关于为链接添加文字说明的内容。我们应该牢记一点，那就是链接不仅是页面正文的重要组成部分，而且也是页面内的交互性要素。
一些辅助技术设备会向访问者提供一个 Web 文档中的链接列表（而不是整个文档），以使访问者可以快速地在文档中导航，这就意味着你需要确保所创建的链接上面的文字在其所处的语境之外也有明确的含义。要做此种检查，有一个很简便的做法，那就是用 Opera 浏览器打开任何一个网站，然后从菜单中选择“工具>链接”，或是按下 Ctrl + Shift + L，就将看到一个显示文档中所有链接及它们所指向的网址的标签页。
这意味着你不仅应确保所有链接上面的文字都有明确的含义，还应确保不出现具有相同文字说明的链接却指向不同资源的情况。一个典型的错误是使用“点击这里”这类的文字链接， 如“点击这里下载我们工具软件的最新版本”。与此相比，一个好得多的做法是使用指明某一链接是用来做什么的文字，如“点击这里下载我们软件的最新版本” 就最好改为：“你可以点击下载我们工具软件的最新版本并试用它”。
同样地，仅在链接上写上一个“more”（更多）也不是好的做法。在很多新闻网站上，你会发现有很多这种出现在新闻标题和简短摘要后面的“more”或“full story”（详细内容）链接。要解决这个问题，可使用一个代表“more”的被链接的图像，并为图像添加特别的替代文本；或是在链接内的“more”之后添加一个间距，并使用 CSS 将其隐藏。在本课程后面关于菜单和导航的文章中，你们还将学到更多此类技巧和诀窍。
对链接进行样式化
到目前为止，我们尚未深入地讲述 CSS。不过你们应该记住，链接的外观也是非常重要的，有几种不同的链接状态可供选择，这些链接状态（它们与 CSS 伪选择符有关，这将在后面的课程中讲述）包括：
link的默认状态，它定义在文档的某一特定部分链接应显示为什么样子。在默认状态下，未访问的链接显示为蓝色。visited，指以前已经访问过的链接（及可能已在浏览器缓存中保存的链接）的样式。在默认状态下，已访问的链接显示为紫色。hover，指鼠标光标悬停在链接之上时，链接的样式。active，指在激活过程中（即尚在连接到另一个网站的过程之中）的链接的样式；它也是你在浏览器中返回一个页面时最后激活的那个链接的样式。
总结
在本篇文章中，你们学习了关于链接的很多知识，其中最重要的是链接是如何工作的及它们应该发挥的功能。作为一个 Web 开发员，你在以后的职业生涯中还会学到很多有关链接的技术和技巧。本篇文章讲述的只是有关链接的基础知识，我希望这些知识可以帮助你们在以后处理链接时总能先想一想：这样的处理方式真是必要的吗？
在本篇文章中，我讲述了：
a元素及其（赞成使用的）属性的剖析a元素作为链接（具有href属性）与它作为锚（具有name属性）之间的差别- 锚名称需要是唯一的
- 告诉访问者链接所指向的文件的格式及文件大小的必要性
- 如何通过使用
title属性添加将以工具提示形式显示的信息，以及这种方式为什么不是提供关键信息的安全方式 - 外部链接（即指向第三方网站的链接）与内部链接（指向同一服务器上的文件的链接）之间的差别
- 已过时的网页编写习惯，如使用框架和弹出式窗口等，以及为什么不应使用它们
- 导出链接和导入链接的优点
- 如何为链接添加适当的文字，使其在所处的语境之外也有明确的含义；以及这样做为什么是必要的
- 对链接进行样式化的基础知识
掌握了以上这些知识，你就应该能编写出适当地链接在一起的 HTML 文档，并为设计菜单和站点导航做好准备
练习题
- 以下这个链接问题出在那里：
<a href="/report.pdf" title="report as PDF, 2.3MB">get our latest report</a>？ - 链接中的
target属性是用来做什么的？使用这个属性有什么优点吗？ - 我已经讲述过链接和锚之间的关系。那么，有描述文档之间的关系的链接属性吗？
- 你如何创建出这样的链接：即当访问者点击该链接的时候，会被带到页面内的某一个元素？为此你需要什么样的准备工作？
