零基础建站培训介绍

当前位置:

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

上一课: 下一课:

发表评论

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

相关教程

  • CSS3 text-shadow 属性是CSS3中设置文字阴影的属性,通过这个属性可以设置文字的各个角度的阴影效果。下面介绍一下CSS3 text-shadow 属性的使用方法。
  • header元素nav元素article元素section元素aside元素<footer> 标签time元素<audio> 标签<canvas> 标签<command> 标签<data
  • CSS中可以给一个DIV设置背景图片,甚至可以设置背景的样式和位置。(相关教程:CSS3视频教程)控制背景图片位置:background-position:水平方向,竖直
  • html锚点定位四种方法 (15741 次学习)
    第一种方法,也是最简单的方法是锚点用<a>标签,在href属性中写入DIV的id。如下:<!DOCTYPE html><html><head><style
  • 网页设计培训内容包括:PhotoshopCS6课程内容关键学习培训流行图象处理手机软件Photoshop的图象处理、编写、安全通道、涂层、相对路径综合性应用;图
  • 在学做网站论坛的电影网站制作教程中,使用苹果CMS,海洋CMS,马克CMS等,有的程序没有开发程序对接,或者有开发对接的,站长不会对接。今天给大家一
  • 相同点:后缀有html,htm,shtml本质上都属于静态网页一种。(相关教程:HTML入门教程)区别:.html与.htm均是静态网页后缀名,网页文件没有区别与
  • html 标签基本语法 (115693 次学习)
    html 标签基本语法有以下几个特点:刚刚接触超文本,遇到的最大的障碍就是一些用“<”和“>”括起来的句子,我们称它为标签,是用来分割和标记文本
  • 当我们在网页上上传一个文件,提交一个表单,观看一段视频等的时候,作为良好的用户体验,我们都需要使用一个进度条来提示用户当前应用的进度。HTML5
  • 在自己做网站时,经常会用到Html有序列表、无序列表与定义列表,下面列举了三种列表的写法。(相关教程:HTML入门教程)有序列表<ol type=&quo