<figure>代表一段独立的内容,可能包含 <figcaption> 元素定义的说明元素。通常内容为图像、插图、图表、代码片段等,在文档的主内容流中引用,作为一个独立的引用单元。
定义图片的标题
<!DOCTYPE html> <html> <head> <title>figure元素标题案例-HTML教程www.xuandaima.com</title> <style> figure { border: thin #c0c0c0 solid; display: flex; flex-flow: column; padding: 5px; max-width: 220px; margin: auto; } img { max-width: 220px; max-height: 150px; } figcaption { background-color: #222; color: #fff; font: italic smaller sans-serif; padding: 3px; text-align: center; } </style> </head> <body> <figure> <img src="/Template/Foreground/img/shouye1.jpg" alt="教程"> <figcaption>炫代码教程网</figcaption> </figure> </body> </html>
<figure>内容</figure>
<figure> <figcaption>使用 <code>css</code> 代码。</figcaption> <pre> .figcaption { background-color: #222; color: #fff; font: italic smaller sans-serif; padding: 3px; text-align: center; } </pre> </figure>
<figure> <figcaption><b>Edsger Dijkstra:</b></figcaption> <blockquote> If debugging is the process of removing software bugs, then programming must be the process of putting them in. </blockquote> </figure>
<figure> <p style="white-space:pre"> Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the green, Or, like a nymph, with long dishevelled hair, Dance on the sands, and yet no footing seen: Love is a spirit all compact of fire, Not gross to sink, but light, and will aspire. </p> <figcaption><cite>Venus and Adonis</cite>, by William Shakespeare</figcaption> </figure>
<figure>标签支持HTML 全局属性
<figure>标签支持HTML 事件属性
如果想了解更多请移步html教程。