链接标签

251 阅读6分钟

链接(hyperlink)是互联网的核心。它允许用户在页面上,从一个网址跳转到另一个网址,从而把所有资源联系在一起。

URL 是链接指向的地址。链接不仅可以指向另一个网页,也可以指向文本、图像、文件等资源。可以这样说,所有互联网上的资源,都可以通过链接访问

哪些最常用就多注意哪些用法,不常用的了解即可

<a>

链接通过<a>标签表示,用户点击后,浏览器会跳转到指定的网址。<a>标签内部不仅可以放置文字,也可以放置其他元素,比如段落、图像、多媒体等等。

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

<a>标签有如下属性。

(1)href

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

上文已经给出了完整 URL 的例子,下面是锚点的例子。

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

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

(2)hreflang

hreflang属性给出链接指向的网址所使用的语言,纯粹是提示性的,没有实际功能。

(3)title

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

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

上面代码中,用户鼠标停留在链接上面,会出现文字提示hello。

(4)target

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

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

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

  • _self:当前窗口打开,这是默认值。
  • _blank:新窗口打开。
  • _parent:上层窗口打开,这通常用于从父窗口打开的子窗口,或者<iframe>里面的链接。如果当前窗口没有上层窗口,这个值等同于_self。
  • _top:顶层窗口打开。如果当前窗口就是顶层窗口,这个值等同于_self。
<a
  href="https://www.example.com"
  target="_blank"
>示例链接</a>

上面代码点击后,浏览器会新建一个窗口,在该窗口打开链接,并且新窗口没有名字。

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

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

<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:文档的标签链接。

(6)referrerpolicy

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

(7)ping

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

(8)type

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

(9)download

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

邮件链接

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

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

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

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

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

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

电话链接

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

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

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

<link>

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

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

上面代码为网页加载样式表theme.css。

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

<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">

rel属性表示外部资源与当前文档之间的关系,是<link>标签的必需属性。

<!-- 作者信息 -->
<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">

<link>标签的其他属性如下。

  • crossorigin:加载外部资源的跨域设置。 href:外部资源的网址。
  • referrerpolicy:加载时Referer头信息字段的处理方法。
  • as:rel="preload"或rel="prefetch"时,设置外部资源的类型。
  • type:外部资源的 MIME 类型,目前仅用于rel="preload"或rel="prefetch"的情况。
  • title:加载样式表时,用来标识样式表的名称。
  • sizes:用来声明图标文件的尺寸,比如加载苹果手机的图标文件。

<script>

<script>用于加载脚本代码,目前主要是加载 JavaScript 代码。

<script>
console.log('hello world');
</script>

上面代码嵌入网页,会立即执行。

<script>也可以加载外部脚本,src属性给出外部脚本的地址。

<script src="javascript.js"></script>

上面代码会加载javascript.js脚本文件,并执行。

type属性给出脚本的类型,默认是 JavaScript 代码,所以可省略。完整的写法其实是下面这样。

<script type="text/javascript" src="javascript.js"></script>

type属性也可以设成module,表示这是一个 ES6 模块,不是传统脚本。

<script type="module" src="main.js"></script>

对于那些不支持 ES6 模块的浏览器,可以设置nomodule属性。支持 ES6 模块的浏览器,会不加载指定的脚本。这个属性通常与type="module"配合使用,作为老式浏览器的回退方案。

<script type="module" src="main.js"></script>
<script nomodule src="fallback.js"></script>

<noscript>

<noscript>标签用于浏览器不支持或关闭 JavaScript 时,所要显示的内容。用户关闭 JavaScript 可能是为了节省带宽,以延长手机电池寿命,或者为了防止追踪,保护隐私。

<noscript>
  您的浏览器不能执行 JavaScript 语言,页面无法正常显示。
</noscript>

上面这段代码,只有浏览器不能执行 JavaScript 代码时才会显示,否则就不会显示。