HTML5网页中的分组元素(figure、figcaption、hgroup)

HTML5网页中的分组元素(figure、figcaption、hgroup)

在HTML5中涉及到三个和分组有关的元素,分别是figure元素、figcaption元素、hgroup元素。

HTML5中的figure元素

figure元素用于定义独立的流内容,比方说图像、图标、照片、代码等,一般指一个单独的单元。figure元素的内容应该与主内容先关,但如果被删除,也不会对文档流产生影响。

HTML5中的figcaption元素

figcaption元素用于为figure元素组添加标题,一个figure元素内最多允许使用一个figcaption元素,该元素应该放在figure元素的第一个或者最后一个子元素的位置。我们来看一下figure元素figcaption元素的使用方方法:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>figure和figcaption元素的使用</title>
</head>
<body>
<p>北海道11条经典线路</p>
<figure>
	<figcaption>北海道</figcaption>
	<p>想夏日看花海,想冬日滑粉雪,意外的在秋日去看了红叶。</p>
	<img src="xx.jpg" alt="">  <!--插入一张图片-->
</figure>	
</body>
</html>

HTML5中的hgroup元素

hgroup元素用于将多个标题(主标题和副标题或者子标题)醉成一个标题组,通常它与h1~h6元素组合使用。通常将hgroup元素放在header元素中。如果只有一个标题元素不建议使用hgroup元素,反之如果出现一个或者一个以上的标题与元素时,推荐使用hgroup元素。

当一个标题包含副标题、section或者article元素时,建议将hgroup元素和标题相关元素存放到header元素容器中。我们来看一下具体的使用方式:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>hgroup元素的使用</title>
</head>
<body>
<header>
	<hgroup>
		<p>我的个人博客</p>
		<p>副标题</p>	
	</hgroup>
	<p>这是描述内容</p>
</header>	
</body>
</html>
分享到 :

发表评论

登录... 后才能评论