<figure>
和 <figcaption>
是 HTML5 中用于处理图片、图表、视频等多媒体内容的标签。<figure>
标签用于包裹多媒体内容,而 <figcaption>
标签则用于为这些内容提供标题或说明。
<figure>
和 <figcaption>
可以使 HTML 代码更具语义化,有助于搜索引擎和屏幕阅读器更好地理解页面内容。<figure>
包裹 <img>
标签,并使用 <figcaption>
添加描述。<figure>
包裹 <video>
标签,并使用 <figcaption>
添加描述。<figure>
包裹 <canvas>
或其他图表元素,并使用 <figcaption>
添加描述。在博客文章、新闻报道、产品展示等页面中,经常需要展示多媒体内容并为其添加描述。使用 <figure>
和 <figcaption>
可以使这些内容的展示更加规范和美观。
<figcaption>
和 <figure>
标签在默认情况下,<figure>
和 <figcaption>
标签是块级元素,会独占一行。要使它们在同一行上对齐,可以使用 CSS 进行调整。
<style>
.container {
display: flex;
align-items: center;
}
figure {
margin-right: 10px;
}
</style>
<div class="container">
<figure>
<img src="example.jpg" alt="Example Image">
</figure>
<figcaption>Example Image Description</figcaption>
</div>
<style>
.container {
display: grid;
grid-template-columns: auto auto;
gap: 10px;
}
</style>
<div class="container">
<figure>
<img src="example.jpg" alt="Example Image">
</figure>
<figcaption>Example Image Description</figcaption>
</div>
通过以上方法,你可以轻松实现 <figure>
和 <figcaption>
标签在同一行上的对齐。
领取专属 10元无门槛券
手把手带您无忧上云