介绍
HTML <figcaption>
标签用于为 <figure>
元素中的内容提供标题。在这个实验中,你将学习如何使用 <figcaption>
标签为图片添加标题。
注意:你可以在
index.html
中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
HTML <figcaption>
标签用于为 <figure>
元素中的内容提供标题。在这个实验中,你将学习如何使用 <figcaption>
标签为图片添加标题。
注意:你可以在
index.html
中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
在你的首选文本编辑器中打开 index.html
文件,并编写基本的 HTML 结构。添加 <DOCTYPE>
声明、<html>
、<head>
和 <body>
标签。
<body>
标签内,创建一个包含图片标签的 <figure>
元素。你可以使用任何你选择的图片。例如:<figure>
<img src="your-image-url-here" alt="Your image description" />
</figure>
<img>
标签后立即添加一个 <figcaption>
标签,为图片提供标题。例如:<figure>
<img src="your-image-url-here" alt="Your image description" />
<figcaption>Image caption goes here</figcaption>
</figure>
index.html
文件的更改,并在你的网页浏览器中打开它。你现在应该可以看到图片及其下方的标题。默认情况下,<figcaption>
标签是一个块级元素,占据父元素的整个宽度。你可以使用 CSS 来调整标题的样式,例如位置、字体、颜色等。
在 index.html
文件的 <head>
部分添加以下 CSS 代码,以更改标题的字体、字体大小和颜色:
figcaption {
font-family: Arial, sans-serif;
font-size: 18px;
color: #555;
}
<figcaption>
标签的 margin 和 padding 属性来更改标题的位置。例如:figcaption {
margin-top: 10px;
padding: 5px;
}
你可以通过重复前面的步骤,在单个网页中添加多张图片和标题。只需为每张图片创建一个新的 <figure>
元素,其中包含 <img>
标签和 <figcaption>
标签。
保存对 index.html
文件的更改并刷新网页。你现在应该可以看到所有图片及其下方的标题。
HTML <figcaption>
标签是一个强大的工具,用于为网页中的图片提供标题。通过使用此标签,你可以使图片对用户更具可访问性和友好性。别忘了使用 CSS 来样式化你的标题,让它们看起来更美观!