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实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
Apr 05 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
Oct 20 HTML / CSS
html5绘制时钟动画
Dec 15 HTML / CSS
使用canvas对video视频某一刻截图功能
Sep 25 HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
Aug 05 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利用COM对象访问SQLServer、Access
2006/10/09 PHP
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
php中函数的形参与实参的问题说明
2010/09/01 PHP
mysql数据库差异比较的PHP代码
2012/02/05 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
PHP中实现接收多个name相同但Value不相同表单数据实例
2015/02/03 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
Track Image Loading效果代码分析
2007/08/13 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
JS 实现Json查询的方法实例
2013/04/12 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
python使用PyQt5的简单方法
2019/02/27 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
对Django外键关系的描述
2019/07/26 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
法国时尚童装网站:Melijoe
2016/08/10 全球购物
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
物流创业计划书
2014/02/01 职场文书
贯彻落实“八项规定”思想汇报
2014/09/13 职场文书
解决Mysql中的innoDB幻读问题
2022/04/29 MySQL