《重学前端》学习笔记Day118

HTML链接

链接是HTML的一种机制，它是HTML文档和其他文档或者资源的连接关系，在HTML中，链接有两种关系，一种是超链接标签，一种是外部链接资源

link标签

一些link标签会生成超链接，这些超链接又不会像a标签那样显示在网页中。这就是超链接型link标签。
这意味着多数浏览器中，这些link标签并不产生任何作用。但是，这些链接能够被搜索引擎和一些浏览器插件识别，从而产生关键作用。比如：页面RSS的link标签。
另外一些link标签则会把外部的资源链接到文档中，也就是说，会实际下载这些资源，并且做一些处理，比如我们常见的link标签引入样式表。

超链接类link标签

超链接类link标签是一种被动型链接，在用户不操作情况下，不会自动下载。
link标签具有特定的ref属性，
超链接类link标签
超链接型link标签是一种被动型链接，在用户不操作情况下，它们不会被主动下载。
link标签具有特定的rel属性，会成为特定类型的link标签。产生超链接的link标签包括：具有rel="canonical"的link，具有rel="alternate"的link，具有rel="prev" rel="next"的link等等。
canonical型link

<link rel="canonical" href="...">

这个标签提示页面它的主URL，在网站中常常有多个URL指向同一页面的情况，搜索引擎访问这里页面会去掉重复的页面，这个标签会提示搜索引擎保留哪一个URL。
alternate型link

<link rel="alternate" href="...">

这个标签提示页面它的变体形式，这个所谓的变形可能是当前页面内容的不同格式、不同语言或者为不同设备设计的版本，这种link通常也是提供为搜索引擎来使用的。
alternate型的link的一个典型应用场景是，页面提供rss订阅时，可以用这样的link来引入：

<link rel="alternate" type="application/rss+xml" title="RSS" href="...">

除了搜索引擎外，很多浏览器插件都能识别这样的link。
prev型link和next型link
在互联网应用中，很多网页都属于一个序列，比如分页浏览的场景，图片展示的场景，每个网页都是序列中的一个项。
这种场景，就适合使用prev和next型的link标签，来告诉搜索引擎和浏览器它的前一项和后一项，这有助于页面的批量展示。
因为next型标签告诉浏览器“这是很可能访问的下一个页面”，HTML标准还建议对next型link做预处理。
其它超链接类的link
其他超链接类的link都表示一个与当前文档相关联的信息，可以把这样的link视作为一种带链接功能的meta链接。

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

外部资源类link标签

外部资源型link标签会被自动下载，并根据rel类型做不同的处理。包括具有icon型link、预处理link、modulepreload型link、stylesheet、pingback
icon型link
icon型link表示页面的icon。多数浏览器会读取icon型link，并把页面的icon展示出来。
预处理link
预处理类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。
stylesheet型link

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

基本用法是从一个CSS文件创建一个样式表。这里type属性可以没有，如果有，必须是"text/css"才会生效。
pingback型link
这样的link表示页面被引用时，应该使用的pingback地址，这个机制是一份独立的标准，遵循pingbac协议网站引用本地页面时，会向这个pingbak URL发送一个消息。

a标签

area标签

此文章为7月Day21学习笔记，内容来源于极客时间《重学前端》，日拱一卒，每天进步一点点💪💪