摘要:二标签超链接型标签超链接型标签是一种被动型链接。四标签与标签非常相似,不同的是,它不是文本型的链接,而是区域型的链接。是整个规则中唯一支持非矩形热区的标签。
笔记说明
重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语音】,如有侵权请联系我,邮箱:kaimo313@foxmail.com。一、介绍
链接是 HTML 中的一种机制,它是 HTML 文档和其它文档或者资源的连接关系。链接两种类型:一种是超链接型标签,一种是外部资源链接。二、link 标签 2.1、超链接型 link 标签
超链接型 link 标签是一种被动型链接。link 标签具有特定的 rel 属性,会成为特定类型的 link 标签。1、canonical 型 link
提示页面它的主 URL,在网站中常常有多个 URL 指向同一页面的情况,搜索引擎访问这类页面时会去掉重复的页面,这个 link 会提示搜索引擎保留哪一个 URL。2、alternate 型 link
提示页面它的变形形式,就是当前页面内容的不同格式、不同语言或者为不同的设备设计的版本,也可以提供给搜索引擎来使用的。
典型应用场景:页面提供 rss 订阅时
3、prev 型 link 和 next 型 link用来告诉搜索引擎或者浏览器它的前一项和后一项,这有助于页面的批量展示。4、其它超链接类的 link
rel="author":链接到本页面的作者,一般是 mailto: 协议
rel="help":链接到本页面的帮助页
rel="license":链接到本页面的版权信息页
rel="search":链接到本页面的搜索页面(一般是站内提供搜索时使用)
2.2、外部资源类 link 标签外部资源型 link 标签会被主动下载,并且根据 rel 类型做不同的处理。1、icon 型 link
唯一一个外部资源类的元信息 link,其它元信息类 link 都是超链接,icon 型 link 中的图标地址默认会被浏览器下载和使用。
注意:多数浏览器会使用域名根目录下的 favicon.ico,即使它并不存在,从性能的角度考虑,建议页面中有 icon 型的 link。
2、预处理类 link预处理类 link 标签就是允许我们控制浏览器,提前针对一些资源去做这些操作,以提高性能(乱用性能反而更差)。
dns-prefetch 型:link 提前对一个域名做 dns 查询
preconnect 型:link 提前对一个服务器建立 tcp 连接
prefetch 型:link 提前取 href 指定的 url 的内容
preload 型:link 提前加载 href 指定的 url
prerender 型:link 提前渲染 href 指定的 url
3、modulepreload 型的 link预先加载一个 JavaScript 的模块,这样能保证 JS 模块不必等到执行时才加载。所谓加载,是指完成下载并放入内存,并不会执行对应的 JavaScript。
4、stylesheet 型 link 5、pingback 型 link
表示本网页被引用时,应该使用的 pingback 地址,这个机制是一份独立的标准,遵守 pingback 协议的网站在引用本页面时,会向这个 pingback url 发送一个消息。三、a 标签 3.1、有 rel 属性的种类
下面的跟 link 语义完全一致,不同的是,a 标签产生的链接是会实际显示在网页中的,而 link 标签仅仅是元信息。
alternate
author
help
license
next
prev
search
3.2、独有的 rel 类型tag:表示本网页所属的标签
bookmark:到上级章节的链接·
3.3、辅助的 rel 类型用于提示浏览器或者搜索引擎做一些处理
nofollow:此链接不会被搜索引擎索引
noopener:此链接打开的网页无法使用 opener 来获得当前页面的窗口
noreferrer:此链接打开的网页无法使用 referrer 来获得当前页面的 url
opener:打开的网页可以使用 window.opener 来访问当前页面的 window 对象,这是 a 标签的默认行为。
四、area 标签与 a 标签非常相似,不同的是,它不是文本型的链接,而是区域型的链接。area 是整个 html 规则中唯一支持非矩形热区的标签。
shape 属性支持三种类型
圆形:circle 或者 circ,coords 支持三个值,分别表示中心点的 x,y 坐标和圆形半径 r
矩形:rect 或者 rectangle,coords 支持两个值,分别表示两个对角顶点 x1,y1 和 x2,y2
多边形:poly 或者 polygon,coords 至少包括 6 个值,表示多边形的各个顶点
Please select a shape:
总的来说:a 标签基本解决了在页面中插入文字型和整张图片超链接的需要,如果想要在图片的某个区域产生超链接,就要用到area 标签。
个人总结很多的东西基本没有怎么用到过,提升一下见识面才行。。。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/114722.html
摘要:二标签超链接型标签超链接型标签是一种被动型链接。四标签与标签非常相似,不同的是,它不是文本型的链接,而是区域型的链接。是整个规则中唯一支持非矩形热区的标签。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语...
摘要:二标签超链接型标签超链接型标签是一种被动型链接。四标签与标签非常相似,不同的是,它不是文本型的链接,而是区域型的链接。是整个规则中唯一支持非矩形热区的标签。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语...
摘要:二选择器的基本意义根据一些特征,选中元素树上的一批元素。四伪类选择器树结构关系伪类选择器伪类表示树的根元素。伪类表示没有子节点的元素。表示焦点落在这个元素之上。用于选中浏览器的部分所指示的元素。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入wint...
摘要:二选择器的基本意义根据一些特征,选中元素树上的一批元素。四伪类选择器树结构关系伪类选择器伪类表示树的根元素。伪类表示没有子节点的元素。表示焦点落在这个元素之上。用于选中浏览器的部分所指示的元素。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入wint...
阅读 1464·2021-11-24 11:16
阅读 2647·2021-07-28 12:32
阅读 2283·2019-08-30 11:22
阅读 1425·2019-08-30 11:01
阅读 560·2019-08-29 16:24
阅读 3507·2019-08-29 12:52
阅读 1608·2019-08-29 12:15
阅读 1314·2019-08-29 11:18