如何使用HTML5的<figure>和<figcaption>展示图像和说明

在本文中，我们将学习如何使用HTML5的<figure>和<figcaption>标签展示图像和说明。

首先，我们需要了解<figure>标签的作用。该标签用于将图像与其说明文本组合在一起。

<figure>
  <img src="example.jpg" alt="翻滚的胖子博客">
  <figcaption>This is an example image</figcaption>
</figure>

在上面的代码中，<img>标签用于插入图像，<figcaption>标签用于添加图像的说明文本。

接下来，我们将通过一个函数详细解释<figure>和<figcaption>标签的使用。

function displayImageWithCaption(imageSrc, captionText) {
  var figureElement = document.createElement('figure');
  var imgElement = document.createElement('img');
  imgElement.src = imageSrc;
  var figcaptionElement = document.createElement('figcaption');
  figcaptionElement.textContent = captionText;
  figureElement.appendChild(imgElement);
  figureElement.appendChild(figcaptionElement);
  document.body.appendChild(figureElement);
}

上面的函数displayImageWithCaption接受两个参数，分别是图像的URL和说明文本。该函数会创建一个<figure>标签，并将图像和说明文本添加到其中，最后将<figure>标签添加到页面中。

通过调用这个函数，我们可以很方便地展示带有说明文本的图像。

displayImageWithCaption('example.jpg', 'This is an example image');

上面的代码会在页面中显示一个图像，并带有相应的说明文本。

通过学习本文，您应该能够掌握如何使用HTML5的<figure>和<figcaption>标签展示图像和说明。通过函数的使用，您可以轻松地创建带有说明文本的图像展示效果。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： HTML5中的<mark>标签用于高亮文本
• 下一篇： 使用HTML5的<article>和<section>划分内容块