第6章 链接
- 链接有两个主要部分：
- 目标：指定访问者点击链接时会发生什么，常见的是连接到其他网页或者网页的特定位置
- 标签：访问者在浏览器中看到的部分，激活标签就可以到达连接的目标
锚：网页的特定位置称之为“锚”
6.1 创建指向另一个网页的链接
1.创建指向另一个网页的链接
a元素：标签定义超链接，用于从一张页面链接到另一张页面
<a href="cats.html">Cookie and Woody</a>
<!-- <a></a>：a元素 -->
<!-- cats.html：链接地址 -->
<!-- Cookie and Woody：链接标签 -->
rel属性：定义当前文档和被连接文档的关系
一般是
rel=external，说明这是一个指向外部网站的链接
2.HTML块级链接
<a href="giraffe-escapes.html">
<p>A giraffe escaped from the zoo today, and animals rejoiced worldwide.</p>
<p>Read more</p>
</a>
HTML5几乎允许在链接内包含任何类型的元素或元素组,例如段落、列表、整篇文章和区块——几乎任何元素都行（但其他链接、音频、视频、表单元素、iframe等交互式内容除外），这些元素大部分为块级元素。
建议将最相关的内容放在链接的开头，而且不要在一个链接中放入过多内容
通常，对指向站内网页的链接使用相对URL，对指向其他网站页面的链接使用绝对URL
提示 不管怎样，应避免使用“点击此处”作为标签。这种类型的链接文本在万维网上实在是太常见了，它会破坏网站的可用性和可访问性，从而对网站的拥有者产生不利的影响。当用户快速扫过页面上的链接（无论是通过屏幕还是通过屏幕阅读器）时，会发现“点击此处”缺乏上下文（“点击此处？为什么？”）。它对激活链接几乎不会产生激励，而且依赖于访问者阅读链接周围的文字，并寄希望于这些文字可以解释链接的目的。不难理解，访问者通常更倾向于跳过这样的链接。此外，正如本章开头提到的，“点击”一词并不适用于用户触发链接的所有方式。相反，应该使用文本中已经存在的关键字对链接进行标识。例如，应使用“了解我们的销售情况”，而不是“点击此处了解我们的销售情况”
6.2 创建锚并连接到锚
<a href="#anchor-01">这是锚1</a>
<a href="#anchor-02">这是锚2</a>
<p id="anchor-01">锚1</a>
<p id="anchor-02">锚2</a>
锚1
锚2
6.3 创建其他类型的链接
<p>You can link directly to <a href="img/blueflax.jpg">a photo</a> or even make links out of photos. For example, the following image is linked to a flowers photo gallery page. <a href="gallery-flowers.html" title="More flower images"><img src="img/ blueflax.jpg" width="165" height="105" alt="Blue Flax" /></a></p>
<p><a href="media/piano.mp3">Listen to tickling of the ivories</a> (MP3, 1.3 MB) or <a href="media/paddle-steamer.mp4"> watch a paddle steamer</a> (MP4, 2.4 MB).These link directly to the files (handy for downloading).</p>
<p>Send feedback to <a href="mailto: [email protected]">someone@ somedomain.com</a>.</p>
<p>Call now for free things! <a href="tel:+18001234567">1 (800) 123-4567</a></p>
提示 如果链接指向的文件是浏览器不知道如何处理的类型（例如Excel文件），浏览器将试着打开一个辅助程序来查看这个文件，或试着将它下载到访问者的磁盘上。
提示 建议不要使用指向电子邮件地址的链接，因为垃圾邮件机器人会从网页上搜集这些地址并向其发送垃圾邮件。最好使用描述性的文字表示电子邮件地址，如“someone at some domain”，不过这样做也并非万无一失。
提示 在理解tel:的智能手机里，如果点击这样的链接，手机就会询问用户是否需要拨打该号码。对于一些不是电话的设备（如iPad），则会询问用户是否需要将该号码添加到通讯录里。此外，有的桌面浏览器在这种情况下会启动Google Voice或Skype，而其他的浏览器则不知道该如何处理这种情况。
