视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
HTML5中figcaption标签用法详解
2020-11-27 15:30:59 责编:小采
文档


HTML5中figure和figcaption标签一般都是配套使用的,先了解下两者的基本定义,然后结合实例来说明两者的用法。

<figure>

<figure>标签规定的流内容(图像、图表、照片、代码等等)。

figure元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。它是一种元素的组合,可带有标题(可选)。figure标签用来表示网页上一块的内容,将其从网页上移除后不会对网页上的其他内容产生影响。

figure有一个子标签:figcaption。

<figcaption>

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

OK,关于figure和figcaption标签就介绍完了,接下用几个实例来应用它们。如下:

案例1:

不带有标题的figure元素:

<figure> <img alt="PHP中文网" src="logo.png"/></figure>

案例2:

带有标题的figure元素:

<figure> <img alt="Web前端之家" src="logo.png"/> <figcaption>Web前端之家,专注Web前端,HTML5、CSS3、JavaScript、JQuery、移动开发、页面性能优化等开发前端技术的交流平台</figcaption></figure>

案例3:

多个图片,同一个标题的figure元素:

<figure> <img alt="Web前端之家1" src="logo1.png"/> <img alt="Web前端之家2" src="logo2.png"/> <img alt="Web前端之家3" src="logo3.png"/> <figcaption>Web前端之家,专注Web前端,HTML5、CSS3、JavaScript、JQuery、移动开发、页面性能优化等开发前端技术的交流平台</figcaption></figure>

下载本文
显示全文
专题