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


本文摘自PHP中文网,作者寻∝梦,侵删。

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

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

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

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

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

HTML5<figure>标签的实例:

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

1

2

3

4

<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 的基本构造如下面所示:

1

2

3

4

5

6

7

8

9

10

11

12

<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部分的代码,实例对比:

阅读剩余部分

相关阅读 >>

如何使用HTML5 canvas绘制线条

后盾网HTML5视频教程

怎样做出h5响应式网页设计

HTML5用什么工具开发

html中文本标签,超链接标签以及图像标签的简单介绍

HTML5 footer标签怎么用?footer标签的用法实例

HTML5调用移动浏览器相机问题

巧用HTML5给按钮背景设计不同的动画

h5缓存-manifest的示例代码分享(图文)

HTML5页面调起app功能的方法试验

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    暂无评论...