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 标准:
<p>
<!-- usemap指定name或id为shapes的map ,map的name和id最好都写上-->
<img src="shapes.png" usemap="#shapes" alt="area测试图形">
<map name="shapes">
<!-- rect 矩形， coords 左上角和右下角坐标-->
<area shape="rect" coords="25,25,125,125" href="red.html" alt="Red box.">
<!-- circle 圆形， coords 圆心和半径-->
<area shape="circle" coords="200,75,50" href="green.html" alt="Green circle.">
<!-- 不规则图形， coords 图形边缘路径上的各个点，依次连接成此多边形-->
<area shape="poly" coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
</map>
</p>
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
<link rel="canonical" href="xxx">
alternate 型link
表示页面的变形形式（变形可能是当前页面内容的不同格式、不同语言或为不同设备设计的版本），同城提供给搜索引擎使用。
典型的应用场景是，页面提供rss订阅时，可以用这样的link引入：
<link rel="alternate" type="application/rss+xml" title="RSS" href="xxx">
prev 型link 和 next 型link
告诉搜索引擎或浏览器，页面的前一项和后一项，有助于页面的批量展示。
HTML 标准建议对next型link做预处理。
其他超链接类的link
其他超链接类的link标签都表示一个跟当前文档相关联的信息，可以将这样的link标签视为一种带链接功能的meta标签
<!-- 页面作者 -->
<link rel="author" href="mailto:authormail@xx.com">
<!-- 本页版权信息页 -->
<link rel="license" href="https://xxx/license.html">
<!-- 本页帮助页 -->
<link rel="help" href="https://xxx/help.html">
<!-- 本页搜索页（一般是站内提供搜索时使用） -->
<link rel="search" href="https://xxx/search.html">
外部资源类link标签
外部资源型link标签会主动下载，并且根据rel类型做相应的处理。
icon 型link
多数浏览器会读取icon型link，并将页面icon展示出来。
icon型link是唯一一个外部资源类的元信息link，其他元信息类link都是超链接。
若没有指定这样的link(建议放在head中，若在body中指定 有的浏览器不会识别)，多数浏览器会使用域名根目录下的favicon.ico
<!-- tab上的icon -->
<link rel="icon" sizes="360x640" href="./test_icon_2.png">
<!-- ios保存至桌面上时使用的图标 -->
<link rel="apple-touch-icon" href="image/icon-store-on.png">
stylesheet 型link
<!-- 普通的引入外部样式表的用法，type属性可以不写 -->
<link rel="stylesheet" type="text/css" href="xxx.css">
<!-- 为页面创建一份变体样式，部分浏览器，支持从浏览器菜单中切换这些样式 -->
<link rel="alternate stylesheet" title="theme-light-blue" href="xxx2.css">
modulepreload 型link
用于预先加载（下载并放入内存，不会执行）一个JavaScript模块，可以保证JS模块不必等到执行时才加载。
tips:这些JS模块何时执行，如何使用呢？
var preloadedScript = document.createElement("script"); preloadedScript.src = "./test/test.js"; document.body.appendChild(preloadedScript);
<link rel="modulepreload" href="a.js">
<link rel="modulepreload" href="b.js">
<script type="module" src="c.js">
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 src="https://xxx.xxx.com/img/xxx.png">
<img src="data:image/png;base64,xxxxx">
<img src='data:image/svg+xml;charset=utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/></svg>'/>
<img src='data:image/svg+xml;charset=utf8,<svg width="600" height="400" version="1.1"
xmlns="http://www.w3.org/2000/svg"><ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/></svg>' width="100"/>
img标签还有两个重要的属性：srcset和sizes，在不同的屏幕大小和特性下，使用不同的图片源。[1]
<!-- 此规则只是对浏览器的建议，各浏览器选择图片的算法可能有差异。-->
<!--
设备dpr为1时，可视区域宽度小于等于600px则使用30px的图片，选择srcset中大于等于30px的最接近的图片，即为small.png;可视区域宽度大于1200px时使用120px的图，找到了large.png;
设备dpr为2时，可视区域宽度小于等于600px则使用30px的图片，选择srcset中大于等于2*30px的最接近的图片，即为middle.png;可视区域宽度大于1200px时使用120px的图，找到了最大的large.png;
-->
<img srcset="small.png 30w, middle.png 60w, large.png 120w" sizes="(max-width:600px) 30px, (max-width:900px) 60px, (max-width:1200px) 90px, 120px" src="default.png" alt="不支持srcset的浏览器会展示src的内容">
<!--
设备dpr为1时，使用small.png；设备dpr为2时，使用middle.png；
-->
<img srcset="small.png 1x, middle.png 2x, large.png 3x" src="default.png" alt="不支持srcset的浏览器会展示src的内容">
srcset提供了根据屏幕条件选取图片的能力，但更好的方法是使用picture
2-3 picture
picture元素的设计与audio和video保持了一致，使用source元素指定图片源，并且支持多个。
此处media属性是media query，与css的@media规则一致
<!-- 基于媒体查询 -->
<picture>
<source media="(min-width:900px)" srcset="large.png">
<source media="(min-width:600px)" srcset="middle.png">
<img src="small.png" alt="不支持picture的浏览器会展示img的内容">
</picture>
<!-- 基于图片格式 -->
<picture>
<source type="image/vnd.ms-photo" src="img.jxr">
<source type="image/jp2" src="img.jp2">
<source type="image/webp" src="img.webp">
<img src="img.png" alt="新的图片格式某些浏览器可能不支持">
</picture>
2-4 video
<!-- 之前的写法 -->
<video controls="controls" src="video_source.ogg">
<!-- 兼容性高，支持各种视频格式的写法 -->
<video>
<source src="movie.webm" type="video/webm" >
<source src="movie.ogg" type="video/ogg" >
<source src="movie.mp4" type="video/mp4">
浏览器不支持video标签时显示的内容
</video>
video中还支持一种标签——track，与播放时序相关，最常见的用途是字幕，属性srclang用于指定语言，属性kind （subtitles 字幕、captions 报幕内容、descriptions 视频描述信息、chapters 用于浏览器视频内容、metadata 给代码提供的元信息 普通用户不可见）
2-5 audio
audio标签与picture和video标签一样，用source元素指定源文件
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
<p>You browser does not support audio.</p>
</audio>
2-6 iframe
新标准中，iframe多了sandbox模式和srcdoc属性
<!-- sandbox的值为空时会应用所有的限制
srcdoc内容是html，若浏览器不支持则展示src中的内容
-->
<iframe sandbox srcdoc="<p>Yeah, you can see it <a href="/gallery?mode=cover&amp;page=1">in my gallery</a>."></iframe>
现在不推荐使用iframe，window.opener、window.parent.document、css的opacity等都可能存在漏洞[2]
网友评论