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 相关文章推荐
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 HTML / CSS
CSS3实现翘边的阴影效果的代码示例
Jun 13 HTML / CSS
CSS3实现3D翻书效果
Jun 20 HTML / CSS
css3媒体查询中device-width和width的区别详解
Mar 27 HTML / CSS
css3实现文字首尾衔接跑马灯的示例代码
Oct 16 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 HTML / CSS
html5的新玩法——语音搜索
Jan 03 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
HTML5 video 视频标签使用介绍
Feb 03 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 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加密解密的代码
2006/10/09 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
php中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
分享一个Laravel好用的Cache宏
2015/03/02 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
php实现简单四则运算器
2020/11/29 PHP
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
requests和lxml实现爬虫的方法
2017/06/11 Python
Python2.7读取PDF文件的方法示例
2017/07/13 Python
Python线程创建和终止实例代码
2018/01/20 Python
python os.path模块常用方法实例详解
2018/09/16 Python
python装饰器原理与用法深入详解
2019/12/19 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
英国电信商店:BT Shop
2019/12/17 全球购物
10的分与合教学反思
2014/04/30 职场文书
个人工作主要事迹
2014/05/08 职场文书
小区文明倡议书
2014/05/16 职场文书
小学教师师德承诺书
2014/05/23 职场文书
以下牛机,你有几个
2022/04/05 无线电
nginx 添加http_stub_status_module模块
2022/05/25 Servers