Html的<figure><figcaption>标签

Html的<figure><figcaption>标签

示例一:

<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> 元素显示为图的标题。
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><figcaption>标签通常一起使用,用于表示页面中的独立内容,如图片、图表、代码块等,以及为这些内容提供说明或标题。

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

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

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

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

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

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



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

<figure> 标签

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

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

<figcaption> 标签

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

示例:
<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>时,要确保它们的内容是有意义的,并且与主内容相关。不要仅仅为了样式或布局目的而滥用这些标签。













本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/687488.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

力扣经典题:环形链表的检测与返回

1.值得背的题 /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/ struct ListNode *detectCycle(struct ListNode *head) {struct ListNode*fasthead;struct ListNode*slowhead;while(fast!NULL&&fast->…

解锁Spring Boot中的设计模式—03.委派模式:探索【委派模式】的奥秘与应用实践!

委派模式 文章目录 委派模式1.简述**应用场景****优缺点****业务场景示例** 2.类图3.具体实现3.1.自定义注解3.2.定义抽象委派接口3.3.定义具体执行者3.4.定义委派者(统一管理委派任务)3.5.定义委派者管理类 4.测试4.1.controller层4.2.测试不同场景4.2.1.测试生产部门计算费用…

html5移动端适配;检测浏览器信息函数

html5移动端适配 //动态改变font-size大小 (function changeFontSize() {let resizeEvt orientationchange in window ? orientationchange : resizeif (!isPC()) {let docEl document.documentElement;// recalc function () {let clientWidth docEl.clientWidth;docEl.…

【GPT-2】论文解读:Language Models are Unsupervised Multitask Learners

文章目录 介绍zero-shot learning 零样本学习 方法数据Input Representation 结果 论文&#xff1a;Language Models are Unsupervised Multitask Learners 作者&#xff1a;Alec Radford, Jeff Wu, Rewon Child, D. Luan, Dario Amodei, I. Sutskever 时间&#xff1a;2019 介…

java.lang.NumberFormatException: For input string: “!“

文章目录 MyBatis XML文件查询报错&#xff1a;For input string: "!"原因调整办法OGNL表达式 MyBatis XML文件查询报错&#xff1a;For input string: “!” <if test"memberInfoDrawing.phone ! null and memberInfoDrawing.phone ! and memberInfoDrawi…

Hadoop-Yarn-NodeManager都做了什么

一、源码下载 下面是hadoop官方源码下载地址&#xff0c;我下载的是hadoop-3.2.4&#xff0c;那就一起来看下吧 Index of /dist/hadoop/core 二、上下文 在我的<Hadoop-Yarn-启动篇>博客中已经简要的分析了NodeManager的启动过程&#xff0c;NodeManager是管理整个集…

MongoDB聚合运算符:$add

$add运算符将将数字相加或将数字和日期相加。如果参数之一是日期&#xff0c;则 $add会将其他参数视为毫秒&#xff0c;并添加到日期中。 语法 { $add: [ <expression1>, <expression2>, ... ] }参数可以是任何有效的表达式&#xff0c;只要能否解析为数值或日期…

C++中.h与.hpp文件的差异问答

.h文件与.hpp文件在C编程中的区别主要基于约定和偏好&#xff0c;而不是C语言或其编译器强制执行的任何技术差异。以下是这些差异的概述&#xff1a; 约定&#xff1a; .h 文件&#xff1a;此扩展名源于C编程&#xff0c;表示头文件。它在C中常用于头文件&#xff0c;但不一定表…

AppSrv-配置故障转移(23国赛真题)

2023全国职业院校技能大赛网络系统管理赛项–模块B:服务部署(WindowServer2022) 文章目录 知识补充配置步骤验证故障转移配置页面。设置为“热备用服务器”模式。伙伴服务器“DC2”为“待机”状态。为备用服务器保留5%的地址。状态切换间隔为60分钟。启用身份验证,密码为“…

四种mfc140u.dll丢失的解决方法,有效恢复mfc140u.dll丢失

mfc140u.dll文件的重要性&#xff0c;当系统中出现mfc140u.dll丢失的情况时&#xff0c;可能会导致一系列问题和影响。因此&#xff0c;保持mfc140u.dll文件的完整性对于系统和应用程序的稳定运行至关重要。一旦出现mfc140u.dll文件丢失的情况&#xff0c;我们需要采取有效的方…

怎样录屏?掌握这些方法,让你轻松驾驭!

随着科技的进步&#xff0c;如今我们可以通过屏幕录制软件来记录我们的电脑屏幕活动。无论是为了分享游戏精彩瞬间&#xff0c;还是为了制作教程或演示&#xff0c;录屏都成为了许多人的需求。可是你知道怎样录屏才是最好的吗&#xff1f;接下来&#xff0c;本文将为您介绍三种…

前端面试必备八股文——HTMLCSS

HTML src和href的区别 src和href都是用来加载外部资源&#xff0c;区别如下 src当浏览器解析到该元素时&#xff0c;会暂停其他资源的加载和处理&#xff0c;直到该资源加载完成。 它会将资源内容嵌入到当前标签所在的位置&#xff0c;将其指向的资源下载应用到文档内&#…

Mybatis速成(一)

文章目录 Mybatis速成&#xff08;一&#xff09;前言1. 快速入门1.1 入门程序分析1.2 入门程序实现1.2.1 准备工作1.2.1.1 创建springboot工程1.2.1.2 数据准备 1.2.2 配置Mybatis1.2.3 编写SQL语句1.2.4 单元测试 1.3 解决SQL警告与提示 2. JDBC介绍(了解)2.1 介绍2.2 代码2.…

新概念英语第二册(65)

【New words and expressions】生词和短语&#xff08;9&#xff09; versus prep. 对 (对抗的概念) Christmas n. 圣诞节 circus n. 马戏团 present n. 礼物 accompany …

本地个性化聊天机器人CHAT WITH RTX

英伟达推出了自家版本的ChatGPT Chat With RTX 是一款演示应用程序&#xff0c;可让您个性化连接到您自己的内容&#xff08;文档、笔记、视频或其他数据&#xff09;的 GPT 大语言模型 (LLM)。利用检索增强生成 (RAG)、TensorRT-LLM和 RTX 加速&#xff0c;您可以查询自定义聊…

django定时任务(django-crontab)

目录 一&#xff1a;安装django-crontab&#xff1a; 二&#xff1a;添加django_crontab到你的INSTALLED_APPS设置&#xff1a; 三&#xff1a;运行crontab命令来创建或更新cron作业&#xff1a; 四&#xff1a;定义你的cron作业 五&#xff1a;创建你的管理命令&#xff…

《学成在线》微服务实战项目实操笔记系列(P92~P120)【下】

史上最详细《学成在线》项目实操笔记系列【下】&#xff0c;跟视频的每一P对应&#xff0c;全系列18万字&#xff0c;涵盖详细步骤与问题的解决方案。如果你操作到某一步卡壳&#xff0c;参考这篇&#xff0c;相信会带给你极大启发。 四、课程发布模块 4.1 (课程发布)模块需求…

待处理的研究内容

android是不是可以在子线程中更新UI 回答是可以的 android之所以不能在子线程中更新Ui是因为 requestLayout会重新测量布局&#xff0c;走了ViewRoot的一系列方法&#xff0c;也会走 ViewRootImp的requestLayout() public void requestLayout() {if (!mHandlingLayoutInLa…

【leetcode】深搜、暴搜、回溯、剪枝(C++)3

深搜、暴搜、回溯、剪枝&#xff08;C&#xff09;3 一、解数独1、题目描述2、代码3、解析 二、单词搜索1、题目描述2、代码3、解析 三、黄金矿工1、题目描述2、代码3、解析 四、不同路径III1、题目描述2、代码3、解析 一、解数独 1、题目描述 leetcode链接 2、代码 class…