文章

3 链接标签

发表于 更新于
作者 Hacket Zeng
15 分钟阅读
3 链接标签

a 标签

<a> 标签代表一个可以跳转的链接。它不仅可以跳转到其他页面，也可以跳转到文本、图像、文件等资源，甚至当前页面的某个位置。可以这样说，所有互联网上的资源，都可以通过 <a> 访问。

1

<a href="https://wikipedia.org/">维基百科</a>

<a> 标签内部不仅可以放置文字，也可以放置其他元素，比如段落、图像、多媒体等等。

1
2
3

<a href="https://www.example.com/">
  <img src="https://www.example.com/foo.jpg">
</a>

属性

href

href 属性给出链接指向的网址。它的值应该是一个 URL 或者锚点。

1

<a href="#demo">示例</a>

href 属性的值是#加上锚点名称。点击后，浏览器会自动滚动，停在当前页面里面 demo 锚点所在的位置。

hreflang

hreflang 属性给出链接指向的网址所使用的语言，纯粹是提示性的，没有实际功能，主要供搜索引擎使用。

1
2
3
4

<a
  href="https://www.example.com"
  hreflang="en"
>示例网址</a>

如果某个资源有多种语言的不同版本，可以将 hreflang 设为 x-default，表示哪一个链接是默认版本。

1
2

<a href="https://example.com" hreflang="x-default">English</a>
<a href="https://example.com/de" hreflang="de">German</a>

hreflang 属性所用的语言代码，跟通用的 lang 属性一样。

title

title 属性给出链接的说明信息。鼠标悬停在链接上方时，浏览器会将这个属性的值，以提示块的形式显示出来。

1
2
3
4

<a
  href="https://www.example.com/"
  title="hello"
>示例</a>。

target

target 属性指定如何展示打开的链接。它可以是在指定的窗口打开，也可以在 <iframe> 里面打开。

1
2

<p><a href="http://foo.com" target="test">foo</a></p>
<p><a href="http://bar.com" target="test">bar</a></p>

上面代码中，两个链接都在名叫 test 的窗口打开。首先点击链接 foo，浏览器发现没有叫做 test 的窗口，就新建一个窗口，起名为 test，在该窗口打开 foo.com。然后，用户又点击链接 bar，由于已经存在 test 窗口，浏览器就在该窗口打开 bar.com，取代里面已经打开的 foo.com。

target 属性的值也可以是以下四个关键字之一。

  • _self：当前窗口打开，这是默认值。
  • _blank：新窗口打开。
  • _parent：上层窗口打开，这通常用于从父窗口打开的子窗口，或者 <iframe> 里面的链接。如果当前窗口没有上层窗口，这个值等同于 _self。
  • _top：顶层窗口打开。如果当前窗口就是顶层窗口，这个值等同于 _self。
1
2
3
4

<a
  href="https://www.example.com"
  target="_blank"
>示例链接</a>

注意，使用 target 属性的时候，最好跟 rel="noreferrer" 一起使用，这样可以避免安全风险

rel

rel 属性说明链接与当前页面的关系。

1

<a href="help.html" rel="help">帮助</a>

下面是一些常见的 rel 属性的值。

  • alternate：当前文档的另一种形式，比如翻译。
  • author：作者链接。
  • bookmark：用作书签的永久地址。
  • external：当前文档的外部参考文档。
  • help：帮助链接。
  • license：许可证链接。
  • next：系列文档的下一篇。
  • nofollow：告诉搜索引擎忽略该链接，主要用于用户提交的内容，防止有人企图通过添加链接，提高该链接的搜索排名。
  • noreferrer：告诉浏览器打开链接时，不要将当前网址作为 HTTP 头信息的 Referer 字段发送出去，这样可以隐藏点击的来源。
  • noopener：告诉浏览器打开链接时，不让链接窗口通过 JavaScript 的 window.opener 属性引用原始窗口，这样就提高了安全性。
  • prev：系列文档的上一篇。
  • search：文档的搜索链接。
  • tag：文档的标签链接。

referrerpolicy

referrerpolicy 属性用于精确设定点击链接时，浏览器发送 HTTP 头信息的 Referer 字段的行为。

该属性可以取下面八个值：no-referrer、no-referrer-when-downgrade、origin、origin-when-cross-origin、unsafe-url、same-origin、strict-origin、strict-origin-when-cross-origin。

其中，no-referrer 表示不发送 Referer 字段，same-origin 表示同源时才发送 Referer 字段，origin 表示只发送源信息（协议 + 域名 + 端口）。其他几项的解释，请查阅 HTTP 文档。

ping

ping 属性指定一个网址，用户点击的时候，会向该网址发出一个 POST 请求，通常用于跟踪用户的行为。

1
2
3

<a href="http://localhost:3000/other" ping="http://localhost:3000/log">
  Go to Other Page
</a>

type

type 属性给出链接 URL 的 MIME 类型，比如到底是网页，还是图像或文件。它也是纯粹提示性的属性，没有实际功能。

1
2
3
4

<a
  href="smile.jpg"
  type="image/jpeg"
>示例图片</a>

download

download 属性表明当前链接用于下载，而不是跳转到另一个 URL。

1

<a href="demo.txt" download>下载</a>

注意，download 属性只在链接与网址同源时，才会生效。也就是说，链接应该与网址属于同一个网站。
如果 download 属性设置了值，那么这个值就是下载的文件名。

1
2
3
4

<a
  href="foo.exe"
  download="bar.exe"
>点击下载</a>

注意，如果链接点击后，服务器的 HTTP 回应的头信息设置了 Content-Disposition 字段，并且该字段的值与 download 属性不一致，那么该字段优先，下载时将显示其设置的文件名。
download 属性还有一个用途，就是有些地址不是真实网址，而是数据网址，比如 data: 开头的网址。这时，download 属性可以为虚拟网址指定下载的文件名。

1

<a href="data:,Hello%2C%20World!">点击</a>

上面链接点击后，会打开一个虚拟网页，上面显示 Hello World!。

1
2
3
4

<a
  href="data:,Hello%2C%20World!"
  download="hello.txt"
>点击</a>

上面链接点击后，下载的 hello.txt 文件内容就是 “Hello, World!”。

邮件链接

链接也可以指向一个邮件地址，使用 mailto 协议。用户点击后，浏览器会打开本机默认的邮件程序，让用户向指定的地址发送邮件。

1

<a href="mailto:contact@example.com">联系我们</a>

除了邮箱，邮件协议还允许指定其他几个邮件要素。

  • subject：主题
  • cc：抄送
  • bcc：密送
  • body：邮件内容

使用方法是将这些邮件要素，以查询字符串的方式，附加在邮箱地址后面：

1
2
3

<a
  href="mailto:foo@bar.com?cc=test@test.com&subject=The%20subject&body=The%20body"
>发送邮件</a>

上面代码中，邮件链接里面不仅包含了邮箱地址，还包含了 cc、subject、body 等邮件要素。这些要素的值需要经过 URL 转义，比如空格转成%20。

不指定邮箱也是允许的，就像下面这样。这时用户自己在邮件程序里面，填写想要发送的邮箱，通常用于邮件分享网页。

1

<a href="mailto:">告诉朋友</a>

电话链接

如果是手机浏览的页面，还可以使用 tel 协议，创建电话链接。用户点击该链接，会唤起电话，可以进行拨号。

1

<a href="tel:13312345678">13312345678</a>

上面代码在手机中，点击链接会唤起拨号界面，可以直接拨打指定号码。

link 标签

介绍

<link> 标签主要用于将当前网页与相关的外部资源联系起来，通常放在 <head> 元素里面。最常见的用途就是加载 CSS 样式表。

1

<link rel="stylesheet" type="text/css" href="theme.css">

除了默认样式表，网页还可以加载替代样式表，即默认不生效、需要用户手动切换的样式表。

1
2
3

<link href="default.css" rel="stylesheet" title="Default Style">
<link href="fancy.css" rel="alternate stylesheet" title="Fancy">
<link href="basic.css" rel="alternate stylesheet" title="Basic">

default.css 是默认样式表，默认就会生效。fancy.css 和 basic.css 是替换样式表（rel=”alternate stylesheet”），默认不生效。title 属性在这里是必需的，用来在浏览器菜单里面列出这些样式表的名字，供用户选择，以替代默认样式表。

<link> 还可以加载网站的 favicon 图标文件。

1

<link rel="icon" href="/favicon.ico" type="image/x-icon">

手机访问时，网站通常需要提供不同分辨率的图标文件。

1
2

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png">

<link> 也用于提供文档的相关链接，比如下面是给出文档的 RSS Feed 地址。

1

<link rel="alternate" type="application/atom+xml" href="/blog/news/atom">

属性

href 属性

href 属性表示 <link> 标签所链接的资源。

rel 属性

rel 属性表示外部资源与当前文档之间的关系，是 <link> 标签的必需属性，可以视为对 href 属性所链接资源的说明。

它可以但不限于取以下值。

  • alternate：文档的另一种表现形式的链接，比如打印版。
  • author：文档作者的链接。
  • dns-prefetch：要求浏览器提前执行指定网址的 DNS 查询。
  • help：帮助文档的链接。
  • icon：加载文档的图标文件。
  • license：许可证链接。
  • next：系列文档下一篇的链接。
  • pingback：接收当前文档 pingback 请求的网址。
  • preconnect：要求浏览器提前与给定服务器，建立 HTTP 连接。
  • prefetch：要求浏览器提前下载并缓存指定资源，供下一个页面使用。它的优先级较低，浏览器可以不下载。
  • preload：要求浏览器提前下载并缓存指定资源，当前页面稍后就会用到。它的优先级较高，浏览器必须立即下载。
  • prerender：要求浏览器提前渲染指定链接。这样的话，用户稍后打开该链接，就会立刻显示，感觉非常快。
  • prev：表示当前文档是系列文档的一篇，这里给出上一篇文档的链接。
  • search：提供当前网页的搜索链接。
  • stylesheet：加载一张样式表。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!-- 作者信息 -->
<link rel="author" href="humans.txt">

<!-- 版权信息 -->
<link rel="license" href="copyright.html">

<!-- 另一个语言的版本 -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">

<!-- 联系方式 -->
<link rel="me" href="https://google.com/profiles/someone" type="text/html">
<link rel="me" href="mailto:name@example.com">
<link rel="me" href="sms:+15035550125">

<!-- 历史资料 -->
<link rel="archives" href="http://example.com/archives/">

<!-- 目录 -->
<link rel="index" href="http://example.com/article/">

<!-- 导航 -->
<link rel="first" href="http://example.com/article/">
<link rel="last" href="http://example.com/article/?page=42">
<link rel="prev" href="http://example.com/article/?page=1">
<link rel="next" href="http://example.com/article/?page=3">

hreflang 属性

hreflang 属性用来表示 href 属性链接资源的所用语言，通常指当前页面的其他语言版本。

1

<link href="https://example.com/de" rel="alternate" hreflang="de" />

资源的预加载

某些情况下，你需要浏览器预加载某些资源，也就是先把资源缓存下来，等到使用的时候，就不用再从网上下载了，立即就能使用。预处理指令可以做到这一点。
预加载主要有下面五种类型：

  • <link rel="preload">
  • <link rel="prefetch">
  • <link rel="preconnect">
  • <link rel="dns-prefetch">
  • <link rel="prerender">

media 属性

media 属性给出外部资源生效的媒介条件。

1
2

<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">
front-end, HTML
HTML
本文由作者按照 CC BY 4.0 进行授权