css小tips -- figcaption标签

今天看到了figcaption标签：

<div class="col-md-4"><figure class="single bg"><img class="img-fluid" src="https://res.cloudinary.com/kirillkrasin/image/upload/v1529409840/codepen/cat.jpg" alt="image"><figcaption>Adorable Cat</figcaption></figure>
</div>

查了菜鸟教程，figcaption用于描述figure标签的标题，figure用于标记img，<figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置；

对于figure标签，developer.mozilla上面的说明：

HTML <figure> 元素代表一段独立的内容, 经常与说明(caption) <figcaption> 配合使用, 并且作为一个独立的引用单元。当它属于主体(main flow)时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。

可以通过在<figure>元素中插入一个<figcaption>来为其关联一个标题(作为它的第一个或者最后一个子元素)；

所以，我之前的错误观点是把<figcaption>和<img>关联在了一起，实际上，<figcaption>是和<figure>关联，作为它的第一个子元素或者最后一个，<fugure>里面可以放不止是<img>还可以是代码段，图片（规定独立的流内容）等等，所以<figcaption>和<img>是没有必要关联的。

css小tips -- figcaption标签相关推荐

css小技巧 -- 单标签实现单行文字居中，多行文字居左
可能出现的尺寸场景: 代码如下: <!DOCTYPE html> <html lang="zh"><head><meta charset= ...
figcaption标签css,[HTML]正确使用Figure和Figcaption标签（译）_html/css_WEB-ITnose
原文: Quick Tip: The Right Way to Use Figure & Figcaption Elements figure和 figcaption元素通常作为两个语义化的标 ...
uni-app 使用vue的语法+小程序的标签和API。
开发规范为了实现多端兼容,综合考虑编译速度.运行性能等因素,uni-app 约定了如下开发规范: 页面文件遵循 Vue 单文件组件 (SFC) 规范组件标签靠近小程序规范,详见uni-app 组件 ...
让你的网站更炫酷的一些小 tips
本文讲的是让你的网站更炫酷的一些小 tips, 上周,我和一位老客户聊天,她说:"尼克,我觉得我的网站需要改进,但我不能确定我具体需要做什么." 然后我就去问了一圈,包括朋友.家人 ...
CSS简介及常用标签及属性
一.概述 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style ...
java中标签内容居中显示_图形标签中图像上的figcaption标签的居中和对齐宽度
我花了两天时间试图解决无花果/无花果问题无济于事 . 我有一个Django应用程序,用户可以在其中提交图像,我正在使用图形和figcaption标签来显示带有附带 Headers 的图像 . 主要问题 ...
基于微信小程序Map标签及高德地图开源方法实现路径导航
微信小程序自带地图map标签,他是基于canvas画图功能进行的地图渲染,同时依赖微信的getlocation获取经纬度,绘制周边地图.地图上可以标点,画线,查看当地地理信息.但是自带的导航功能模块不 ...
6—CSS基础选择器（标签选择器、类选择器、id选择器）
css简介 css是层叠样式表的简称,css主要用于设置html的文本内容.图像的外形以及版式的布局和外观显示样式.css让我们的网页更加丰富多彩,布局更加灵活自如. css语法规范 css规则由两个 ...
日常开发CSS小技巧整理
日常开发CSS小技巧整理 1.解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移 .wrap {display: inline-block;overflow ...

css小tips -- figcaption标签

css小tips -- figcaption标签相关推荐

最新文章

热门文章