figure元素

最新推荐文章于 2022-07-19 19:47:59 发布

xxiaowen

最新推荐文章于 2022-07-19 19:47:59 发布

阅读量1.2k

点赞数 2

分类专栏： HTML5

本文链接：https://blog.csdn.net/wenzhilanyu2012/article/details/51217264

版权

HTML5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

注意：使用figure元素时，需要用figcaption元素为figure元素组添加标题。不敢，figure元素内最多只允许放置一个figcaption元素，其他元素可武宣放置。

具体代码如下：

1、不带标题的figure元素的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
        	作者：wenzhilanyu@126.com
        	时间：2016-04-22
        	描述：figure元素
        -->
	</body>
	<figure>
		<img alt="img/bd_logo1.png" />
	</figure>
</html>

效果图

2、带有标题的figure元素的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
        	作者：wenzhilanyu@126.com
        	时间：2016-04-22
        	描述：figure元素
        -->
	</body>
	<!--
	<figure>
		<img alt="img/bd_logo1.png" />
	</figure>
	-->
	<figure>
		<img alt="img/bd_logo1.png" />
	</figure>
	<figcaption>标题提示</figcaption>
</html>

效果图

3、多张图片用同一标题的figure元素的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
        	作者：wenzhilanyu@126.com
        	时间：2016-04-22
        	描述：figure元素
        -->
	</body>
	<!--
	<figure>
		<img alt="img/bd_logo1.png" />
	</figure>
	-->
	<!--
	<figure>
		<img alt="img/bd_logo1.png" />
	</figure>
	<figcaption>标题提示</figcaption>
	-->
	<figure>
		<img alt="img/bd_logo1.png" />
		<img alt="img/bd_logo2.png" />
		<img alt="img/bd_logo3.png" />
	</figure>
	<figcaption>标题提示</figcaption>
</html>

效果图

xxiaowen

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
figure元素

figure元素是一种元素的组合，可带有标题（可选）。figure元素用来表示网页上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生影响。figure元素所表示的内容可以是图片、统计图或代码示例。注意：使用figure元素时，需要用figcaption元素为figure元素组添加标题。不敢，figure元素内最多只允许放置一个figcaption元素，其他元素可武宣放置。具体代
复制链接

扫一扫