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

鳄鱼君

发表文章数:643

热门标签

,

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » HTML » 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  class="img-thumbnail" src="xx.jpg" alt="HTML5网页中的分组元素(figure、figcaption、hgroup)"  title="HTML5网页中的分组元素(figure、figcaption、hgroup)"/>  <!--插入一张图片-->
</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>

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《HTML5网页中的分组元素(figure、figcaption、hgroup)》 发布于2020-04-06

分享到:
赞(2) 赏杯咖啡

评论 抢沙发

8 + 6 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册