7.1 元素 <figure>
在 HTML 中使用 <figure> 和 <figcaption> 标签提供了一种语义化的方式
来向多媒体元素添加说明。这些标签有助于改进内容结构，使其对用户和搜索引擎都更具可访问性和理解性。我们详细看看这些元素。
<figure> 元素用于标识独立的内容，它可以诠释或解释文档的其余部分。它可以包含图片、图表、视频、音频、表格或者代码块。
通常<figure>元素和<figcaption>元素一起使用，后者为<figure>的内容添加说明。
语法
HTML
<figure>
<!-- 这里可以是任何多媒体元素，比如图片 -->
</figure>
使用示例：
示例 1: 带有说明的图片
HTML
<figure>
<img src="example.jpg" alt="示例图片">
<figcaption>图片的说明，解释其内容</figcaption>
</figure>
示例 2: 带有说明的表格
HTML
<figure>
<table>
<tr>
<th>标题 1</th>
<th>标题 2</th>
</tr>
<tr>
<td>数据 1</td>
<td>数据 2</td>
</tr>
</table>
<figcaption>表格说明</figcaption>
</figure>
7.2 元素 <figcaption>
<figcaption> 元素用于为 <figure> 元素的内容添加说明。可以根据
开发者的喜好或设计要求将其放置在 <figure> 内容之前或之后。
语法
HTML
<figure>
<!-- figure 元素的内容 -->
<figcaption>内容的说明</figcaption>
</figure>
使用示例：
示例 1: 图片后的说明
HTML
<figure>
<img src="landscape.jpg" alt="风景">
<figcaption>美丽的风景，山脉和湖泊</figcaption>
</figure>
示例 2: 图片前的说明
HTML
<figure>
<figcaption>美丽的风景，山脉和湖泊</figcaption>
<img src="landscape.jpg" alt="风景">
</figure>
7.3 可访问性和SEO
使用 <figure> 和 <figcaption> 元素提升了你网站的可访问性和SEO。
用于残障人士的屏幕阅读程序能够通过语义化标签 <figcaption> 更好地理解图像的上下文。
搜索引擎也考虑 HTML 文档的结构，这有助于改进页面的索引和排名。
在不同情况下的用例：
示例 1: 嵌入图表
HTML
<figure>
<img src="chart.png" alt="显示销售增长的图表">
<figcaption>显示最近季度销售增长的图表</figcaption>
</figure>
示例 2: 带说明的视频内容
HTML
<figure>
<video controls>
<source src="example.mp4" type="video/mp4">
您的浏览器不支持视频。
</video>
<figcaption>显示产品工作的示例视频</figcaption>
</figure>
示例 3: 带说明的代码
HTML
<figure>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
<figcaption>在JavaScript中输出 "Hello, world!" 到控制台的示例函数</figcaption>
</figure>
7.4 使用CSS进行样式和设计
通过CSS样式化<figure>和<figcaption>元素，可以创建
吸引人的视觉设计并改善内容的用户体验。
应用样式的示例：
CSS
figure {
border: 1px solid #ccc;
padding: 10px;
margin: 20px;
text-align: center;
}
figcaption {
font-style: italic;
color: #555;
margin-top: 10px;
}
HTML
<figure>
<img data-max-width="800" data-id="ef101655-fef4-40b9-8b6c-f0c02494a747" src="https://cdn.javarush.com/images/article/ef101655-fef4-40b9-8b6c-f0c02494a747/800.jpeg" alt="nature">
<figcaption>美丽的自然景观</figcaption>
</figure>
HTML
<figure>
<img src="nature.jpg" alt="自然">
<figcaption>美丽的自然景观</figcaption>
</figure>
使用<figure>和<figcaption>元素提供了一种语义化和结构化的方式在网页中添加带说明的多媒体内容。
这些元素不仅提高了可访问性和SEO，还使内容对用户更具条理和易懂。
GO TO FULL VERSION