figure caption
时间: 2025-02-01 10:13:01 浏览: 51
### HTML `figure` 和 `figcaption` 使用方法
在HTML中,`<figure>`元素用于对自成一体的内容进行分组,通常是一个插图、图表、照片或其他重要内容。而`<figcaption>`元素则用来为`<figure>`提供标题或说明文字。
#### 基本语法结构
```html
<figure>
<!-- 插入图片 -->
<img src="image.jpg" alt="描述性的替代文本">
<!-- 添加图注 -->
<figcaption>这是图片的说明</figcaption>
</figure>
```
此结构允许浏览器以及辅助技术理解图像与其对应的文字解释之间的关系[^2]。
#### 实际应用案例
下面展示了一个具体的例子,其中包含了如何正确地组合使用这两个标签:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Figure Caption 示例</title>
<style>
figure {
margin: 2em auto;
text-align: center;
}
figcaption {
font-style: italic;
color: gray;
}
</style>
</head>
<body>
<h2>美丽的风景画</h2>
<figure>
<img src="https://example.com/beautiful-scenery.jpg" alt="一幅描绘山川河流美丽景色的艺术作品">
<figcaption>这是一幅由著名画家创作的作品,展现了大自然的魅力。</figcaption>
</figure>
</body>
</html>
```
在这个实例里,通过CSS样式设置了居中的显示效果,并给予`<figcaption>`特定的颜色和字体风格来区分正文内容[^3]。
阅读全文
相关推荐



















