HTML5中figure和figcaption标签用法
之前看到一个很有趣的轮子:Hover效果,没有使用 JavaScript 代码,全部都是 HTML + CSS便实现了,自己按照网页上面的效果实现了几个之后,用审查者工具看了下源代码,发现 HTML 的基本构造如下面所示:<figure class="effect-julia"><img src="img/21.jpg" alt="img21"/><figcaption><h2
之前看到一个很有趣的轮子: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的新标签<figure>实现了页面的基础搭建,下面就简单聊聊这个HTML5的新标签<figure>及它的配套元素<figcation>。
参考资料:
<figure>
<figure>标签规定独立的流内容(图像、图表、照片、代码等等)。
figure元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。它是一种元素的组合,可带有标题(可选)。figure标签用来表示网页上一块独立的内容,将其从网页上移除后不会对网页上的其他内容产生影响。
figure有一个子标签:figcaption.
<figcation>
<figcation> 标签定义 figure 元素的标题(caption)。
“figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。
OK,关于figure和figcaption标签就介绍完了,接下用几个实例来应用它们。如下:
案例1:
不带有标题的figure元素:
案例2:
带有标题的figure元素:
案例3:
多个图片,同一个标题的figure元素:
总结:
了解完了上面的内容,相信大伙对于HTML5中的figure和figcaption标签应用很清晰了。
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)