HTML5中figure标签指的是什么意思

小编给大家分享一下HTML5中figure标签指的是什么意思，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联公司是专业的海安网站建设公司，海安接单;提供成都网站建设、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行海安网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

HTML5<figure>标签的定义和用法：

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

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

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

HTML5<figure>标签的实例：

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

<figure>
  <h2>PRC</h2>
  <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>
    <h3>Passionate <span>Julia</span></h3>
    <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">
  <h4>PASSIONATE<strong>JULIA</strong></h4>
  <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 中的新标签。

以上是HTML5中figure标签指的是什么意思的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

分享名称：HTML5中figure标签指的是什么意思
本文路径：https://www.cdcxhl.com/article44/ijogee.html

成都网站建设公司_创新互联，为您提供小程序开发、虚拟主机、网站策划、网站收录、营销型网站建设、定制开发

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联