html5新元素<figure>
HTML <figure>
元素是一个自我独立的内容元素,通常会包含一个标题说明(<figcaption>
),
,内容通常会是一个图片,图表,代码片段或跟主内容相关的图解,它可以放到主内容布局里,也可以放到另外一个页面,或主内容框架之外的附录里。
用法说明:
- <figure> 元素的内容目录(如果有),不要和主内容目录混合到一起。
- 在
<figure>
元素的顶部或尾部插入<figcaption>
元素来表示标题说明。
使用例子
例 1
<!-- 表示图片 --> <figure> <img src="https://www.webhek.com/media/img/mdn-logo-sm.png" alt="An awesome picture"> </figure> <p></p> <!-- 有标题的图片 --> <figure> <img src="https://www.webhek.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>
阅读余下内容