Html的<figure><figcaption>标签

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>&lt;figure>标签默认是block元素会自动换行,像&lt;标签一样会自动隔行</figure><figure>&lt;figure>标签默认是block元素会自动换行,像&lt;标签一样会自动隔行</figure><figure>&lt;figure>标签默认是block元素会自动换行,像&lt;标签一样会自动隔行</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 <figure>:可附标题内容元素 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/figure

HTML <figure> 元素代表一段独立的内容,可能包含 <figcaption> 元素定义的说明元素。该插图、标题和其中的内容通常作为一个独立的引用单元。
     属性
此元素只包含全局属性。

使用说明
通常,<figure> 的内容为图像、插图、图表、代码片段等,在文档的主内容流中引用,但可以移动到文档的另一部分或附录而不影响主内容流。
通过在其中插入 <figcaption>(作为第一个或最后一个子元素),可以将标题与 <figure> 元素相关联。图中找到的第一个 <figcaption> 元素显示为图的标题。

| | desktop ||||| mobile ||||||
| | Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on iOS | Samsung Internet | WebView Android |

figure Chrome 8 Toggle history Edge 12 Toggle history Firefox 4 Toggle history Opera 11 Toggle history Safari 5.1 Toggle history Chrome Android 18 Toggle history Firefox for Android 4 Toggle history Opera Android 11 Toggle history Safari on iOS 5 Toggle history Samsung Internet 1.0 Toggle history WebView Android 4.4 Toggle history

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

<figure>标签用于包含独立的内容,这些内容应该与页面的主要内容分开,但仍然与页面有关。它可以包含图片、图表、音视频、代码块等任何你认为需要独立展示的内容。<figure>标签通常与<figcaption>标签一起使用,以提供对内容的描述或解释。

<figcaption>标签用于为<figure>标签中的内容提供标题或说明。它应该被放置在<figure>标签内部,紧跟在需要说明的内容之后。浏览器通常会将<figcaption>标签的内容以较小的字体显示,并将其与主要内容稍微区分开来,以便用户可以轻松地识别它。

以下是一个使用<figure><figcaption>标签的示例:

html 复制代码
<figure>
  <img src="example.jpg" alt="示例图片">
  <figcaption>这是一张示例图片的说明</figcaption>
</figure>

在这个示例中,<figure>标签包含了一个<img>标签和一个<figcaption>标签。<img>标签用于显示图片,而<figcaption>标签则提供了对图片的说明。当用户查看页面时,他们将看到一张图片和下面的说明文本。由于这些内容被包含在<figure>标签中,因此它们被视为一个独立的单元,与页面的其他内容分开。

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

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

<figure> 标签

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

示例:
html 复制代码
<figure>
  <img src="example.jpg" alt="Example Image">
  <figcaption>An example image</figcaption>
</figure>

<figcaption> 标签

<figcaption>元素为<figure>元素提供标题或描述。它应该包含关于<figure>元素内容的简短描述或标题。

示例:
html 复制代码
<figure>
  <img src="example.jpg" alt="Example Image">
  <figcaption>This is a caption for the image above.</figcaption>
</figure>

语义和可访问性

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

注意事项

  • <figure><figcaption>标签是HTML5中引入的新元素,因此一些较旧的浏览器可能不完全支持它们。为了确保兼容性,可能需要使用JavaScript库或CSS框架来模拟这些功能。
  • 在使用<figure><figcaption>时,要确保它们的内容是有意义的,并且与主内容相关。不要仅仅为了样式或布局目的而滥用这些标签。

*[Full support]: Full support

相关推荐
软件小伟9 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾30 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧39 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
gqkmiss2 小时前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃2 小时前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter