链接

链接是万维网的命脉。没有它们，每个页面都只能独立存在，同其他所有页面完全地分开。
链接有两个主要的部分：目标和标签。
使用目标（destination）可以指定访问者点击链接时会发生什么。可以创建链接进入另一个页面，在页面内跳转，显示图像，下载文件，呼叫电话，等等。不过，最常见的是连接到其他网页的链接，其次是连接到其他网页特定位置（称为锚，anchor）的链接。目标是通过编写 URL 定义的，通常只能在（桌面）浏览器的状态栏中看到。
链接的第二个部分是标签（label），即访问者在浏览器中看到或在屏幕阅读器中听到的部分。激活标签就可以到达链接的目标。例如，航空公司网站上可能有这样的链接标签：预订航班。标签可以是文本、图像或二者兼有。浏览器通常会将标签文本默认显示为带下划线的蓝色文字。通过 CSS 可以很容易地改变这一样式。

通过键盘进行导航
可以通过键盘对网页进行导航。实际上，有的人由于有一些肢体障碍，无法使用鼠标这样的设备，因此不得不通过键盘对页面进行导航。每按一次 Tab 键，焦点就会转移到 HTML 代码中出现的下一个链接、表单控件或图像映
射（每按一次 Shift+Tab，焦点就会向前转移）。这个顺序不一定与屏幕上出现的顺序一致，因为页面的CSS布局可能不同。通过使用HTML的tabindex属性，可以改变使用Tab键的顺序，但不建议使用，因为在大多数情况下没必要这么做，而且这种方法已经过时了。这种方法可能导致屏幕阅读器用户迷失方向。对内容添加标记的时候，应注意保证转移焦点的顺序是符合逻辑的。应对自己的页面使用 Tab 键进行测试，就像用户的操作一样，再对 HTML 作相应的调整。（注意，如果你使用的是 Mac，这一功能可能被禁用了。如果要开启这一功能，可以在网上搜索“Enabling
keyboard navigation in OS X browsers”（在 OS X 浏览器中激活键盘导航）。

1. 创建指向另一个网页的链接
   (1) 输 入 < a href=“page.html”>， 其 中page.html 是目标网页的URL。
   (2) 输入标签文本，也就是默认突出显示的文本，访问者激活它时，就会转到第 (1) 步中所指向的页面。也可以添加一个 img 元素替代文本（或同文本一起）作为标签。
   (3) 输入 < /a> 结束链接定义。
2. HTML 块级链接
   目前，你已看过一些将某一元素内的一小部分文本作为链接的例子。实际上，HTML5 几乎允许在链接内包含任何类型的元素或元素组。例如段落、列表、整篇文章和区块——几乎任何元素都行（但其他链接、音频、视频、表单元素、iframe等交互式内容除外），这些元素大部分为块级元素。使用 HTML 验证器对页面进行测试可以防止链接中出现不允许包含的元素。
   这 些 块 级 链 接（block-level link） 是HTML5 同 HTML 早期版本有巨大差异的地方。在以前的 HTML 中，链接中只能包含图像、文本短语，以及标记文本短语的元素（如em、strong、cite 等）。

如何使用 target 属性，以及为何不要在大多数情况下使用该属性可以将链接设置为在新的窗口或标签页（取决于所用的浏览器）中打开，但我们将其看
做一种不好的实践，不推荐使用。这样说是有理由的。
首先，应该让用户决定是否在不同的窗口或标签页打开链接，而不是让HTML 开发人员决定。否则，我们就支配了用户的浏览行为。也有一些可用性和可访问性方面的考虑。缺乏经验的用户在激活一个链接却没有在当前窗口看到结果时可能会有一些疑惑。使用浏览器并非对所有人都是一件容易的事。我曾向不同年龄段的人展示标签页，他们之前并不知道可以同时打开多个页面。类似地，屏幕阅读器等辅助设备的用户将不得不花费精力去寻找新的窗口或标签页，前提还是他们明确知道是哪个窗口或标签页加载了新的内容。如果所有这些并未说服你避免将链接设置为在新窗口和标签页打开，或者你的老板或客户不赞同你不使用它们的理由，可以看看如何创建这种链接：在链接定义中输入target=“window”，其中window 是应该显示相应页面的窗口的名称（由你自己选择）。例如，< a href=“some-page.html” target=“doodad”>Some page 会在名为 doodad的新窗口或标签页中打开 some-page.html。如果让多个链接指向同一个窗口（即使用同一个名称），链接将都在同一个窗口打开。或者，如果你希望链接总是在不同的窗口或标签页打开（即使多次激活同一个链接），就使用 HTML 预定义的名称 _blank（target="_blank"）。不过我还是不推荐你这样做，能免则免。
target 还有一种用法，就是在 iframe 中打开链接。可以用同样的方法编写 target，只是其值应与 iframe 的 id 对应。你很少有机会用到这个，特别是在通常不推荐使用 iframe 的情况下（不过它们偶尔会有用武之地）。关于 iframe 元素的更多信息。

通常，激活一个链接会将用户带到对应网页的顶端。如果要想用户跳至网页的特定区域，可以创建一个锚，并在链接中引用该锚。

1. 创建锚的步骤
   (1) 将光标放在希望用户跳转至的元素的开始标签里。
   (2) 输入 id=“anchor-name”，其中anchorname 是在内部用来标识网页中这部分内容的文字。一定要在元素名称和 id 之间保留一个空格，例如 < h2 id=“features”>。
2. 创建链接到特定锚的链接
   (1) 输入 < a href="#anchor-name">，其中anchor-name 是目标的 id 属性值（参见“创建锚 的 步 骤” 中 的 第 (2) 步， 例 如 < a href="#features">。
   (2) 输入标签文本，即突出显示的文本（通常默认显示为带下划线的蓝色文字），也即用户激活它时将用户带到第 (1) 步中引用的区域的文本。跟通常一样，也可以将图像用做标签。
   (3) 输入 < /a> 结束对链接的定义。

创建其他类型链接的步骤
(1) 输入 < a href="。
(2) 输入 URL。对于指向万维网上任何文件（包括图像、ZIP 文件、程序、PDF 及其他等）的链接，输入 http://www.site.com/dir/file.ext，其中
www.site.com 是 主 机 名 称，dir/file.ext 是目标文件的路径。后者包括了文件目录和文件名（以及扩展名）。对于电子邮件地址，输入 mailto:name@
domain.com（不以 http:// 开头），其中 [e-mail] 是电子邮件地址（不过，应避免链接到电子邮件地址）。对于电话号码，输入 tel:+（不以 http://开头）并紧跟着国家代码和电话号码（所有的号码中都不必包含短横线）。号码的长度在每个国家都不一样。例如，美国的国家代码是 1，因此美国的电话号码形如tel:[phone]（英国的国家代码为 44，肯尼亚为 254，依次类推）。
(3) 输入 ">。
(4) 输入链接的标签。标签是默认以下划线和其他颜色突出显示的文本，当用户激活它时，会将访问者带到第 (2) 步中引用的URL。也可以添加一个 img 元素替代文本作为标签。
(5) 输入 < /a>。

将缩略图链接到图像：
你肯定访问过显示几个缩略图（图像的微缩版本）的相册页面，其中缩略图链接到大一些的图像。这样就可以一次看到很多图像，让访问者选择要查看全尺寸版本的图像。
实现其基本版本类似于将鲜花图像链接到其他页面的示例代码。这些页面中的每一个都包含一个全尺寸照片。（也可以在单独一个动态页面中实现，但这是超出 HTML 能力的高级用法。）注意不要让任何给定页面上的缩略图
数量太多。它们可能很小，但每个缩略图都会生成对 Web 服务器的独立请求，合在一起就会让页面变慢。没有规则规定一个页面放多少缩略图是合适的。这部分取决于页面加载的其他资源的数量和大小，也取决于网站的目标受众。例如，移动设备加载资源通常要慢一些。因此，如果你有很多缩略图，就要考虑将它们分入多个页面。可以对页面进行测试，再确定最合适的数量。最后，推荐使用无序列表对缩略图列表进行标记。

本文地址：https://blog.csdn.net/weixin_45823991/article/details/107895673