Article introduction of Wulin.com (www.vevb.com): I originally wanted to explain figure and figcaption in two articles, but these two labels define pictures and texts, so we will explain them together, which is easier for everyone to accept.
I originally wanted to explain figure and figcaption in two articles, but these two labels define pictures and texts, so we will explain them together, which is easier for everyone to accept.When writing xhtml and html, people often use a picture list, picture + title or picture + title + simple description. Previous conventional writing:
<li>
<img src= /><p>title</P>
</li>
In html5, a new tag can more semantically define the image list, that is, the figure tag.
The definition given by w3c: the figure tag specifies independent streaming content (images, charts, photos, codes, etc.). The content of the figure element should be related to the main content, but if deleted, it should not affect the document flow.
Example code:
<figure>
<p>Lupu Bridge on the Huangpu River</p>
<img src=shanghai_lupu_bridge.jpg width=350 height=234 />
</figure>
Figure is used to replace the original Li tag, and who will replace the P tag? The answer is: figcaption
Definition assigned by w3c: figcaption tag defines the title (caption) of the figure element. The figcaption element should be placed at the position of the first or last child element of the figure element.
Then the above code becomes:
<figure>
<figcaption>Lupu Bridge on the Huangpu River</figcaption>
<img src=shanghai_lupu_bridge.jpg width=350 height=234 />
</figure>
This is a very easy-to-understand label and its usage is very clear. Even if it is simple, I suggest you write it down by yourself.