• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • <figure>

    版本:HTML5

    HTML<figure>元素代表一段独立的内容,经常与说明<figcaption>配合使用,并且作为一个独立的引用单元。当它属于主内容流时,它的位置独立于主体。这个标签经常是在主文中引用的图片,插图,表格,代码段等等,当这部分转移到附录中或者其他页面时不会影响到主体。

    浏览器支持

    IE 9、Firefox、Opera、Chrome 和 Safari 支持<figure>标签。
    注释:IE 8 或更早版本的 IE 浏览器不支持<figure>标签。

    示例

    使用<figure>元素标记文档中的一个图像:

    <figure>
    	<img src="img_pulpit.jpg" alt="the pulpit rock" width="304" height="228">
    </figure>
    

    标签定义及使用说明

    • <figure>标签规定独立的流内容(图像、图表、照片、代码等等)。
    • <figure>元素的内容应该与主内容相关,同时元素的位置相对于主内容是独立的。可以移动到文档的另一部分或附录而不影响主流程。如果被删除,则不应对文档流产生影响。
    • <figure>标签用于对元素进行组合。通过在<figure>中插入<figcaption>标题(作为第一个或最后一个子元素),可以将标题与<figure>元素相关联。
    内容分类流式内容元素,章节内容元素,可触摸内容元素
    允许的内容A<figcaption>element, followed byflow content; or flow content followed by a<figcaption>element; or flow content.
    标签省略不允许,开始标签和结束标签都不能省略。
    允许的父元素所有接受流式内容元素的元素
    允许的 ARIA rolesgroup,presentation
    DOM 实例HTMLElement

    HTML 4.01 与 HTML5之间的差异

    <figure>标签是 HTML 5 中的新标签。

    属性

    此元素只包含全局属性。

    全局属性

    <figure>标签支持HTML 的全局属性。

    事件属性

    <figure>标签支持HTML 的事件属性。

    例子

    图像

    <!-- just an image -->
    <figure>
      <img
      src="https://www.lanmper.cn/upload/browser/compatible_chrome.gif"
      alt="a robotic monster over the letters mdn.">
    </figure>
    
    <!-- image with a caption -->
    <figure>
      <img
      src="https://www.lanmper.cn/upload/browser/compatible_chrome.gif"
      alt="a robotic monster over the letters mdn.">	
      <figcaption>mdn logo</figcaption>
    </figure>
    

    代码段

    <figure>
      <figcaption>get browser details using <code>navigator</code>.</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>

    引用内容

    <figure>
      <figcaption><cite>edsger dijkstra:</cite></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 dishevell'd 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>
    

    上篇:<figcaption>

    下篇:<pre>