首页 > web前端 > H5教程 > HTML5 figure标签是什么意思?HTML5 figure标签的使用方法详解

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

寻∝梦
发布: 2018-08-17 17:38:33
原创
9481 人浏览过

HTML5 figure标签是什么意思?HTML5 figure标签的使用方法你想知道吗?接下来介绍今天的这篇文章,主要讲述了HTML5 figure标签的定义和用法(附实例)

HTML5

标签的定义和用法:

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

标签规定独立的流内容(图像、图表、照片、代码等等)。

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

HTML5

标签的实例:

文档中的一个小节,描述 PRC:

<figure>
  <h1>PRC</h1>
  <p>The People&#39;s Republic of China was born in 1949...</p>
</figure>
登录后复制

提示:请使用

元素为元素组添加标题。

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>PASSIONATE<strong>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的新标签

实现了页面的基础搭建,下面就简单聊聊这个HTML5的新标签

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

的可选子标签
中的内容。

现在回到之前我准备重复造的那个轮子,发现如果把对于图片的描述内容全部都包裹在

标签中,无论是语义上还是代码结构上都更加的清晰。

HTML 4.01 与 HTML 5 之间的差异

标签是 HTML 5 中的新标签。

【相关推荐】

HTML5标签是什么意思?HTML5标签的基本用法详解

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

以上是HTML5 figure标签是什么意思?HTML5 figure标签的使用方法详解的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板