figure元素和figcaption元素

在HTML5中，figure元素用于定义独立的流内容（图像、图表、照片、代码等）；figcaption元素用于为figure元素组添加标题。

效果图：

代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>figure元素和figcaption元素</title>
</head>
<body>
<p>被称作 “第四代体育馆”的“鸟巢”国家体育场是2008年北京奥运会的标志性建筑，它位于北京北四环边，包含在奥林匹克国家森林公园之中。占地面积20.4万平方米，总建筑面积25.8万平方米，拥有9.1万个固定座位，内设餐厅、运动员休息室、更衣室等。2008年奥运会期间，承担开幕式、闭幕式、田径比赛、男子足球决赛等赛事活动。</p>
<figure><figcaption>北京鸟巢</figcaption><p>拍摄者：传智播客内容与资源组，拍摄时间：2015 年 12 月</p><img src="data:images/niaochao.jpg" alt="">
</figure>
</body>
</html>

重点：

一个figure元素内最多允许使用一个figcaption元素，该元素应该放在figure元素的第一个或者最后一个子元素的位置。

声明：“来自于网络，如果侵犯著作权，请联系删除”

figure元素和figcaption元素相关推荐

hgroup元素与figcaption元素的结合使用
为了更好地说明各群组的功能,hgroup元素常常与figcaption结合使用.下面通过一个案例进行演示. 效果图: 代码如下: <!DOCTYPE html> <html> ...
html之figure元素和figcaption元素为图片声明标题
figure和figcaption元素结合来为图片.视频.表格或者嵌入元素声明标题.以前使用如下方式为图片添加标题: <!DOCTYPE html PUBLIC "-//W3C//DT ...
EduCoder-Web程序设计基础-html5—结构元素-第3关：figure元素和figcaption元素的应用
目录任务描述相关知识测试说明代码示例任务描述本关任务:设计一个文章区中含图且能被搜索引擎识别的HTML程序.界面效果如下图所示: 页面元素2 相关知识为了完成本关任务,你需要掌握:1.f ...
html5中figure怎么用,figure 和 figcaption 元素的正确使用方式
figure和figcaption是两个经常在一起使用的语义化元素.如果你还没有在规范中了解过他们,没有机会在项目中使用过他们,或者说现在对他们还是一无所知,这里就给大家讲一些如何正确使用他们的小技巧 ...
文章目录图片元素 img元素显示图片的两种写法： alt 属性与a元素连用 map元素和figure元素 figcaption 联用
文章目录图片元素 img元素显示图片的两种写法: alt 属性与a元素连用 map元素和figure元素 figcaption 联用图片元素 img元素 image 缩写,空元素 src属性 ...
（一）html5中的新增元素和废除元素
//刘梦冰发表于2015-6-29 1.新增的结构元素 (1)section元素 section元素表示页面中的一个内容区块,比如章节.页眉.页脚或者页面中的其他部分,它可以与h1.h2.h3等元素结 ...
那些是html5新增元素类型,HTML5 元素分类
HTML5 元素分类发布时间:2020-03-02 02:39:31 来源:51CTO 阅读:547 作者:双士之心 HTML5元素分类:结构性元素.级块性元素.行内语义性元素.交互性元素. 目的: ...
【前端学习之HTMLCSS】-- HTML第七篇 -- 图片元素与多媒体元素
[前端学习之HTML&CSS]-- HTML第七篇 – 图片元素与多媒体元素文章目录 [前端学习之HTML&CSS]-- HTML第七篇 -- 图片元素与多媒体元素前言图片元素 ...
html内联元素属性,【前端】HTML__内联元素与块元素
在HTML4.0时代,HTML的元素类型分内联元素(inline element)和块元素(block-level element). 第一.内联元素内联元素是是一种基于语义级的基本元素,一般只能容 ...

figure元素和figcaption元素

在HTML5中，figure元素用于定义独立的流内容（图像、图表、照片、代码等）；figcaption元素用于为figure元素组添加标题。

效果图：

代码如下：

重点：

figure元素和figcaption元素相关推荐

最新文章

热门文章