时间戳

首页 > 解决方案 > 图片元素 - 标题属性

html - 图片元素 - 标题属性

问题描述

我正在使用图片元素在适当的地方提供 webP 图像，如下所示：

<picture>
  <source srcset="picture.webp" type="image/webp">
  <source srcset="picture.jpg">
  <img src="picture.jpg" alt="alt">
</picture>

问题是我应该在哪里放置title属性。我应该把它放在img元素还是picture元素上？

标签： html

解决方案

我不同意之前的海报。我会保留title元素img。

根据 HTML5 规范，picture元素是一个容器，并且依赖于img元素来呈现其源元素选择。实际上，该img元素是 的要求picture，而不仅仅是作为后备。因此，picture它只是一个空心的包装器img，实际上并没有做任何事情。img仍然是图像的主要传送器。

HTML 规范接着说……

图片元素是一个容器，它为其包含的 img 元素提供多个来源...

...接着

...图片元素本身不显示任何内容；它只是为其包含的 img 元素提供了一个上下文，使其能够从多个 URL 中进行选择

这意味着img元素继续代表图像，因此在我看来必须具有title元素。img元素alt仍然有效的事实title，即使img浏览器选择了源图像，也显示图像元素在显示中是活动的。下面是我如何使用picture元素设计图像的示例。

<figure aria-labelledby="picturecaption1">
    <picture id="picture1">
        <source srcset="image.webp" type="image/webp" media="(min-width: 800px)" />
        <source srcset="image.gif" type="image/gif" />
        <img id="image1" alt="image:Image Alternate Text" title="The Image Description" src="image.jpg" width="200" height="200" loading="lazy" no-referrer="no-referrer" />
    </picture>
    <figcaption id="picturecaption1">My Image Caption</figcaption>
</figure>

推荐阅读