HTML5 <figure>

HTML <figure> 元素是一个自我独立的内容元素，通常会包含一个标题说明(<figcaption>),，内容通常会是一个图片，图表，代码片段或跟主内容相关的图解，它可以放到主内容布局里，也可以放到另外一个页面，或主内容框架之外的附录里。

用法说明：

• <figure> 元素的内容目录(如果有)，不要和主内容目录混合到一起。
•  在<figure> 元素的顶部或尾部插入<figcaption>元素来表示标题说明。

使用例子

例 1

<!-- 表示图片 -->
<figure>
  <img src="https://know.webhek.com/html5/media/img/mdn-logo-sm.png" alt="An awesome picture">
</figure>
<p></p>
<!-- 有标题的图片 -->
<figure>
  <img src="https://know.webhek.com/html5/media/img/mdn-logo-sm.png" alt="An awesome picture"> 
  <figcaption>Fig1. MDN Logo</figcaption>
</figure>
<p></p>

例 2

<figure>
  <figcaption>Get browser details using navigator</figcaption>
  <pre>
function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName;
  txt+= "Browser Name: " + navigator.appName;
  txt+= "Browser Version: " + navigator.appVersion ;
  txt+= "Cookies Enabled: " + navigator.cookieEnabled;
  txt+= "Platform: " + navigator.platform;
  txt+= "User-agent header: " + navigator.userAgent;
}            
  </pre>
</figure>

例 3

<figure>
  <figcaption><cite>Edsger Dijkstra :-</cite></figcaption>
  <p>"If debugging is the process of removing software bugs, <br /> then programming must be the process of putting them in"</p>
 </figure>