html中的链接

链接有两种类型。一种是超链接型标签,一种是外部资源链接

链接的家族中有 a 标签、area 标签和 link 标签

html中的链接_第1张图片

link 标签

link 标签会生成一个链接,它可能生成超链接,也可能生成外部资源链接。

超链接类 link 标签

超链接型 link 标签是一种被动型链接,在用户不操作的情况下,它们不会被主动下载。

  • canonical 型 link

  • alternate 型 link

alternate 型的 link 的一个典型应用场景是,页面提供 rss 订阅时,可以用这样的 link 来引入:


  • prev 型 link 和 next 型 link

来告诉搜索引擎或者浏览器它的前一项和后一项,这有助于页面的批量展示。

  • 其它超链接类的 link

其它超链接类 link 标签都表示一个跟当前文档相关联的信息,可以把这样的 link 标签视为一种带链接功能的 meta 标签。

  • rel=“author” 链接到本页面的作者,一般是 mailto: 协议
  • rel=“help” 链接到本页面的帮助页
  • rel=“license” 链接到本页面的版权信息页
  • rel=“search” 链接到本页面的搜索页面(一般是站内提供搜索时使用)

外部资源类 link 标签

icon 型的 link

icon 型 link 是唯一一个外部资源类的元信息 link,其它元信息类 link 都是超链接,这意味着,icon 型 link 中的图标地址默认会被浏览器下载和使用。  

预处理类 link

 导航到一个网站需要经过 dns 查询域名、建立连接、传输数据、加载进内存和渲染等一系列的步骤。预处理类 link 标签就是允许我们控制浏览器,提前针对一些资源去做这些操作,以提高性能(当然如果你乱用的话,性能反而更差)。

    类型包括

  • dns-prefetch 型 link 提前对一个域名做 dns 查询,这样的 link 里面的 href 实际上只有域名有意义。
  • preconnect 型 link 提前对一个服务器建立 tcp 连接。
  • prefetch 型 link 提前取 href 指定的 url 的内容。
  • preload 型 link 提前加载 href 指定的 url。
  • prerender 型 link 提前渲染 href 指定的 url。

modulepreload 型的 link

modulepreload 型 link 的作用是预先加载一个 JavaScript 的模块。这可以保证 JS 模块不必等到执行时才加载。这里的所谓加载,是指完成下载并放入内存,并不会执行对应的 JavaScript。






你可能感兴趣的:(html,前端,css)