HTML5 figure 标签的定义和用法:
figure 标签用于对元素进行组合。
figure 标签规定独立的流内容(图像、图表、照片、代码等等)。
figure 元素的内容应该与主内容相关,同时元素的位置相对于主内容是独立的。如果被删除,则不应对文档流产生影响。
HTML5 figure 标签的实例:
文档中的一个小节,描述 PRC:
figure h1 PRC /h1 p The People s Rehtml' target='_blank'>public of China was born in 1949... /p /figure
提示:请使用 figcaption 元素为元素组添加标题。
figure元素是一种元素的组合,可带有标题(可选)。figure标签用来表示网站制作页面上一块独立的内容,将其从网页上移除后不会对网页上的其他内容产生影响。figure所表示的内容可以是图片、统计图或代码示例。
注意:一个figure元素内最多只允许放置一个figcaption元素,其他元素可无限放置。
HTML5 figure标签的作用:
之前看到一个很有趣的轮子:Hover效果,没有使用 JavaScript 代码,全部都是 HTML + CSS便实现了,用审查者工具看了下源代码,发现 HTML 的基本构造如下面所示:
figure >而我实现的源代码中HTML部分的代码,实例对比:
div >很显然的区别是原本代码中使用了HTML5的新标签 figure 实现了页面的基础搭建,下面就简单聊聊这个HTML5的新标签 figure 。
值得一提的是尤其提到独立于文档主流之外,是在官方文档上面提到的,还提到了这个标签包含的内容应该具有独立性,可移植的,不影响主流内容。然后前文提到的描述这里就是作为 figure 的可选子标签 figcaption 中的内容。
现在回到之前我准备重复造的那个轮子,发现如果把对于图片的描述内容全部都包裹在 figcaption 标签中,无论是语义上还是代码结构上都更加的清晰。
HTML 4.01 与 HTML 5 之间的差异
figure 标签是 HTML 5 中的新标签。
【相关推荐】
HTML5 progress 标签是什么意思?HTML5 progress 标签的基本用法详解
HTML5中的header标签是什么意思?HTML5中header标签具体使用方法你知道吗?
以上就是HTML5 figure标签是什么意思?HTML5 figure标签的使用方法详解的详细内容,其它编程语言
郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。
新闻热点
疑难解答