html5的figure/figcaption讲解及实例

一、总结

一句话总结：

figure元素：用来包着媒体资源，比如图片图表：是一个【媒体组合元素】，也就是对其他的媒体元素进行组合，比如：图像、图表等等
figcaption元素：figure的标题：用来给figure元素定义标题
<figure>

  <img src="p1.jpg" alt="" width="100">

  <img src="p2.jpg" alt="" width="100">

</figure>

<figcaption>我的厨艺作品1</figcaption>

1、figure+figcapture完全可以用div+h标签替代，那么他们存在的意义是什么？

有特殊的语义，让浏览器或者开发者更好的知道这段代码是什么意思

二、html5--2.9新的布局元素(6)-figure/figcaption

学习要点

  1. 了解figure/figcaption元素的语义和用法
  2. 通过实例理解figure/figcaption元素的用法
    1. figure元素
      • figure/figcaption都是HTML5中新增的元素
      • figure元素是一个媒体组合元素，也就是对其他的媒体元素进行组合，比如：图像、图表等等
    1. figcaption元素
      • 用来给figure元素定义标题。

实例

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 </head>

     <h2>我是一个厨艺爱好者</h2>

     <p>我是一个厨艺爱好者............</p>

     <figure>

         <img src="p1.jpg" alt="" width="100">

         <img src="p2.jpg" alt="" width="100">

     </figure>

     <figcaption>我的厨艺作品1</figcaption>

         <figure>

         <img src="p3.jpg" alt="" width="100">

         <img src="p4.jpg" alt="" width="100">

     </figure>

     <figcaption>我的厨艺作品2</figcaption>

 <body>

 </body>

 </html>
 

html5的figure/figcaption讲解及实例的更多相关文章

  1. html5标签figure、figcaption

    figure.figcaption,这俩个标签都是定义图文的 常常用到一种图片列表,图片+标题或者图片+标题+简单描述.以前的常规写法: <li> <img src="te ...

  2. HTML<figure> <figcaption> 标签定义图文并茂

    本来想分两篇文章来解释说明figure.figcaption的,但是这俩个标签都是定义图文的,所以我们合起来讲解,大家更能容易接受. 大家在写xhtml.html中常常用到一种图片列表,图片+标题 或 ...

  3. html5--2.9新的布局元素(6)-figure/figcaption

    html5--2.9新的布局元素(6)-figure/figcaption 学习要点 了解figure/figcaption元素的语义和用法 通过实例理解figure/figcaption元素的用法 ...

  4. 创建图 figure & figcaption

    如报纸.杂志.报告等其他媒介上看到过图.通常,图是由页面上的文本引述出. 在HTML5出现之前,没有专门实现这个目的的元素,因此一些开发人员想出了他们自己的解决办法(通常会使用不那么理想的.没有语义的 ...

  5. ehcache讲解及实例

    ehcache讲解及实例https://www.cnblogs.com/coprince/p/5984816.html 有些情形下注解式缓存是不起作用的:同一个bean内部方法调用,子类调用父类中有缓 ...

  6. HTML5 本地文件操作之FileSystemAPI实例（四）

    目录操作Demo二 1.删除目录 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSyst ...

  7. HTML5 本地文件操作之FileSystemAPI实例（三）

    文件夹操作demo 1.读取根目录文件夹内容 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFi ...

  8. HTML5 本地文件操作之FileSystemAPI实例（二）

    文件操作实例整理二 1.删除文件.复制文件.移动文件 //获取请求权限 window.requestFileSystem = window.requestFileSystem || window.we ...

  9. HTML5开发的翻页效果实例

    简介2010年F-i.com和Google Chrome团队合力致力于主题为<20 Things I Learned about Browsers and the Web>(www.20t ...

随机推荐

  1. 笔谈runloop（一）

    关于runloop熟悉而又陌生,熟悉的是在iOS开发的过程中线程的执行就跟runloop扯上关系了,陌生的是runloop到底是个什么东西.去公司面试的时候,很多公司的面试人员会问这个问题.runlo ...

  2. Linux的环境配置文件----.bashrc文件（转）

    Linux的环境配置文件----.bashrc文件   .bashrc文件主要保存个人的一些个性化设置,如命令别名.路径等.也即在同一个服务器上,只对某个用户的个性化设置相关.它是一个隐藏文件,需要使 ...

  3. 程序员常用的3大Web安全漏洞防御解决方案：XSS、CSRF及SQL注入（图文详解）

    https://blog.csdn.net/ChenRui_yz/article/details/86489067 随着互联网的普及,网络安全变得越来越重要,程序员需要掌握最基本的web安全防范,下面 ...

  4. Webpack快速入门

    什么是Webpack 顾名思义它是一个前端打包工具,通过给定的入口文件自动梳理所有依赖资源(包括css.图片.js等),并按照配置的规则进行一系列处理(转es5.压缩等),打包生成适合现代生产环境要求 ...

  5. 题解 洛谷P4872 【OIer们的东方梦】

    一道码量比较大的广搜题,但让我这个辣鸡小学生自闭了一天呜呜呜. 一开始看数据\(n,m \leq 1000\)也并不是特别大,于是用就开始用广搜乱水了. 由于这道题每走一步的代价不是\(1\),所以并 ...

  6. 《奋斗吧！菜鸟》第九次团队作业：Beta冲刺

    项目 内容 这个作业属于哪个课程 任课教师链接 作业要求 https://www.cnblogs.com/nwnu-daizh/p/11056511.html 团队名称 奋斗吧!菜鸟 作业学习目标 B ...

  7. drf框架 - 序列化组件 | ModelSerializer (查,增,删,改)

    ModelSerializer 序列化准备: 配置 settings.py # 注册rest_framework框架 INSTALLED_APPS = [ ... 'rest_framework' ] ...

  8. 快速IO

    namespace IO { #define gc() (iS==iT?(iT=(iS=ibuff)+fread(ibuff,1,SIZ,stdin),(iS==iT?EOF:iS++)):iS++) ...

  9. PostgreSQL 锁机制浅析

    锁机制在 PostgreSQL 里非常重要 (对于其他现代的 RDBMS 也是如此).对于数据库应用程序开发者(特别是那些涉及到高并发代码的程序员),需要对锁非常熟悉.对于某些问题,锁需要被重点关注与 ...

  10. Jmeter批量调用web service，发送message到tibco JMS queue

    [转载]Jmeter使用CSV Data Set Config参数化数据不重复的多次循环执行https://blog.csdn.net/qq_35123018/article/details/7877 ...