link标签的主要用法

最新推荐文章于 2024-09-02 13:50:03 发布

lengye7

最新推荐文章于 2024-09-02 13:50:03 发布

阅读量2.8w

点赞数 24

分类专栏： html 网页网站 Html5

本文链接：https://blog.csdn.net/lengye7/article/details/86763608

版权

Html5 同时被 3 个专栏收录

46 篇文章 0 订阅

订阅专栏

网页

25 篇文章 0 订阅

订阅专栏

html

21 篇文章 0 订阅

订阅专栏

link的rel属性有很多的值，不同的值代表了外部资源与本html文档的关系。

rel属性的值可以是：

alternate
author
canonical
dns-prefetch
external
help
icon
licence
manifest
modulepreload
next
pingback
prefetch
preload
prev
search
shortlink
sidebar
stylesheet
tag

1、连接外部的样式表，这个是最常用的

2、链接一个外部的icon用于浏览器的栏目图标和收藏夹图标,地址栏最前面的小图标和收藏夹图标

如图中的图标，<link rel="icon" href="/favicon.ico" >

关于rel="icon"属性，主要用途就是如上所示。但是对于IOS的图标，icon属性无效，需使用 apple-touch-icon and apple-touch-startup-image 。

<link rel="apple-touch-icon-precomposed" sizes="114x114"
      href="apple-icon-114.png" type="image/png">

另外rel="icon" 同时可以附加sizes="32x32"等属性，确保浏览器只会把目标图片解析成32x32的大小。当然，我们可以提供多种大小的图片，浏览器会自行选择最合适的图片。

例如：<link rel="icon" sizes="16x16" href="/favicon.ico" >

关于href指向的资源，图标必须是ico图片，ico图片的制作过程如下：

首先准备一张png图片，再利用在线的转换工具即可转换称为ico图片。

3、rel="alternate"可以定义另外一个版本的文档，可以是Pdf，另外一种语言，另外一种css样式，如下所示

4、rel="author license",规定一些作者和版权相关的信息。例如，

5、rel="canonical"，用来定义一个权威的版本，保证内容的正确性。

6、rel="preconnect"或者rel="prefetch"或者rel="preload"等都是用于加快网页的一个加载速度的类型，只有部分浏览器实现了。

preconnect是告知浏览器提前连接指定的url，以便在后面需要使用该连接的时候，连接已经形成，节省了时间。

prefetch是告知浏览器立刻取来url所指向的资源，这个适用于该资源立刻需要被用户使用。

preload是告知浏览器预加载一些url指定的资源，这些资源可能立刻会被使用。

通过预加载，将一些后续需要使用的资源提前下载下来，虽然会导致一开始网页加载的时候，空白一段时间，但是却可以换来后续用户使用体验的增加，使用户在操作网页的时候，不会中途因为等待资源下载而等待。

在上面三种类型之中，preload更加适用于预加载资源。

下面将是一些preload的常用的预加载资源的方式：

preload可以预先加载如下这些资源，并通过as属性指定如下这些资源类型，并通过type类型指定这些资源中的子资源，例如as="vedio" type="vedio/mp4"

audio: Audio file.
document: An HTML document intended to be embedded inside a <frame> or <iframe>.
embed: A resource to be embedded inside an <embed> element.
fetch: Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer or JSON file.
font: Font file.
image: Image file.
object: A resource to be embedded inside an <embed> element.
script: JavaScript file.
style: Stylesheet.
track: WebVTT file.
worker: A JavaScript web worker or shared worker.
video: Video file.

例1：提前下载好script，之后再执行，有可以下载css，font等等

<head>
  <meta charset="utf-8">
  <title>JS and CSS preload example</title>

  <link rel="preload" href="style.css" as="style">
  <link rel="preload" href="main.js" as="script">

  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>bouncing balls</h1>
  <canvas></canvas>

  <script src="main.js"></script>
</body>

例2：提前下载视频资源如下，（当然，还可以提前下载好图片等等，只需要as="image" type="image/png"）

<head>
  <meta charset="utf-8">
  <title>Video preload example</title>

  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
</head>
<body>
  <video controls>
    <source src="sintel-short.mp4" type="video/mp4">
    <source src="sintel-short.webm" type="video/webm">
    <p>Your browser doesn't support HTML5 video. Here is a <a href="sintel-short.mp4">link to the video</a> instead.</p>
  </video>
</body>

8、rel属性配合media属性可根据不同的设备来下载不同的资源

<head>
  <meta charset="utf-8">
  <title>Responsive preload example</title>

  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">

  <link rel="stylesheet" href="main.css">
</head>
<body>
  <header>
    <h1>My site</h1>
  </header>

  <script>
    var mediaQueryList = window.matchMedia("(max-width: 600px)");
    var header = document.querySelector('header');

    if(mediaQueryList.matches) {
      header.style.backgroundImage = 'url(bg-image-narrow.png)';
    } else {
      header.style.backgroundImage = 'url(bg-image-wide.png)';
    }
  </script>
</body>

浏览器的支持

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
Basic support	Full support1	Full supportYes	Full support1	Full supportYes	Full supportYes	Full supportYes	Full supportYes	Full supportYes	Full supportYes	Full support4	Full supportYes	Full supportYes	Full supportYes
Alternative stylesheets.	?	?	Full support3	?	Full supportYes	?	?	?	?	Full support4	?	?	?
`dns-prefetch` Experimental	Full support46	?	Full support3	?	?	?	Full support46	Full supportYes	?	Full support4	?	?	Full supportYes
`manifest` ExperimentalNon-standard	No supportNo	?	?	?	?	?	Full support39	Full support39	?	?	?	?	Full support4.0
`modulepreload` Experimental	Full support66	?	?	?	Full support53	?	Full support66	Full support66	?	?	Full support53	?	?
`noopener` Non-standard	Full support49	No supportNo	Full support52 Notes Open	No supportNo	Full support36	Full support10.1	Full support49	Full support49	No supportNo	Full support52 Notes Open	Full support32	Full support10.3	Full support5.0
`preconnect` Experimental	Full support46	No supportNo	Full support39 Notes Open	No supportNo	?	No supportNo	Full support46	Full support42	No supportNo	Full support39 Notes Open	?	No supportNo	Full support4.0
`prefetch` Experimental	?	?	?	?	?	?	?	?	?	?	?	?	?
`preload` Experimental	Full support50	?	No support56 — 57 Notes Open	?	?	?	Full support50	Full support50	?	No support56 — 57 Notes Open	?	?	Full support5.0
`prerender` Experimental	?	?	?	?	?	?	?	?	?	?	?	?	?