如何关联不同html页面的元素,HTML链接和HTML替换型元素（整理）

1. HTML链接

链接是HTML中的一种机制，是HTML文档和其他文档或资源的连接关系。

HTML中链接有两种类型：超链接型标签 和 外部资源链接

a 标签、area标签、link标签

1-1. a 标签

与link标签相同的类型

以下类型的a标签 与对应类型的link语义相同，不同的是 a标签产生的链接会实际显示在网页中，link标签仅仅是元信息

alternate

prev

next

author

help

license

search

a 标签独有的rel

tag 本网页所属的标签

bookmark 到上级章节的链接

辅助的rel

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

nofollow 此链接不会被搜索引擎索引

noopener 此链接打开的网页无法使用opener来获得当前页面的窗口

noreferrer 此链接打开的网页无法使用 referrer来获得当前页面url

opener 打开的网页 可以使用window.opener来访问当前页面的window对象 (a标签的默认行为)

opener

1-2. area 标签

与a标签相比，area不是文本型链接，是区域型链接，它支持的rel类型与a完全一样。

area 需与img和map标签配合使用

例子来自 html 标准:

1-3. link 标签

link标签中的rel属性的值 决定了link标签的类型。

超链接型link标签

canonical 提示页面的主URL

alternate 提示页面的变形形式

prev 前一项

next 后一项

其他超链接型

author

help

license

search

外部资源型link标签

icon

stylesheet

modulepreload

pingback

预处理类link

dns-prefetch

preconnect

prefetch

preload

prerender

超链接型link标签

一些link标签会生成超链接，这些超链接不会像a标签那样显示在网页中 。

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

canonical 型link

多个链接都指向一个页面时(搜索引擎访问这类页面时会去掉重复的页面)，此link告诉搜索引擎保留哪个url

alternate 型link

表示页面的变形形式(变形可能是当前页面内容的不同格式、不同语言或为不同设备设计的版本)，同城提供给搜索引擎使用。

典型的应用场景是，页面提供rss订阅时，可以用这样的link引入：

prev 型link 和 next 型link

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

HTML 标准建议对next型link做预处理。

其他超链接类的link

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

外部资源类link标签

外部资源型link标签会主动下载，并且根据rel类型做相应的处理。

icon 型link

多数浏览器会读取icon型link，并将页面icon展示出来。

icon型link是唯一一个外部资源类的元信息link，其他元信息类link都是超链接。

若没有指定这样的link(建议放在head中，若在body中指定 有的浏览器不会识别)，多数浏览器会使用域名根目录下的favicon.ico

stylesheet 型link

modulepreload 型link

用于预先加载(下载并放入内存，不会执行)一个JavaScript模块，可以保证JS模块不必等到执行时才加载。

tips:这些JS模块何时执行，如何使用呢？

var preloadedScript = document.createElement("script"); preloadedScript.src = "./test/test.js"; document.body.appendChild(preloadedScript);

pingback 型link

表示本网页被引用时 应使用pingback地址。此机制是一个独立的标准，遵守pingback的协议的网站在引用本页面时会向这个pingback url发送一个消息 (自动引用通知)

预处理 型link

从在浏览器输入网址到看到页面，需要经过dns解析、建立链接、传输数据、加载进内存、渲染等一系列步骤。

预处理类link标签运行我们控制浏览器，提前针对一些资源去做这些操作以提高性能(用的不好 反而会降低性能)

dns-prefetch 提前对一个域名做dns查询(这样的link中的href实际只有域名有意义)

preconnect 提前对服务器建立tcp链接

prefetch 提前取href指定的url的内容

preload 提前加载href指定的url

prerender 提前渲染href指定的url

tips:prefetch和preload还有之前的modulepreload有什么区别？

tips:prerender如何提前渲染？

2. HTML替换型元素

本文章节1中的链接是HTML一种引入文件的方式，还有一种引入文件的方式——替换型元素(把文件的内容引入，替换掉自身位置的一类标签)

2-1 script

script是为数不多的既可以作为替换型标签，又可以不作为替换型标签的元素。

凡是替换型元素，都是用src属性引用文件的，链接型元素是使用href标签。

2-2 img

两种方式，src写图片地址，或data uri

img标签还有两个重要的属性：srcset和sizes，在不同的屏幕大小和特性下，使用不同的图片源。

srcset提供了根据屏幕条件选取图片的能力，但更好的方法是使用picture

2-3 picture

picture元素的设计与audio和video保持了一致，使用source元素指定图片源，并且支持多个。

此处media属性是media query，与css的@media规则一致

2-4 video

浏览器不支持video标签时显示的内容

video中还支持一种标签——track，与播放时序相关，最常见的用途是字幕，属性srclang用于指定语言，属性kind (subtitles 字幕、captions 报幕内容、descriptions 视频描述信息、chapters 用于浏览器视频内容、metadata 给代码提供的元信息 普通用户不可见)

2-5 audio

audio标签与picture和video标签一样，用source元素指定源文件

You browser does not support audio.

2-6 iframe

新标准中，iframe多了sandbox模式和srcdoc属性

in my gallery.">

现在不推荐使用iframe，window.opener、window.parent.document、css的opacity等都可能存在漏洞

参考文章