HTML 图片标题

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

HTML <figcaption> 标签用于为 <figure> 元素中的内容提供标题。在这个实验中,你将学习如何使用 <figcaption> 标签为图片添加标题。

注意:你可以在 index.html 中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。



Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/MultimediaandGraphicsGroup(["`Multimedia and Graphics`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/MultimediaandGraphicsGroup -.-> html/multimedia("`Multimedia Elements`") html/MultimediaandGraphicsGroup -.-> html/fig_cap("`Figure and Caption Association`") subgraph Lab Skills html/basic_elems -.-> lab-70757{{"`HTML 图片标题`"}} html/head_elems -.-> lab-70757{{"`HTML 图片标题`"}} html/multimedia -.-> lab-70757{{"`HTML 图片标题`"}} html/fig_cap -.-> lab-70757{{"`HTML 图片标题`"}} end

添加图片和标题

在你的首选文本编辑器中打开 index.html 文件,并编写基本的 HTML 结构。添加 <DOCTYPE> 声明、<html><head><body> 标签。

  1. <body> 标签内,创建一个包含图片标签的 <figure> 元素。你可以使用任何你选择的图片。例如:
<figure>
  <img src="your-image-url-here" alt="Your image description" />
</figure>
  1. 现在,在 <img> 标签后立即添加一个 <figcaption> 标签,为图片提供标题。例如:
<figure>
  <img src="your-image-url-here" alt="Your image description" />
  <figcaption>Image caption goes here</figcaption>
</figure>
  1. 保存对 index.html 文件的更改,并在你的网页浏览器中打开它。你现在应该可以看到图片及其下方的标题。

样式化标题

  1. 默认情况下,<figcaption> 标签是一个块级元素,占据父元素的整个宽度。你可以使用 CSS 来调整标题的样式,例如位置、字体、颜色等。

  2. index.html 文件的 <head> 部分添加以下 CSS 代码,以更改标题的字体、字体大小和颜色:

figcaption {
  font-family: Arial, sans-serif;
  font-size: 18px;
  color: #555;
}
  1. 你还可以通过使用 CSS 调整 <figcaption> 标签的 margin 和 padding 属性来更改标题的位置。例如:
figcaption {
  margin-top: 10px;
  padding: 5px;
}
添加多张图片和标题
  1. 你可以通过重复前面的步骤,在单个网页中添加多张图片和标题。只需为每张图片创建一个新的 <figure> 元素,其中包含 <img> 标签和 <figcaption> 标签。

  2. 保存对 index.html 文件的更改并刷新网页。你现在应该可以看到所有图片及其下方的标题。

总结

HTML <figcaption> 标签是一个强大的工具,用于为网页中的图片提供标题。通过使用此标签,你可以使图片对用户更具可访问性和友好性。别忘了使用 CSS 来样式化你的标题,让它们看起来更美观!

您可能感兴趣的其他 HTML 教程