炫意html5
最早CSS3和HTML5移动技术网站之一

html5新元素

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

用法说明:

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

使用例子

例 1

<!-- 表示图片 -->
<figure>
<img  data-original="https://www.xyhtml5.com/media/img/mdn-logo-sm.png" alt="An awesome picture">
</figure>
<p></p>
<!-- 有标题的图片 -->
<figure>
<img  data-original="https://www.xyhtml5.com/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>

炫意HTML5 » html5新元素

Java基础教程Android基础教程