本来想分两篇文章来解释说明figure、figcaption的,但是这俩个标签都是定义图文的,所以我们合起来讲解,大家更能容易接受。

大家在写xhtml、html中常常用到一种图片列表,图片+标题 或者 图片+标题+简单描述。以前的常规写法:

<li>
<img src="" />

<p>title</P>
</li>

而在html5中有了新标签更能语义化的定义出这中图片列表,那就是figure标签。

w3c赋予的定义:figure标签规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

实例代码:

<figure>
<p>黄浦江上的的卢浦大桥</p>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

亲自试一试

figure用来代替原来li标签,P标签谁来取代呢?答案就是:figcaption

w3c赋予的定义:figcaption 标签定义 figure 元素的标题(caption)。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

那么上面的代码就变成了:

<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

亲自试一试

---------------------------------------------------------------------------

这是个非常易于理解的标签,其用法也非常清楚。即便是简单,这里也建议大家亲自动手写下。

HTML<figure> <figcaption> 标签定义图文并茂的更多相关文章

  1. HTML中的figure与figcaption标签

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

  2. html5的figure/figcaption讲解及实例

    html5的figure/figcaption讲解及实例 一.总结 一句话总结: figure元素:用来包着媒体资源,比如图片图表:是一个[媒体组合元素],也就是对其他的媒体元素进行组合,比如:图像. ...

  3. HTML5每日一练之figure新标签的应用

    igure元素是一种元素的组合,可带有标题(可选).figure标签用来表示网页上一块独立的内容,将其从网页上移除后不会对网页上的其他内容产生影响.figure所表示的内容可以是图片.统计图或代码示例 ...

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

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

  5. Android GradientDrawable(shape标签定义) 静态使用和动态使用(圆角,渐变实现)

    Android GradientDrawable使用优势: 1. 快速实现一些基本图形(线,矩形,圆,椭圆,圆环) 2. 快速实现一些圆角,渐变,阴影等效果 3. 代替图片设置为View的背景 4. ...

  6. HTML常用标签定义,用法及例子

    1.HTML注释 <!--...--> 定义:使用注释可对代码进行解释,不会显示在浏览器中. <!--这是一段呢注释.注释不会在浏览器中显示.--> <p>段落标签 ...

  7. 前端 HTML 常用标签 head标签相关内容 style标签 定义内部样式表

    styple标签 <!-- 定义内部样式表 --> <style type="text/css"></style>

  8. 使用一个CSS Class去给标签定义Style

    使用一个CSS Class去给标签定义Style 类是可重用的样式,可以添加到HTML元素. 下面是一个CSS类声明的例子: <style>   .blue-text {     colo ...

  9. 创建图 figure & figcaption

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

随机推荐

  1. 第4节 Scala中的actor介绍:1、actor概念介绍;2、actor执行顺序和发送消息的方式

    10.    Scala Actor并发编程 10.1.   课程目标 10.1.1.    目标一:熟悉Scala Actor并发编程 10.1.2.    目标二:为学习Akka做准备 注:Sca ...

  2. 搭建PXE实现自动化安装系统

    一.PXE工作原理 Ø  Client向PXE Server上的DHCP发送IP地址请求消息,DHCP检测Client是否合法(主要是检测Client的网卡MAC地址),如果合法则返回Client的I ...

  3. Markdown 语法使用

    Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式.Markdown的语法简洁明了.学习容易,而且功能比纯文本更强,被广泛的应用在博客写 ...

  4. npm和npx

    npx 指令会先在项目的node_modules里面找资源包 npm info 包名称  [查看资源包的信息]

  5. 「NOI2005」维护数列

    「NOI2005」维护数列 传送门 维护过程有点像线段树. 但我们知道线段树的节点并不是实际节点,而平衡树的节点是实际节点. 所以在向上合并信息时要加入根节点信息. 然后节点再删除后编号要回退(栈), ...

  6. Python 基础之循环结构 while

    一.while循环介绍 while 循环 可以提高代码的效率,减少代码的冗余 while 条件表达式:    code1    code2如果条件表达式成立,返回Ture,就执行其中的代码块 1.基本 ...

  7. Ubuntu安装TTF字体

    sudo mkdir /usr/share/fonts/ttf sudo cp ~/ttf/* /usr/share/fonts/ttf cd /usr/share/fonts/ttf sudo ch ...

  8. elasticsearch mapping简单介绍

    这两天一直在看elasticsearch相关的内容,看到mapping这一块,就折腾了下. 一般情况下,我们不需要对elasticsearch的mapping进行设置,但如果希望对索引使用自定义的管理 ...

  9. centos安装出现dracut-initqueue timeout错误

    dracut:/# cd /dev dracut:/# ls 这样子你就会看到所有的设备信息. 找到sda4,  不一定是sda4,有可能是其他的,实在不确定就拔了优盘看一下哪个消失了 dracut: ...

  10. user模块User表

    user模块User表 创建user模块 前提:在 luffy 虚拟环境下 1.终端从项目根目录进入apps目录 >: cd luffyapi & cd apps 2.创建app > ...