HTML5 figure标签是什么意思？HTML5 figure标签的使用方法详解

HTML5figure> 标签的定义和用法：

figure> 标签用于对元素进行组合。

figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。

figure> 元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。

HTML5figure> 标签的实例：

文档中的一个小节，描述 PRC：

figure>
      h1>
    PRC/h1>
      p>
    The PEople's Republic of China was born in 1949.../p>
    /figure>
    

提示：请使用 figcaption> 元素为元素组添加标题。

figure元素是一种元素的组合，可带有标题（可选）。figure标签用来表示网站制作页面上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生影响。figure所表示的内容可以是图片、统计图或代码示例。

注意：一个figure元素内最多只允许放置一个figcaption元素，其他元素可无限放置。

HTML5 figure标签的作用：

之前看到一个很有趣的轮子：Hover效果，没有使用 JavaScript 代码，全部都是 HTML + CSS便实现了，用审查者工具看了下源代码，发现 HTML 的基本构造如下面所示：

figure class="effect-julia">
      img src="img/21.jpg" alt="img21"/>
      figcaption>
        h2>
    Passionate span>
    Julia/span>
    /h2>
        div>
          p>
    Julia dances in the deep dark/p>
          p>
    She loves the smell of the ocean/p>
          p>
    And dives into the morning light/p>
        /div>
        a href="#">
    View more/a>
      /figcaption>
             /figure>
    

而我实现的源代码中HTML部分的代码，实例对比：

div class="hover-area area-Julia">
      img src="imgs/21.jpg" height="360" width="480">
      h3>
    PASSIONATEstrong>
    JULIA/strong>
    /h3>
      ul>
        li>
    Julia dances in the deep dark./li>
        li>
    She loves the smell of the ocean/li>
        li>
    And dives into the morning light/li>
      /ul>
    /div>
    

很显然的区别是原本代码中使用了HTML5的新标签figure> 实现了页面的基础搭建，下面就简单聊聊这个HTML5的新标签figure> 。

值得一提的是尤其提到独立于文档主流之外，是在官方文档上面提到的，还提到了这个标签包含的内容应该具有独立性，可移植的，不影响主流内容。然后前文提到的描述这里就是作为figure> 的可选子标签figcaption> 中的内容。

现在回到之前我准备重复造的那个轮子，发现如果把对于图片的描述内容全部都包裹在figcaption> 标签中，无论是语义上还是代码结构上都更加的清晰。

HTML 4.01 与 html 5 之间的差异

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

【相关推荐】

HTML5progress> 标签是什么意思？HTML5progress> 标签的基本用法详解

HTML5中的header标签是什么意思？HTML5中header标签具体使用方法你知道吗？

以上就是HTML5 figure标签是什么意思？HTML5 figure标签的使用方法详解的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！