figure标签和figcaption标签是html5新增的语义化标签。

  • figure标签，html5语义化标签。

用于规定独立的流内容（图像、图表、照片、代码等等）。

  • figcaption标签，html5语义化标签。

与figure配套使用，用于标签定义figure元素的标题。

用figure和figcaption标签的好处

搜索引擎搜索到figure的时候会知道，这里存放的是图片、图表、照片、代码等媒体，不不会认为这里存放的是文章等其他东西。搜索引擎搜索的时候更快捷更便利。
另一方面程序员在看的时候，看到这个标签的时候，就会知道，这里存在的就是图片等媒体，便于阅读。

下面用图简单描述下这两个标签的使用方法

html5 figure和figcaption的更多相关文章

  1. html5标签figure、figcaption

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

  2. HTML中的figure与figcaption标签

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

  3. [翻译]小提示：使用figure和figcaption元素的正确方式

    figure和figcaption是一对经常被一起使用的语义化标签.如果你还没有看过规范中的定义,现在有机会在你的项目中使用它们了.如果你不知道怎么用,下面是关于如何正确使用它们的一些提示. figu ...

  4. HTML5<figure>元素

    HTML5<figure>元素是用来定义页面文档中独立的流内容(图像,图表,照片,代码块),figure内容与主内容有关,如果被删除,则不影响主文档流的产生. HTML5<figca ...

  5. h5中的分组元素figure、figcaption、hgroup元素介绍

    分组元素用于对页面中的内容进行分组. figure元素和figcaption元素 figure元素用于定义独立的流内容(图像.图表.照片.代码等),一般指一个独立的单元.figure元素的内容应该与主 ...

  6. HTML5 语义元素、迁移、样式指南和代码约定

    语义元素是拥有语义的元素. 什么是语义元素? 语义元素清楚地向浏览器和开发者描述其意义. 非语义元素的例子:<div> 和 <span> - 无法提供关于其内容的信息. 语义元 ...

  7. HTML5: HTML5 语义元素

    ylbtech-HTML5: HTML5 语义元素 1.返回顶部 1. HTML5 语义元素 语义= 意义 语义元素 = 有意义的元素 什么是语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发 ...

  8. Web开发——HTML基础（图像、音频和视频内容）

    参考: 参考:HTML中的图像 参考:视频和音频内容 目录: 1.HTML中的图像 1.1 我们如何在网页上放置图像? (1)替代文字(alt) (2)宽度和高度 (3)图片标题 1.2 用图形和图形 ...

  9. 2016.3.16__HTML5新特性__第八天

    HTML 5 + CSS 3 假设您认为这篇文章还不错,能够去H5专题介绍中查看很多其它相关文章. 今日代码非常冗杂,所以非常多内容直接摘自网上,假设造成您的不适.请留言告知. 非常感谢. 输入标签, ...

随机推荐

  1. winform项目中开发的一套UI控件库

    https://github.com/houyhea/winform-control-lib winform-control-lib 曾经在一个winform项目中开发的一套UI控件库 类图:  效果 ...

  2. css 实现渐变

    background:-ms-radial-gradient(circle,rgba(0, 0, 0, 0.2),rgba(0,0,0,0)); /* IE 10*/ background: -web ...

  3. 神器 工具 推荐 SRDebugger

    unity asset store 关联下载 ,添加这个书签  javascript:var url = window.location.href;var id = url.substr(url.la ...

  4. Win10.去掉任务栏缩略图（just4explorer）

    ZC: 该方式只适用于 Explorer(即 WIndows任务管理器),Why? ∵ 看文中设置 regedit 的路径,它设置的就是 Explorer下的键值 ... 1.HKEY_CURRENT ...

  5. linux系统系统调优之----内核优化

    主要是指在Linux系统中针对服务应用而进行的系统内核参数调整,优化没有的标准, 根据实际需求优化才是最合适的. 1)编辑内核配置文件 2)参数及简单说明 3)生效配置 1)编辑内核配置文件 vim ...

  6. ### Cause: org.apache.ibatis.builder.BuilderException: Error parsing SQL Mapper Configuration. Cause: org.apache.ibatis.builder.BuilderException: Error creating document instance. Cause: org.xml.sax.

    在做多表映射查询时,在同一个resultMap中写了1:1映射和1:n映射,结果测试时报错如下: org.apache.ibatis.exceptions.PersistenceException: ...

  7. Makefile project

    1 Makefile里出现IDF_PATH,所以要在工程属性里的environment环境变量添加IDF_PATH,对其解释,指出路径. 2  项目中用了shell文本,如果用Python 语言,要确 ...

  8. Visual Studio 2017打包安装项目

    在我们用VS编好上位机后,就可以在自己电脑运行上位机,但是想其他人电脑运行上位机可能就行不通了,因为其他人电脑不一定有所需要的运行环境.这时我们就需要打包安装,把运行软件所需要的环境都打包在安装包里. ...

  9. WOJ#2423 安全出行Safe Travel

    描述 精灵最近在农场上泛滥,它们经常会阻止牛们从农庄(牛棚_1)走到别的牛棚(牛_i的目的 地是牛棚_i).每一个精灵只认识牛_i并且知道牛_i一般走到牛棚_i的最短路经.所以它们在牛_i到牛棚_i之 ...

  10. yield-Python大牛必须掌握的高端语法

    小白:大牛哥,刚才看到有一个函数不使用return返回结果,而是使用yield关键字返回结果,看不太明白,Python中yield关键字的用途是什么,它有什么作用呀? 大牛: 要想理解yield的作用 ...