返回

figure

<figure>:HTMLElement

<figure>元素代表一些流内容，可选的包含一个标题，这些是独立的（self-contained）（如一个完整的句子）,典型地从document的main flow中引入作为单元格

在本文中，“自包含”不一定意味着独立。 例如，段落中的每个句子都是独立的； 作为句子一部分的图像不适合用于图形，但由图像构成的整个句子将很合适。

在本文中,self-contained并不一定意味着独立，例如，段落中的每个句子都是独立的； 作为句子一部分的图像不适合用于<figure>，但由images构成的整个句子将很合适。

因此，该元素可用于注释插图，图标，照片，代码清单等

当一个figure时通过标题（例如，图号）标识图形来从文档的主要内容中引用时，它使此类内容可以轻松地从该主要内容移开，例如移至页面的一侧， 专用页面或附录，而不会影响文档的流程。

如果<figure>元素通过其相对位置（例如“在上一张照片中”或“如下图所示”）引用，则移动图形会破坏页面的含义。 鼓励作者考虑使用标签来引用图形，而不是使用此类相对引用，以便可以轻松地重新设置页面样式，而不会影响页面的含义。

例子

本示例显示了用于标记代码清单的figure元素。

<p>In <a href="#l4">listing 4</a> we see the primary core interface
API declaration.</p>
<figure id="l4">
 <figcaption>Listing 4. 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>
<p>The API is designed to use UTF-8.</p>

在这里，我们看到一个图形元素来标记照片，该照片是页面的主要内容（例如在画廊中）。

<!DOCTYPE HTML>
<html lang="en">
<title>Bubbles at work — My Gallery™</title>
<figure>
 <img src="bubbles-work.jpeg"
      alt="Bubbles, sitting in his office chair, works on his
           latest project intently.">
 <figcaption>Bubbles at work</figcaption>
</figure>
<nav><a href="19414.html">Prev</a> — <a href="19416.html">Next</a></nav>

在此示例中，我们看到的不是图像，而是图像和视频。 第一张图片从字面上看是示例第二句话的一部分，因此它不是一个独立的单元，因此，figure是不合适的。

<h2>Malinko's comics</h2>

<p>This case centered on some sort of "intellectual property"
infringement related to a comic (see Exhibit A). The suit started
after a trailer ending with these words:

<blockquote>
 <img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">
</blockquote>

<p>...was aired. A lawyer, armed with a Bigger Notebook, launched a
preemptive strike using snowballs. A complete copy of the trailer is
included with Exhibit B.

<figure>
 <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
 <figcaption>Exhibit A. The alleged <cite>rough copy</cite> comic.</figcaption>
</figure>

<figure>
 <video src="ex-b.mov"></video>
 <figcaption>Exhibit B. The <cite>Rough Copy</cite> trailer.</figcaption>
</figure>

<p>The case was resolved out of court.

在这里，一首诗的一部分用figure标出

<figure>
 <p>'Twas brillig, and the slithy toves<br>
 Did gyre and gimble in the wabe;<br>
 All mimsy were the borogoves,<br>
 And the mome raths outgrabe.</p>
 <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption>
</figure>

在此示例中，这可能是讨论城堡的更大工作的一部分，嵌套的figure元素用于为组中的每个图提供组标题和单个标题：

<figure>
 <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
 <figure>
  <figcaption>Etching. Anonymous, ca. 1423.</figcaption>
  <img src="castle1423.jpeg" alt="The castle has one tower, and a tall wall around it.">
 </figure>
 <figure>
  <figcaption>Oil-based paint on canvas. Maria Towle, 1858.</figcaption>
  <img src="castle1858.jpeg" alt="The castle now has two towers and two walls.">
 </figure>
 <figure>
  <figcaption>Film photograph. Peter Jankle, 1999.</figcaption>
  <img src="castle1999.jpeg" alt="The castle lies in ruins, the original tower all that remains in one piece.">
 </figure>
</figure>

前面的示例也可以更简洁地编写如下（使用title属性代替嵌套的figure/figcation对）：

<figure>
 <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
      alt="The castle has one tower, and a tall wall around it.">
 <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
      alt="The castle now has two towers and two walls.">
 <img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
      alt="The castle lies in ruins, the original tower all that remains in one piece.">
 <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
</figure>

该图有时仅从内容中隐式引用：

<article>
 <h1>Fiscal negotiations stumble in Congress as deadline nears</h1>
 <figure>
  <img src="obama-reid.jpeg" alt="Obama and Reid sit together smiling in the Oval Office.">
  <figcaption>Barack Obama and Harry Reid. White House press photograph.</figcaption>
 </figure>
 <p>Negotiations in Congress to end the fiscal impasse sputtered on Tuesday, leaving both chambers
 grasping for a way to reopen the government and raise the country's borrowing authority with a
 Thursday deadline drawing near.</p>
 ...
</article>