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区域模块region相关编写示例
Aug 28 HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 HTML / CSS
CSS3 @media的基本用法总结
Sep 10 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
Html5如何唤起百度地图App的方法
Jan 27 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
Jan 07 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
Jan 30 HTML / CSS
使用phonegap播放音频的实现方法
Mar 31 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 HTML / CSS
详解CSS开发过程中的20个快速提升技巧
May 21 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
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
php array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
document.documentElement &amp;&amp; document.documentElement.scrollTop
2007/12/01 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
python抓取百度首页的方法
2015/05/19 Python
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
python3+PyQt5实现自定义窗口部件Counters
2018/04/20 Python
python实现计算器功能
2019/10/31 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
大学生职业生涯规划书范文
2014/01/04 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
销售活动策划方案
2014/08/26 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
教师求职自荐信范文
2015/03/04 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书