Html的＜figure＞＜figcaption＞标签

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><figure>标签默认是block元素会自动换行,像<标签一样会自动隔行figure><figure><figure>标签默认是block元素会自动换行,像<标签一样会自动隔行figure><figure><figure>标签默认是block元素会自动换行,像<标签一样会自动隔行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 support Chrome 8 Toggle history	Full support Edge 12 Toggle history	Full support Firefox 4 Toggle history	Full support Opera 11 Toggle history	Full support Safari 5.1 Toggle history	Full support Chrome Android 18 Toggle history	Full support Firefox for Android 4 Toggle history	Full support Opera Android 11 Toggle history	Full support Safari on iOS 5 Toggle history	Full support Samsung Internet 1.0 Toggle history	Full support WebView Android 4.4 Toggle history

HTML的

和

标签通常一起使用，用于表示页面中的独立内容，如图片、图表、代码块等，以及为这些内容提供说明或标题。

标签用于包含独立的内容，这些内容应该与页面的主要内容分开，但仍然与页面有关。它可以包含图片、图表、音视频、代码块等任何你认为需要独立展示的内容。

标签通常与

标签一起使用，以提供对内容的描述或解释。

标签用于为

标签中的内容提供标题或说明。它应该被放置在

标签内部，紧跟在需要说明的内容之后。浏览器通常会将

标签的内容以较小的字体显示，并将其与主要内容稍微区分开来，以便用户可以轻松地识别它。

以下是一个使用

和

标签的示例：

<figure>
  <img src="example.jpg" alt="示例图片">
  <figcaption>这是一张示例图片的说明figcaption>
figure>

在这个示例中，

标签包含了一个标签和一个

标签。标签用于显示图片，而

标签则提供了对图片的说明。当用户查看页面时，他们将看到一张图片和下面的说明文本。由于这些内容被包含在

标签中，因此它们被视为一个独立的单元，与页面的其他内容分开。

需要注意的是，

和

标签是HTML5中引入的新标签，因此在一些较旧的浏览器中可能不受支持。但是，在现代浏览器中，它们已经被广泛支持，并且可以用于创建更加语义化和可访问性的网页内容。

在HTML中，

和

标签通常一起使用，用于对图像、图表、照片、代码块等进行分组，并为这些元素提供描述或标题。

标签

元素表示一段自包含的内容，通常与主内容相关，但也可以独立存在。它常常包含图像、图表或其他媒体内容，以及与之相关的描述或标题。

示例：

<figure>
  <img src="example.jpg" alt="Example Image">
  <figcaption>An example imagefigcaption>
figure>

标签

元素为

元素提供标题或描述。它应该包含关于

元素内容的简短描述或标题。

示例：

<figure>
  <img src="example.jpg" alt="Example Image">
  <figcaption>This is a caption for the image above.figcaption>
figure>

语义和可访问性

使用

和

标签可以提高内容的语义化和可访问性。搜索引擎可以更好地理解内容的结构和意义，同时辅助技术（如屏幕阅读器）也能更好地向用户传达信息。

注意事项

• 和

  标签是HTML5中引入的新元素，因此一些较旧的浏览器可能不完全支持它们。为了确保兼容性，可能需要使用JavaScript库或CSS框架来模拟这些功能。

• 在使用

  和

  时，要确保它们的内容是有意义的，并且与主内容相关。不要仅仅为了样式或布局目的而滥用这些标签。