• 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>
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    效果

    在这里插入图片描述


    MDN

    :可附标题内容元素 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/figure

    HTML 
    元素代表一段独立的内容,可能包含
    元素定义的说明元素。该插图、标题和其中的内容通常作为一个独立的引用单元。 属性 此元素只包含全局属性。 使用说明 通常,
    的内容为图像、插图、图表、代码片段等,在文档的主内容流中引用,但可以移动到文档的另一部分或附录而不影响主内容流。 通过在其中插入
    (作为第一个或最后一个子元素),可以将标题与
    元素相关联。图中找到的第一个
    元素显示为图的标题。
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    desktopmobile
    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>
    
    • 1
    • 2
    • 3
    • 4

    在这个示例中,

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

    需要注意的是,

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



    在HTML中,

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

    标签

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

    示例:
    <figure>
      <img src="example.jpg" alt="Example Image">
      <figcaption>An example imagefigcaption>
    figure>
    
    • 1
    • 2
    • 3
    • 4

    标签

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

    示例:
    <figure>
      <img src="example.jpg" alt="Example Image">
      <figcaption>This is a caption for the image above.figcaption>
    figure>
    
    • 1
    • 2
    • 3
    • 4

    语义和可访问性

    使用

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

    注意事项

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













  • 相关阅读:
    深度学习Course5第四周Transformers习题整理
    云原生消息流系统 Apache RocketMQ 在腾讯云的大规模生产实践
    内置单片机的433无线模块高速连传典型运用
    TiDB Lightning 并行导入
    paddlepaddle模型的保存和加载
    【深度学习】StabelDiffusion,Lora训练过程,秋叶包,Linux,SDXL Lora训练
    吃透Chisel语言.21.Chisel时序电路(一)——Chisel寄存器(Register)详解
    98. 验证二叉搜索树
    如何在 JavaScript 中创建虚拟键盘
    Datawhale学习笔记AI +新能源:电动汽车充电站充电量预测
  • 原文地址:https://blog.csdn.net/kfepiza/article/details/136134220