HTML5 figure元素

figure元素

在HTML中，通过 figure元素来定义一块独立的内容，如图像、图表、照片、图形、插图、代码片段等。并且，figure元素的内容应该与主内容相关，而且独立于上下文，如果删除，也不应对文档流产生影响。

在 figure元素中，通过 figcaption元素来定义内容的标题（caption）。figcaption元素并不是必需的，但如果包含它，它就必须是 figure元素的第一个子元素或最后一个子元素。并且，一个 figure元素可以包含多个内容块，但无论 figure元素里面有多少个内容块，最多只允许有一个 figcaption元素。如：

<figure>
<figcaption>Browser market share, April, 2011</figcaption>
<img src="broswer.png">
</figure>

运行结果如图 2‑11 所示：

图2-11 figure元素

除图片外，figure元素中还可以放置代码块、视频、音频片段、引用、表格、代码、广告，或任何与这些相关的组合。如，以下代码使用 figure元素来标记核心接口API列表：

<figure>
<figcaption>List4 The primary core interface API declaration.</figcaption>
<pre>
<code>
interface PrimaryCore {
boolean verifyDataLine();
void sendData(in sequence<byte> data);
void initSelfDestruct();
}
</code>
</pre>
</figure>
版权声明：本文出自 歪脖网 的《HTML5宝典》，欢迎在线阅读，并提出宝贵意见。

HTML5 figure元素相关推荐

EduCoder-Web程序设计基础-html5—结构元素-第3关：figure元素和figcaption元素的应用
目录任务描述相关知识测试说明代码示例任务描述本关任务:设计一个文章区中含图且能被搜索引擎识别的HTML程序.界面效果如下图所示: 页面元素2 相关知识为了完成本关任务,你需要掌握:1.f ...
HTML5页面元素figure与figcaption标记的应用
样式代码 <!doctype html> <html lang="en"><head><meta charset="UTF-8 ...
简单的字幕效果html,7种HTML5 Figure图片字幕标题特效
这是一款效果非常酷的HTML5 Figure图片字幕标题特效jQuery插件.该插件可以将任何图片元素转换为带标题的HTML figure元素.它内置了7种不同的图片标题效果.当标题文字高于图片时,还 ...
html5语义元素表,HTML5的结构和语义(3):语义性的块级元素
HTML5的结构和语义(3):语义性的块级元素互联网发布时间:2008-10-17 18:55:35 作者:佚名我要评论 HTML5还增加了一些纯语义性的块级元素: aside fi ...
下列不属于html5语义元素,HTML5 新的语义元素
HTML5 提供了新的语义元素来明确一个Web页面的不同部分: HTML5中新的语义元素 HTML5 元素标签定义文档中的节(section.区段).比如章节.页眉.页脚或文档中的其他部分. 根据W ...
HTML5废除元素,HTML5 与 HTML4 的区别(2) - 新增的元素和废除的元素
新增的结构元素在 HTML5 中,新增了以下与结构相关的元素: section元素 section 元素表示页面中的一个内容区块,比如章节.页眉.页脚或页面中的其他部分. 它可以与h1.h2.h3. ...
html 5新增技术,HTML5新增元素，标签总结
总是遇到h5新标签的笔试题目,就查阅了资料来总结一下: 1.form相关: (1)form属性:在HTML5中表单元素可放在表单之外,通过给该元素添加form属性来指向目标表单(form属性值设为目标 ...
html5 figure和figcaption
figure标签和figcaption标签是html5新增的语义化标签. figure标签,html5语义化标签. 用于规定独立的流内容(图像.图表.照片.代码等等). figcaption标签,ht ...
figure元素和figcaption元素
在HTML5中,figure元素用于定义独立的流内容(图像.图表.照片.代码等):figcaption元素用于为figure元素组添加标题. 效果图: 代码如下: <!DOCTYPE html& ...

HTML5 figure元素

figure元素

HTML5 figure元素相关推荐

最新文章

热门文章