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选择器的研究(详解)
Sep 16 HTML / CSS
CSS Grid布局教程之网格单元格布局
Dec 30 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
Jun 25 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
一些常用的HTML5模式(pattern) 总结
Jul 14 HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 HTML / CSS
使用HTML+Css+transform实现3D导航栏的示例代码
Mar 31 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过滤危险html代码的函数
2008/07/22 PHP
php解析xml方法实例详解
2015/05/12 PHP
PHP错误机制知识汇总
2016/03/24 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
js css样式操作代码(批量操作)
2009/10/09 Javascript
JavaScript中实现块作用域的方法
2010/04/01 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
Node.js 的 GC 机制详解
2019/06/03 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
[06:36]吞吞映像top1
2014/06/20 DOTA
python连接sql server乱码的解决方法
2013/01/28 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
销售实习自我鉴定
2013/12/07 职场文书
个人优缺点自我评价
2014/01/27 职场文书
开会迟到检讨书
2014/02/03 职场文书
小学见习报告
2014/10/31 职场文书
法定授权委托证明书
2015/06/18 职场文书
干货!开幕词的写作方法
2019/04/02 职场文书
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server