H5新标签 figcaption 定义图文并茂的html5新标签-figure、figcaption
本来想分两篇文章来解释说明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>
这是个非常易于理解的标签，其用法也非常清楚。即便是简单，这里也建议大家亲自动手写下。
【代码示例】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>
</body>
</html>
【效果图】
【代码示例2】
<figure>标签用于帮助我们更具体地声明文档的内容。在引入这个元素之前，我们无法确定内容与信息的关系，只能确定内容的自包含关系，例如，插图、图像、视频等。通常，这些元素属于重要内容，但是可以删除而不影响或破坏文档流。如果出现这些信息，就可以使用<figure>标签来标识这些信息（见代码清单1-18）。
代码清单1-18：使用<figure>和<figcaption>元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="This is an HTML5 example">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>This text is the title of the document</title>
<link rel="stylesheet" href="mystyles.css">
</head>
<body>
<header>
<h1>This is the main title of the website</h1>
</header>
<nav>
<ul>
<li>home</li>
<li>photos</li>
<li>videos</li>
<li>contact</li>
</ul>
</nav>
<section>
<article>
<header>
<hgroup>
<h1>Title of post One</h1>
<h2>subtitle of the post One</h2>
</hgroup>
<p>posted 12-10-2011</p>
</header>
This is the text of my first post
<figure>
<img src=http://www.2cto.com/uploadfile/2012/1122/20121122013416961.jpg?
<figcaption>
This is the image of the first post
</figcaption>
</figure>
<footer>
<p>comments (0)</p>
</footer>
</article>
<article>
<header>
<hgroup>
<h1>Title of post Two</h1>
<h2>subtitle of the post Two</h2>
</hgroup>
<p>posted 12-15-2011</p>
</header>
This is the text of my second post
<footer>
<p>comments (0)</p>
</footer>
</article>
</section>
<aside>
<blockquote>Article number one</blockquote>
<blockquote>Article number two</blockquote>
</aside>
<footer>
Copyright © 2010-2011
</footer>
</body>
</html>
在代码清单1-18中，在第一篇文章的正文之后插入了一幅图像（<img src=http://www.2cto.com/uploadfile/2012/1122/20121122013416569.jpg">）。这是一种常用做法，经常可以使用图像或视频来丰富文字。<figure>标签可以实现这些可视化补充，以区分它们与其他重要信息的关系。
此外，在代码清单1-18中，在<figure>元素中还有一个元素。通常，图像或视频等信息单元位于简短文字之下。HTML5有一个元素可以显示和标识这种描述性标题。
<figcaption>标签用于显示与<figure>相关的标题，并且在元素及其内容之间建立关系。
H5新标签 figcaption 定义图文并茂的html5新标签-figure、figcaption相关推荐
- html5中新增标签的兼容性如何设置,HTML5新标签的兼容性处理
普通浏览器 普通不支持HTML5新标签的浏览器 -- 能正常解析,但会当初成 inline 元素对待 在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,所以我们只 ...
- html5 meter,html5 meter标签是什么意思？html5 meter标签的用法及属性介绍
html5 meter标签是什么意思?html5 meter标签的用法及属性介绍都在这里,本篇文章主要介绍了html5 meter标签的定义和具体的使用方法,还有html5 meter标签的属性介绍 ...
- html标签video资源占用,使用HTML5 video标签的一系列问题
原标题:使用HTML5 video标签的一系列问题 H5标签的video,我想写过前端代码的人,都不会陌生吧.但video标签还是有一些问题. 一.PC端的兼容问题: H5的标签不兼容ie8包括ie8 ...
- html5 section标签,html5 section标签是什么意思？html5 section标签的用法总结
本篇文章主要的介绍了关于HTML5 section标签的定义以及它的用法,最后还有一个案例总结,现在让我们开始阅读这篇文章吧 先来解释下html5 section标签的意思: html5 sectio ...
- html设置了标签但是定义不了,在HTML标签管理器中设置不带元素ID的HTML中的事件...
这取决于你想要采取的路线.但是,无论路线如何,您绝对需要标识表单和/或提交按钮的内容.它不需要是一个ID,但它是理想的,如果有一个唯一的包装类或ID. 您可以跟踪点击提交按钮,但是,您的号码不会完全准 ...
- h5禁用浏览器下载视频_【HTML5】video 标签禁用自带的下载按钮
h5自带的 video标签 ,会有个下载按钮,有时候想避免,就可以利用样式的方法 video::-internal-media-controls-download-button { display:n ...
- html5中创建多个nav,HTML5 对各个标签的定义与规定：nav
对nav标签的定义与规定 HTML5中的新元素标签用来将具有导航性质的链接划分在一起,使代码结构在语义化方面更加准确,同时对于屏幕阅读器等设备的支持也更好. 一直以来,我们习惯于使用形如 或 这样的代 ...
- label标签 html5,HTML5 label 标签
实例 HTML5 标签用于为 input 元素做出标记. 带有两个输入字段和相关标记的简单 HTML 表单: Male Female 尝试一下 » 浏览器支持 目前大多数浏览器支持 标签. 标签定义及 ...
- html5 中keygen用法,HTML5: keygen 标签
在线示例 带有 keygen 字段的表单: 示例html> 基础教程(nhooo.com) 用户名: 加密: 注意: Internet Explorer 不支持 keygen 标签. 测试看看 ...
最新文章
- ssh在dhcp自动获取地址的时候使用
- 利用MyBatis Generator自动创建代码
- android unity 关闭应用_使用Android Studio在安卓平台Profile Unity应用
- 优化更新语句中的标量子查询
- loadrunner录制时web时，安全证书问题
- tcp协议可以提供什么服务器,什么是TCP协议?
- 概率图模型--因子图
- Relocation POJ - 2923(01背包+状压dp)
- 排列组合—— 球盒问题
- 二、执行v8引擎示例代码
- 控制台忘记mysql登录密码_许久没登录的MYSQL忘记了密码，这样操作不用重装
- android 5.0小米1刷机包,小米1刷机包 V5稳定版V1.2 流畅纯净 精简省电 默认开启未知来源 Android4.1.2...
- 解读redis的配置文件--redis.conf
- 【latex】表格添加注脚；对表格的内容进行注释
- android sqlite 打包 xe,C++ Builder XE10快速开发关于sqlite数据库APP应用发布小结
- 向微信公众号文章添加通知文件
- Alexa网站排名爬取
- 深度学习文献汇总|第四十二期
- 果园机器人能干什么_24* 果园机器人ppt配用优秀获奖教案
- 2.ClickHouse系列之特点介绍