HTML宝典(第 1 版)
2.2.5 figure元素
阅读(

HTML基础

HTML元素

结构语义元素

内容分组元素

pre元素

hr元素

p元素

div元素

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 所示:

figure元素
图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&lt;byte> data);
        void initSelfDestruct();
    }
    </code>
    </pre>
</figure>

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验