HTML 初学者教程：图像标签 img、figures、figures

terry 2年前 (2023-09-28) 阅读数 374 #数据结构与算法

图像是互联网的重要组成部分，使网页变得丰富多彩。本章介绍如何在网页中插入图像。标签

用于插入图像。它单独使用，没有结束标签。

<img >

上面的代码将图像 foo.jpg 插入网页中。属性 src 指定图像的 URL。上面的例子是相对URL，表示图片和网页在同一个目录下。

默认情况下，它是一个内联元素，与其前后的文本在同一行。

<p>Hello<img >World</p>

上面代码的渲染结果是文字和图片显示在同一行。

图像默认以原始尺寸显示。如果图像较大且与文本在同一行，则图像会升高当前行的行高，图像的下边缘和文本的下边缘将在同一水平线上。

可以放置在标签内，将图像变成可点击的链接。

<a href="example.html">
  <img >
</a>

上面的代码中，可以将图片作为链接点击，点击后会发生跳转。

(1)alt属性

alt属性用于设置图像的文字描述。当图片未显示时（例如下载失败或用户关闭图片上传），将显示文字代替图片。

<img  alt="示例图片">

在上面的代码中，alt是图像的描述。当图像下载失败时，浏览器将显示文本“示例图像”来代替图像。

(2) 宽度属性、高度属性

默认情况下，图像以其原始尺寸插入到网页上。属性width和属性height可以指定图像显示时的宽度和高度，单位为像素或百分比。

<img  width="400" height="300">

在上面的代码中，width属性将图像显示宽度设置为400像素，height属性将显示高度设置为300像素。

注意，当设置了这两个属性后，浏览器都会在网页上预先保留这个空间量，无论图像是否加载成功。但是，由于可以使用 CSS 设置图像显示尺寸，因此不建议使用这两个属性。

一种特殊情况是只设置了属性width和height属性，另一个没有设置。然后浏览器会根据图像的原始尺寸自动设置图像的宽度或高度的适当比例。例如，如果图像大小为 800 x 800 像素，并且 width 属性设置为 200，则浏览器将自动将 height 设置为 200。

(3 ) srcset，尺寸

有关详细信息，请参阅下面的《响应式图像》部分。

(4)referrerplicy

上传图片的 HTTP 请求默认带有标头信息 Referer。属性 referrerpolicy 设置此行为。

(5)跨域

有时图片和网页属于不同的网站，上传图片到网页会导致跨域请求，另一台服务器可能需要跨域认证。 crossorigin属性用于告诉浏览器是否使用跨域图像传输。默认不使用。

简单来说，只要打开该属性，就会在 HTTP 请求头信息中添加字段 source，给出请求的域名。如果该属性没有开启，则不会添加。

当此属性打开时，您可以将其设置为两个值。

匿名：没有用户凭据（通常是cookie）的交叉请求。
use-credentials：使用用户凭据的跨源请求。

这是一个例子。如果省略值部分，属性

<img  crossorigin="anonymous">

crossorigin 相当于 anonymous。

<img  crossorigin>

(6) 加载

浏览器的默认行为是只要解析了标签就开始加载图像。对于很长的网页，这会浪费带宽，因为用户不一定会向下滚动到网页的末尾。用户可能会点击网页，浏览一段时间，然后关闭。加载不在视野内的图像的流量会丢失。

loading 属性更改了此行为，并允许您指定图像的延迟加载，这意味着默认情况下不会加载图像，并且仅当图像滚动到视口中并对用户可见时才会加载，从而节省带宽宽度。属性

loading可以采用以下三个值。

auto：默认浏览器行为相当于不使用 loading 属性。
lazy：启用延迟加载。
eager：立即加载提要，无论提要位于页面上的哪个位置。

<img  loading="lazy" alt="…" width="200" height="200">

由于图像的延迟内联加载，页面布局可能会重新排列，因此使用该属性时最好指定图像的高度和宽度。标签

、

可以理解为图片块，包含图片及相关信息。是其可选子元素，表示图像的文本描述。它通常用于放置标题，并且可以出现在多种情况下。

<figure>
  <img >
  <figcaption>示例图片</figcaption>
</figure>

除了图像之外，还可以包含引用、代码、诗歌等。它相当于一个语义容器，包含主要内容和附加信息。

<figure>
  <figcaption>JavaScript 代码示例</figcaption>
  <p><code>const foo = 'hello';</code></p>
</figure>

响应式图片

网页可以在不同尺寸的设备上创造出良好的显示效果，这就是所谓的“响应式网页设计”。响应式设计的网页图像是“响应式图像”。

响应式图像的解决方案有很多，JavaScript和CSS都可以实现。这里我们只展示浏览器原生支持的最佳语义的 HTML 方法。

问题的由来

我们知道标签用于插入网页图片，并且在所有情况下都会默认插入相同的图片。

<img >

上面的代码插入到桌面和手机上的图像文件foo.jpg中。

这种加工方法虽然简单，但有三个主要缺点。

(1) 尺寸

一般情况下，桌面显示的图片尺寸较大，文件大小也较大。手机屏幕较小，只需要小尺寸的图片，可以节省带宽，加快网页渲染速度。

(2) 像素密度

桌面显示器通常具有单像素密度，而手机屏幕通常具有多像素密度，这意味着在显示时多个像素组合成一个像素。这种类型的显示器称为视网膜显示器。图像文件在桌面上可能非常清晰，但在手机上会有点模糊。由于图像没有这么高的像素密度，浏览器会自动将图像的每个像素复制到周围的像素以满足像素密度要求，从而导致图像模糊。清晰度下降了。

(3) 视觉风格

桌面显示器面积更大，图像可以容纳更多细节。手机屏幕小，很多细节看不清楚，所以需要突出重点。

上面两张图之后，下面的手机图经过了裁剪，突出了图片的重点，效果明显更好了。

`srcset`属性

为了解决上述问题，HTML语言提供了完美的解决方案。首先，标签引入了srcset属性。

srcset属性用于指定多个图像以适应不同像素密度的屏幕。它的值是一个以逗号分隔的字符串，其中的每个部分都是一个图像 URL，后跟一个空格，然后是一个像素密度描述符。请参阅下面的示例。

<img srcset="foo-320w.jpg,
             foo-480w.jpg 1.5x,
             foo-640w.jpg 2x"
     >

在上面的代码中，属性srcset提供了三个图像URL来调整为三种不同的像素密度。

图像URL后的像素密度描述符，格式为像素密度的倍数+字母x。 1x表示单个像素的密度，可以省略。浏览器根据当前设备的像素密度选择要加载的图像。

如果属性srcset不满足条件，则加载属性src指定的默认图像。

`尺寸`属性

像素密度调整仅适用于与显示区域尺寸相同的图像。如果您希望不同尺寸的屏幕显示不同尺寸的图像，则 srcset 属性还不够，必须与 sizes 属性匹配。

第一步，属性srcset列出所有可用图像。

<img srcset="foo-160.jpg 160w,
             foo-320.jpg 320w,
             foo-640.jpg 640w,
             foo-1280.jpg 1280w"
     >

在上面的代码中，属性srcset列出了四个可用图像。每个图像 URL 后面都跟有一个空格和一个宽度描述符。宽度描述符

是图像的原始宽度加上字符w。上例中四张图片的原始宽度分别为 160px、320px、640px 和 1280px。

第二步，属性sizes，指定不同设备的图像显示宽度。属性

sizes 的值是一个以逗号分隔的字符串。除了最后一部分之外，前面的每个部分都是括在括号中的媒体查询表达式，后跟空格和图像显示。直径。

<img srcset="foo-160.jpg 160w,
             foo-320.jpg 320w,
             foo-640.jpg 640w,
             foo-1280.jpg 1280w"
     sizes="(max-width: 440px) 100vw,
            (max-width: 900px) 33vw,
            254px"
     >

在上面的代码中，属性sizes指定了三种屏幕条件以及对应的图像显示宽度。对于最大宽度为440像素的设备，图像显示宽度为100%；对于宽度为441像素至900像素的设备，图像显示宽度为33%；对于宽度为 900 像素或以上的设备，图像显示宽度为 254px。

第三步，浏览器根据当前设备的宽度从sizesAttribute获取图片显示宽度，然后从srcsetAttribute中找到最接近宽度的图片。加载。

假设当前设备的屏幕宽度为480像素，浏览器通过查询属性sizes来获取。图像显示的宽度为33vw（即33%），等于160像素。在srcset属性中，恰好有一张宽度等于160px的图片，因此加载了foo-160.jpg。

如果省略属性sizes，浏览器会根据实际图像显示宽度从属性srcset中选择最接近的图像。使用 sizes 属性后，它必须与 srcset 属性结合使用。仅使用属性 sizes 无效。

`响应式用法`

标签 srcset属性和尺寸属性是根据像素密度和屏幕尺寸解析的。但如果要同时适应不同像素密度、不同尺寸的屏幕，则需要使用标签。

是一个容器标签，内部使用和来确定在不同情况下加载哪些图像。

<picture>
  <source media="(max-width: 500px)" srcset="cat-vertical.jpg">
  <source media="(min-width: 501px)" srcset="cat-horizontal.jpg">
  <img  alt="cat">
</picture>

在上面的代码中，标签内有两个标签和一个标签。

内部标签主要使用media和srcset属性。属性 media 给出媒体查询表达式，属性 srcset 是标签 srcset 属性根据上传的图像文件。 sizes属性实际上可以在这里使用，但media属性使其变得不必要。

浏览器根据标签出现的顺序判断当前设备是否匹配属性media的媒体查询表达式。如果满足，则加载属性指定的图像文件srcset，并且以下标签和标签将不再执行。标签

是默认加载的图像，以防上述所有不匹配或不受旧支持浏览器。

上例中，如果设备宽度不超过500像素，则加载竖屏图像，否则加载横屏图像。

下面是考虑了屏幕尺寸和像素密度调整的示例。

<picture>
  <source srcset="homepage-person@desktop.png,
                  homepage-person@desktop-2x.png 2x"
          media="(min-width: 990px)">
  <source srcset="homepage-person@tablet.png,
                  homepage-person@tablet-2x.png 2x"
          media="(min-width: 750px)">
  <img srcset="homepage-person@mobile.png,
               homepage-person@mobile-2x.png 2x"
       alt="Shopify Merchant, Corrine Anestopoulos">
</picture>

在上面的代码中，属性的属性media指定屏幕尺寸调整条件。每个条件都使用 srcset 属性，然后提供两个像素密度的图像 URL。