《HTML5与CSS3基础教程》第六章学习笔记 链接

第6章 链接

• 链接有两个主要部分：
  • 目标：指定访问者点击链接时会发生什么，常见的是连接到其他网页或者网页的特定位置
  • 标签：访问者在浏览器中看到的部分，激活标签就可以到达连接的目标

锚：网页的特定位置称之为“锚”

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

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

• a元素：标签定义超链接，用于从一张页面链接到另一张页面

Cookie and Woody
    
    
    

• rel属性：定义当前文档和被连接文档的关系

一般是rel=external，说明这是一个指向外部网站的链接

2.HTML块级链接

    
A giraffe escaped from the zoo today, and animals rejoiced worldwide.
    
Read more

HTML5几乎允许在链接内包含任何类型的元素或元素组,例如段落、列表、整篇文章和区块——几乎任何元素都行（但其他链接、音频、视频、表单元素、iframe等交互式内容除外），这些元素大部分为块级元素。

建议将最相关的内容放在链接的开头，而且不要在一个链接中放入过多内容

通常，对指向站内网页的链接使用相对URL，对指向其他网站页面的链接使用绝对URL

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

6.2 创建锚并连接到锚

这是锚1
这是锚2

锚1
锚2

这是锚1
这是锚2

锚1

锚2

6.3 创建其他类型的链接

You can link directly to a photo or even make links out of photos. For example, the following image is linked to a flowers photo gallery page. 

Listen to tickling of the ivories (MP3, 1.3 MB) or  watch a paddle steamer (MP4, 2.4 MB).These link directly to the files (handy for downloading).

Send feedback to someone@ somedomain.com.

Call now for free things! 1 (800) 123-4567

提示　如果链接指向的文件是浏览器不知道如何处理的类型（例如Excel文件），浏览器将试着打开一个辅助程序来查看这个文件，或试着将它下载到访问者的磁盘上。

提示　建议不要使用指向电子邮件地址的链接，因为垃圾邮件机器人会从网页上搜集这些地址并向其发送垃圾邮件。最好使用描述性的文字表示电子邮件地址，如“someone at some domain”，不过这样做也并非万无一失。

提示 　在理解tel:的智能手机里，如果点击这样的链接，手机就会询问用户是否需要拨打该号码。对于一些不是电话的设备（如iPad），则会询问用户是否需要将该号码添加到通讯录里。此外，有的桌面浏览器在这种情况下会启动Google Voice或Skype，而其他的浏览器则不知道该如何处理这种情况。