0 
<div class="container">
  <img src="photo.jpg" alt="A Photo"/>
</div>

根据图片元素规范：

零个或多个源元素，后跟一个 img 元素，可选择与脚本支持元素混合。

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

因此，假设以下 HTML 在语义上更正确是否安全？

<picture>
  <img src="photo.jpg" alt="A Photo"/>
</picture>
4

2 回答 2

2

图像元素的语义正确容器是图形元素 - 文档 - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure

 <figure>
  <img src="photo.jpg" alt="A Photo"/>
</figure>

该元素有一个可选的 figcaption 元素，可以是第一个子元素或最后一个子元素 - 以提供标题（与图像相关的上下文文本）。

作为第一个孩子（上图

 <figure>
  <figcaption>A photo</figcaption>
  <img src="photo.jpg" alt="A Photo"/>
</figure>

作为最后一个孩子 - 图片下方

 <figure>
  <img src="photo.jpg" alt="A Photo"/>
  <figcaption>A photo</figcaption>
</figure>

请注意，您可以为图形和包含的 figcaption 和 img 元素设置样式，使其成为您想要的任何样式。

figure {
 text-align: center;
}

figcaption {
  margin-bottom: 8px;
  color: green;
}
figure img {
 border: solid 1px green;
 padding: 4px;
 border-radius: 4px;
}
 <figure>
  <figcaption>A Fluffy kitten</figcaption>
  <img src="https://i.pinimg.com/originals/3e/6b/cd/3e6bcdc46881f5355163f9783c44a985.jpg" alt="A fluffy kitten" width="150"/>
</figure>

于 2020-10-18T20:36:33.550 回答
2

不，第二个版本在语义上并不正确，因为图片元素旨在用于在不同情况下可能使用多个源文件的情况。

HTML 社会化：

图片元素是一个容器，它为其包含的img元素提供多个来源，以允许作者根据屏幕像素密度、视口大小、图像格式等以声明方式控制或提示用户代理使用哪个图像资源因素。它代表它的孩子。

最好单独使用图像标签。您可以将其包装在 div 中以用于样式或间距，但除非您计划以编程方式显示内容，否则请尽可能单独使用它。

于 2020-10-18T20:15:26.950 回答