html5 figure和figcaption的使用方法


Posted in HTML / CSS onSeptember 10, 2018

figure标签和figcaption标签是html5新增的语义化标签。

figure标签,html5语义化标签。

用于规定独立的流内容(图像、图表、照片、代码等等)。

figcaption标签,html5语义化标签。

与figure配套使用,用于标签定义figure元素的标题。

用figure和figcaption标签的好处

搜索引擎搜索到figure的时候会知道,这里存放的是图片、图表、照片、代码等媒体,不不会认为这里存放的是文章等其他东西。搜索引擎搜索的时候更快捷更便利。
另一方面程序员在看的时候,看到这个标签的时候,就会知道,这里存在的就是图片等媒体,便于阅读。

下面用图简单描述下这两个标签的使用方法

html5 figure和figcaption的使用方法

案例1:

不带有标题的figure元素:

<figure>
    <img alt="三水点靠木" src="logo.png"/>
</figure>

案例2:

带有标题的figure元素:

<figure>
    <img alt="三水点靠木" src="logo.png"/>
    <figcaption>三水点靠木,三水点靠木是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料</figcaption>
</figure>

案例3:

多个图片,同一个标题的figure元素:

<figure>
    <img alt="三水点靠木1" src="logo1.png"/>
    <img alt="三水点靠木2" src="logo2.png"/>
    <img alt="三水点靠木3" src="logo3.png"/>
    <figcaption>三水点靠木,三水点靠木是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料</figcaption>
</figure>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
详解使用CSS3的@media来编写响应式的页面
Nov 01 HTML / CSS
推荐一些比较有用的css3新属性
Nov 11 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 HTML / CSS
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
Mar 31 HTML / CSS
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
Apr 13 HTML / CSS
Html5新增了哪些功能
Apr 16 HTML / CSS
css3中2D转换之有趣的transform形变效果
Feb 24 HTML / CSS
用canvas画心电图的示例代码
Sep 10 #HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 #HTML / CSS
canvas离屏技术与放大镜实现代码示例
Aug 31 #HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 #HTML / CSS
使用canvas对多图片拼合并导出图片的方法
Aug 28 #HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
Aug 28 #HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 #HTML / CSS
You might like
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
thinkPHP引入类的方法详解
2016/12/08 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
js event事件的传递与冒泡处理
2009/12/06 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
Express框架之connect-flash详解
2017/05/31 Javascript
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
应届生财务管理求职信
2013/11/06 职场文书
拾金不昧的表扬信
2014/01/16 职场文书
企业年度评优方案
2014/06/02 职场文书
组织鉴定材料
2014/06/02 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
会计人员岗位职责
2015/02/03 职场文书
物业保洁员管理制度
2015/08/05 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript
解读Vue组件注册方式
2021/05/15 Vue.js
Matplotlib绘制条形图的方法你知道吗
2022/03/21 Python