HTML5中figure标签使用实例

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

figure用友一个子标签——figcaption标签。

注意： 一个figure元素内最多只允许放置一个figcaption元素，其他元素可无限放置。

案例1：
不带有标题的figure元素：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5每日一练之figure新标签的应用-不带有标题的figure元素</title>
</head>
<body>
<figure>
<img alt="WEBJX.COM" src=http://www.webjx.com/html-xhtml/"http://www.WEBJX.com/template/w3cfuns2011/images/logo/logo.png"/>
</figure>
</body>
</html>

案例2：
带有标题的figure元素：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5每日一练之figure新标签的应用-带有标题的figure元素</title>
</head>
<body>
<figure>
<img alt="webjx.com" src=http://www.webjx.com/html-xhtml/"http://www.webjx.com/template/w3cfuns2011/images/logo/logo.png"/>
<figcaption>WEBJX.COM</figcaption>
</figure>
</body>
</html>

案例3：
多个图片，同一个标题的figure元素：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5每日一练之figure新标签的应用-多个图片，同一个标题的figure元素</title>
</head>
<body>
<figure>
<img alt="WEBJX.COM" src=" http://www.webjx.com/images/logo.gif " />
<img alt="网奇" src=http://www.webjx.com/html-xhtml/"http://www.webjx.com/images/common/Logo.gif"/>
<img alt="网奇" src=http://www.webjx.com/html-xhtml/"http://www.webjx.com/images/bigLogo.jpg"/>
<figcaption>网站建设网--中国网站设计,网页制作第一站！</figcaption>
</figure>
</body>
</html>

HTML5中figure标签使用实例相关推荐

html5中figure怎么用,HTML5中figure和figcaption标签用法
HTML5中figure和figcaption标签一般都是配套使用的,先了解下两者的基本定义,然后结合实例来说明两者的用法. 标签规定独立的流内容(图像.图表.照片.代码等等). figure元素的内 ...
html5标签详解,HTML5中figcaption标签用法详解
HTML5中figure和figcaption标签一般都是配套使用的,先了解下两者的基本定义,然后结合实例来说明两者的用法. 标签规定独立的流内容(图像.图表.照片.代码等等). figure元素的内 ...
php video标签使用方法,HTML_HTML5 video标签（播放器）学习笔记（一）:使用入门，近有在学习html5中video标签（播 - phpStudy...
HTML5 video标签(播放器)学习笔记(一):使用入门近有在学习html5中video标签(播放器)的使用,这里做一些学习笔记,方便自己查阅和记录,本文是第一篇,将介绍的是使用该标签初始化该做 ...
php中的ol标签,html5中ol标签的用法详解
这篇文章主要介绍了详解HTML5中ol标签的用法,是HTML5入门学习中的基础知识,需要的朋友可以参考下定义和用法标签定义有序列表. HTML 4.01 与 HTML 5 之间的差异在 HTML ...
HTML5新增的video标签,HTML5中video标签的使用方法
HTML5中video标签的使用方法发布时间:2020-08-27 11:33:56 来源:亿速云阅读:100 作者:小新这篇文章将为大家详细讲解有关HTML5中video标签的使用方法,小编觉 ...
HTML中可以有多个meta吗,HTML5中meta标签有三个主要属性是什么
HTML5中meta标签有三个主要属性是什么发布时间:2020-10-22 13:46:11 来源:亿速云阅读:88 作者:小新小编给大家分享一下HTML5中meta标签有三个主要属性是什么,相 ...
解决html5中video标签无法播放mp4问题的办法
解决html5中video标签无法播放mp4问题的办法参考文章: (1)解决html5中video标签无法播放mp4问题的办法 (2)https://www.cnblogs.com/it-tsz/p ...
CSS中的长度单位和HTML5中多媒体标签的使用
CSS中的长度单位和HTML5中多媒体标签的使用第一部分.长度单位 1.基本长度单位 2.长度单位的换算第二部分.vw.vh.vmin.vmax 1.vw.vh.vmin.vmax的含义 2.vw ...
vue3-video-play视频组件的使用（一）——基本使用 HTML5中Video标签的属性、方法和事件汇总
vue3-video-play视频组件的使用(一)--基本使用 & HTML5中Video标签的属性.方法和事件汇总 npm地址:https://www.npmjs.com/package/v ...

HTML5中figure标签使用实例

HTML5中figure标签使用实例相关推荐

最新文章

热门文章