<图片>的使用里面<图>HTML5 中的元素? [英] Use of <picture> inside <figure> element in HTML5?

问题描述

在 HTML5 中，我们目前有一个

元素，定义如下 (W3C 参考)

In HTML5 we currently have a <figure> element, defined like so (W3C reference)

figure 元素表示一个内容单元，可选带有标题，它是自包含的，通常作为文档主要流中的单个单元引用，并且可以从文档的主要流中移开不影响文档的含义.

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.

最近一个新元素 由 Responsive Images 提出社区组，它被定义为在参考中 像这样

Recently a new element <picture> was proposed by the Responsive Images Community group and it was defined in the reference like so

用于显示来自一系列来源的图像的图片元素(请参阅 srcset 属性).用户代理显示哪个图像取决于派生源图像的算法.

The picture element used for displaying an image that can come from a range of sources (see srcset attribute). Which image the user agent displays depends on the algorithm for deriving the source image.

因为这两个描述似乎并不矛盾(并且图片文档还处于草稿状态)，我的问题是:是否有可能(从技术和语义上)有一个嵌套的 图片 在 figure 元素中，这样吗?

Since the two descriptions seems to be not contradictory (and documentation on picture is on draft state yet) here my question: is it possible (technically and semantically) to have a nested picture inside a figure element, in this way?

<figure>
   <picture>
      <source ...>
      <source ...>
      <source ...>
      <img..>
   </picture>

   <figcaption>...</figcaption>
</figure>

我在规范中没有找到关于它的参考.:

I've found no references about it in specs. :

注意:我知道目前没有浏览器实现这个元素，我只是用 jQuery 图片

Note: I'm aware that no browser implements currently this element, I'm just making some experiments with jQuery picture

谢谢.

推荐答案

你不会找到它，因为它实际上还不是官方的，但我假设答案是是，也就是说很好.

You won't find it since it's not actually official yet, but I am going to assume the answer is yes, that is fine.

目前，您执行以下操作:

At the moment, you do something like:

<figure>
  <img src="image.jpg" alt="The Image">
  <figcaption>A Caption</figcaption>
</figure>

和 <picture> 只是为了成为一种为响应式网站提供多个 src'd 的方法，所以从技术上讲，它似乎比如——如果它被批准——你的例子是有效的.

and <picture> is simply meant to be the a method of have a multiple src'd <img> for responsive sites, so technically it would seem like -- if it were approved -- your example is valid.

这篇关于<图片>的使用里面<图>HTML5 中的元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！