Html的
示例一:
<figure><figcaption>figcaption001,fig标题1 </figcaption><figcaption>figcaption002,fig标题2 </figcaption><div style="width:calc(100px*2); height:calc(100px*2); background-color: black; color:white;" ></div><figcaption>figcaption003,fig标题3 </figcaption><figcaption>figcaption004,fig标题4 </figcaption></figure><figure><span class="token entity named-entity" title="<figure>标签默认是block元素会自动换行,像<span class="token entity named-entity" title="<标签一样会自动隔行</figure><figure><span class="token entity named-entity" title="<figure>标签默认是block元素会自动换行,像<span class="token entity named-entity" title="<标签一样会自动隔行</figure><figure><span class="token entity named-entity" title="<figure>标签默认是block元素会自动换行,像<span class="token entity named-entity" title="<标签一样会自动隔行</figure><figure><figcaption>figcaption001,fig标题1 </figcaption><figcaption>figcaption002,fig标题2 </figcaption><div style="width:calc(100px*3); height:calc(100px*3); background:url(panda2402170110.jpg);background-repeat:no-repeat;background-size:cover;color:white;" ></div><figcaption>figcaption003,fig标题3 </figcaption><figcaption>figcaption004,fig标题4 </figcaption></figure>效果
MDN
：可附标题内容元素 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/figure
和标签用于包含独立的内容，这些内容应该与页面的主要内容分开，但仍然与页面有关。它可以包含图片、图表、音视频、代码块等任何你认为需要独立展示的内容。标签中的内容提供标题或说明。它应该被放置在和标签包含了一个和和
元素表示一段自包含的内容，通常与主内容相关，但也可以独立存在。它常常包含图像、图表或其他媒体内容，以及与之相关的描述或标题。
元素提供标题或描述。它应该包含关于和
HTML 元素代表一段独立的内容，可能包含 元素定义的说明元素。该插图、标题和其中的内容通常作为一个独立的引用单元。 属性此元素只包含全局属性。使用说明通常， 的内容为图像、插图、图表、代码片段等，在文档的主内容流中引用，但可以移动到文档的另一部分或附录而不影响主内容流。通过在其中插入 （作为第一个或最后一个子元素），可以将标题与 元素相关联。图中找到的第一个 元素显示为图的标题。 | desktop | mobile | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on iOS | Samsung Internet | WebView Android | |
figure | Full supportChrome8 Toggle history | Full supportEdge12 Toggle history | Full supportFirefox4 Toggle history | Full supportOpera11 Toggle history | Full supportSafari5.1 Toggle history | Full supportChrome Android18 Toggle history | Full supportFirefox for Android4 Toggle history | Full supportOpera Android11 Toggle history | Full supportSafari on iOS5 Toggle history | Full supportSamsung Internet1.0 Toggle history | Full supportWebView Android4.4 Toggle history |
HTML的
以下是一个使用
<figure><img src="example.jpg" alt="示例图片"><figcaption>这是一张示例图片的说明</figcaption></figure>在这个示例中，
![]()
![]()
需要注意的是，
在HTML中，
示例：
<figure><img src="example.jpg" alt="Example Image"><figcaption>An example image</figcaption></figure>
示例：
<figure><img src="example.jpg" alt="Example Image"><figcaption>This is a caption for the image above.</figcaption></figure>语义和可访问性
使用
注意事项
- 在使用