零基础建站培训介绍

当前位置:

HTML5教程之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>

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

17

上一课: 下一课:

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

相关教程

  • 制作手机版网站的时候,除了页面简洁、操作方便等访问者可以看到的地方以外,就是 Meta 标签的设置,合理设置 Meta 标签 对手机版网站的搜索引擎优化
  • HTML5新增标签及含义 (16497 次浏览)
    HTML5较以前的HTML版本,增加了很多的标签:属性值描述autoplayautoplay如果出现该属性,则视频在就绪后马上播放。contr
  • header元素nav元素article元素section元素aside元素<footer> 标签time元素<audio> 标签<canvas> 标签<command> 标签<data
  • Z-Blog 网站搬家教程 图文教程 (16331 次浏览)
    Z-Blog For PHP (以下简称zblog)的迁移相对还是比较简单的,需要修改的也就两个地方,一个是zblog本地的配置文件,另一个则是数据库中的配置文件。
  • 帝国cms网站在本地做好了,或者网站想跟换服务器空间 ,网站该怎么完美的迁移?下面就分享下帝国CMS网站网站搬家迁移教程。 登录帝国后台:登陆后
  • 一、安装前准备工作运行环境: 确认您的空间(虚拟主机)支持“PHP和MySQL数据库”或服务器已经成功安装“PHP和MySQL数据库”。版本要求: PHP4.*以
  • 大家在写xhtml、html中常常用到一种图片列表,图片+标题或者图片+标题+简单描述。以前的常规写法:[cce_html]<li><img src="" />&l
  • html元素标签属性大全 (116260 次浏览)
    什么是HTML属性每个HTML元素都可以给它添加一些属性,让它成为我们做网站时需要的样子。例如一段文字,我们可以给它添加属性,使这段文字变成红色,
  • 问题:在HTML中元素分为块状元素和行内元素,块状元素的外边距和内边距我们分别使用margin\padding属性来设置,那么行内元素可以设置margin\paddi
  • Part I 这种选择器的共同特征:指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用CSS3中共有11种UI元素状态伪类选择器: