重学前端学习笔记（二十四）HTML里的链接元素

笔记说明

重学前端是程劭非&＃xff08;winter&＃xff09;【前手机淘宝前端负责人】在极客时间开的一个专栏&＃xff0c;每天10分钟&＃xff0c;重构你的前端知识体系&＃xff0c;笔者主要整理学习过程的一些要点笔记以及感悟&＃xff0c;完整的可以加入winter的专栏学习【原文有winter的语音】&＃xff0c;如有侵权请联系我&＃xff0c;邮箱&＃xff1a;kaimo313&＃64;foxmail.com。

一、介绍

链接是 HTML 中的一种机制&＃xff0c;它是 HTML 文档和其它文档或者资源的连接关系。链接两种类型&＃xff1a;一种是超链接型标签&＃xff0c;一种是外部资源链接。

二、link 标签

2.1、超链接型 link 标签

超链接型 link 标签是一种被动型链接。link 标签具有特定的 rel 属性&＃xff0c;会成为特定类型的 link 标签。

1、canonical 型 link

提示页面它的主 URL&＃xff0c;在网站中常常有多个 URL 指向同一页面的情况&＃xff0c;搜索引擎访问这类页面时会去掉重复的页面&＃xff0c;这个 link 会提示搜索引擎保留哪一个 URL。

<link rel&＃61;"canonical" href&＃61;"...">


2、alternate 型 link

提示页面它的变形形式&＃xff0c;就是当前页面内容的不同格式、不同语言或者为不同的设备设计的版本&＃xff0c;也可以提供给搜索引擎来使用的。

<link rel&＃61;"alternate" href&＃61;"...">


典型应用场景&＃xff1a;页面提供 rss 订阅时

<link rel&＃61;"alternate" type&＃61;"application/rss&＃43;xml" title&＃61;"RSS" href&＃61;"...">


3、prev 型 link 和 next 型 link

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

4、其它超链接类的 link

• rel&＃61;"author"&＃xff1a;链接到本页面的作者&＃xff0c;一般是 mailto: 协议
• rel&＃61;"help"&＃xff1a;链接到本页面的帮助页
• rel&＃61;"license"&＃xff1a;链接到本页面的版权信息页
• rel&＃61;"search"&＃xff1a;链接到本页面的搜索页面&＃xff08;一般是站内提供搜索时使用&＃xff09;

2.2、外部资源类 link 标签

外部资源型 link 标签会被主动下载&＃xff0c;并且根据 rel 类型做不同的处理。

1、icon 型 link

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

注意&＃xff1a;多数浏览器会使用域名根目录下的 favicon.ico&＃xff0c;即使它并不存在&＃xff0c;从性能的角度考虑&＃xff0c;建议页面中有 icon 型的 link。

2、预处理类 link

预处理类 link 标签就是允许我们控制浏览器&＃xff0c;提前针对一些资源去做这些操作&＃xff0c;以提高性能&＃xff08;乱用性能反而更差&＃xff09;。

• dns-prefetch 型&＃xff1a;link 提前对一个域名做 dns 查询
• preconnect 型&＃xff1a;link 提前对一个服务器建立 tcp 连接
• prefetch 型&＃xff1a;link 提前取 href 指定的 url 的内容
• preload 型&＃xff1a;link 提前加载 href 指定的 url
• prerender 型&＃xff1a;link 提前渲染 href 指定的 url

3、modulepreload 型的 link

预先加载一个 Javascript 的模块&＃xff0c;这样能保证 JS 模块不必等到执行时才加载。所谓加载&＃xff0c;是指完成下载并放入内存&＃xff0c;并不会执行对应的 Javascript。


<link rel&＃61;"modulepreload" href&＃61;"app.js">
<link rel&＃61;"modulepreload" href&＃61;"kaimo.js">

<script type&＃61;"module" src&＃61;"app.js">


4、stylesheet 型 link

<link rel&＃61;"stylesheet" href&＃61;"xxx.css" type&＃61;"text/css">


5、pingback 型 link

表示本网页被引用时&＃xff0c;应该使用的 pingback 地址&＃xff0c;这个机制是一份独立的标准&＃xff0c;遵守 pingback 协议的网站在引用本页面时&＃xff0c;会向这个 pingback url 发送一个消息。

三、a 标签

3.1、有 rel 属性的种类

下面的跟 link 语义完全一致&＃xff0c;不同的是&＃xff0c;a 标签产生的链接是会实际显示在网页中的&＃xff0c;而 link 标签仅仅是元信息。

• alternate
• author
• help
• license
• next
• prev
• search

3.2、独有的 rel 类型

• tag&＃xff1a;表示本网页所属的标签
• bookmark&＃xff1a;到上级章节的链接·

3.3、辅助的 rel 类型

用于提示浏览器或者搜索引擎做一些处理

• nofollow&＃xff1a;此链接不会被搜索引擎索引
• noopener&＃xff1a;此链接打开的网页无法使用 opener 来获得当前页面的窗口
• noreferrer&＃xff1a;此链接打开的网页无法使用 referrer 来获得当前页面的 url
• opener&＃xff1a;打开的网页可以使用 window.opener 来访问当前页面的 window 对象&＃xff0c;这是 a 标签的默认行为。

四、area 标签

与 a 标签非常相似&＃xff0c;不同的是&＃xff0c;它不是文本型的链接&＃xff0c;而是区域型的链接。area 是整个 html 规则中唯一支持非矩形热区的标签。

shape 属性支持三种类型

• 圆形&＃xff1a;circle 或者 circ&＃xff0c;coords 支持三个值&＃xff0c;分别表示中心点的 x,y 坐标和圆形半径 r
• 矩形&＃xff1a;rect 或者 rectangle&＃xff0c;coords 支持两个值&＃xff0c;分别表示两个对角顶点 x1&＃xff0c;y1 和 x2&＃xff0c;y2
• 多边形&＃xff1a;poly 或者 polygon&＃xff0c;coords 至少包括 6 个值&＃xff0c;表示多边形的各个顶点


<p>Please select a shape:<img src&＃61;"shapes.png" usemap&＃61;"#shapes"alt&＃61;"Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star."><map name&＃61;"shapes"><area shape&＃61;rect coords&＃61;"50,50,100,100"> <area shape&＃61;rect coords&＃61;"25,25,125,125" href&＃61;"red.html" alt&＃61;"Red box."><area shape&＃61;circle coords&＃61;"200,75,50" href&＃61;"green.html" alt&＃61;"Green circle."><area shape&＃61;poly coords&＃61;"325,25,262,125,388,125" href&＃61;"blue.html" alt&＃61;"Blue triangle."><area shape&＃61;poly coords&＃61;"450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"href&＃61;"yellow.html" alt&＃61;"Yellow star.">map>
p>


总的来说&＃xff1a;a 标签基本解决了在页面中插入文字型和整张图片超链接的需要&＃xff0c;如果想要在图片的某个区域产生超链接&＃xff0c;就要用到area 标签。

个人总结

很多的东西基本没有怎么用到过&＃xff0c;提升一下见识面才行。。。