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实现字体颜色渐变的实现
Mar 09 HTML / CSS
细说CSS3中的选择符
Oct 17 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
IE支持HTML5的解决方法
Oct 20 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
Sep 01 HTML / CSS
html5使用canvas画一条线
Dec 15 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
Sep 09 HTML / CSS
AmazeUI 图标的示例代码
Aug 13 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
May 25 HTML / CSS
HTML基础详解(下)
Oct 16 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 smarty模版引擎中的缓存应用
2009/12/11 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
javascript 操作文件 实现方法小结
2009/07/02 Javascript
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
Js组件的一些写法
2010/09/10 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
javascript实用方法总结
2015/02/06 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
在Python的setuptools框架下生成egg的教程
2015/04/13 Python
Numpy数组的保存与读取方法
2018/04/04 Python
python多线程分块读取文件
2019/08/29 Python
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
表彰先进集体通报
2014/01/12 职场文书
护士自我介绍信
2014/01/13 职场文书
财务工作者先进事迹材料
2014/01/17 职场文书
代理班主任的自我评价
2014/02/04 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
公司员工辞职信范文
2015/05/12 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
python中如何对多变量连续赋值
2021/06/03 Python
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang
oracle重置序列从0开始递增1
2022/02/28 Oracle