HTML链接和HTML替换型元素（整理）

2019-12-20 本文已影响0人维仔_411d

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;amp;page=1">in my gallery</a>."></iframe>

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