2 图像标签
2 图像标签
img 标签
标签用于插入图片。它是单独使用的，没有闭合标签。
<img src="foo.jpg">
<img>默认是一个行内元素，与前后的文字处在同一行。- 图像默认以原始大小显示。如果图片很大，又与文字处在同一行，那么图片将把当前行的行高撑高，并且图片的底边与文字的底边在同一条水平线上。
<img>可以放在<a>标签内部，使得图片变成一个可以点击的链接。
<a href="example.html">
<img src="foo.jpg">
</a>
alt 属性
alt 属性用来设定图片的文字说明。图片不显示时（比如下载失败，或用户关闭图片加载），图片的位置上会显示该文本：
<img src="foo.jpg" alt="示例图片">
width 属性，height 属性
图片默认以原始大小插入网页，width 属性和 height 属性可以指定图片显示时的宽度和高度，单位是像素或百分比：
<img src="foo.jpg" width="400" height="300">
注意，一旦设置了这两个属性，浏览器会在网页中预先留出这个大小的空间，不管图片有没有加载成功。不过，由于图片的显示大小可以用 CSS 设置，所以不建议使用这两个属性。
一种特殊情况是，width 属性和 height 属性只设置了一个，另一个没有设置。这时，浏览器会根据图片的原始大小，自动设置对应比例的图片宽度或高度。举例来说，图片大小是 800 像素 x 800 像素，width 属性设置成 200，那么浏览器会自动将 height 设成 200。
referrerpolicy
导致的图片加载的 HTTP 请求，默认会带有 Referer 的头信息。referrerpolicy 属性对这个行为进行设置。
figure，figcaption 标签
<figure>标签可以理解为一个图像区块，将图像和相关信息封装在一起。<figcaption>是它的可选子元素，表示图像的文本描述，通常用于放置标题，可以出现多个。
<figure>
<img src="https://example.com/foo.jpg">
<figcaption>示例图片</figcaption>
</figure>
除了图像，<figure> 还可以封装引言、代码、诗歌等等。它等于是一个将主体内容与附加信息，封装在一起的语义容器。
<figure>
<figcaption>JavaScript 代码示例</figcaption>
<p><code>const foo = 'hello';</code></p>
</figure>