hgroup元素与figcaption元素的结合使用

最新推荐文章于 2022-08-30 19:13:54 发布

已转行@

最新推荐文章于 2022-08-30 19:13:54 发布

阅读量491

点赞数

分类专栏：从零学习HTML5 文章标签： html html5

原文链接：https://www.ptpress.com.cn

版权

从零学习HTML5 专栏收录该内容

57 篇文章 13 订阅

订阅专栏

本文通过代码示例展示了如何利用HTML的hgroup和figcaption元素来组织和注释多个标题，分别对应《致橡树》、《再别康桥》和《无怨的青春》这三首诗的内容，探讨了它们在网页布局和信息结构中的应用。

摘要由CSDN通过智能技术生成

为了更好地说明各群组的功能，hgroup元素常常与figcaption结合使用。下面通过一个案例进行演示。

效果图：

2-11

代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>hgroup元素与figcaption元素的结合使用</title>
</head>
<body>
<hgroup>
	<figcaption>《致橡树》</figcaption>
	<p>《致橡树》是舒婷创作于1977年3月的爱情诗。 是朦胧诗派的代表作之一， 作为新时期文学的发轫之作，《致橡树》在文学史上的地位是不言自明的。作者通过木棉树对橡树的“告白”，来否定世俗的、不平等的爱情观，呼唤自由，平等独立，风雨同舟的爱情观，喊出了爱情中男女平等，心心相印的口号，发出新时代女性的独立宣言，表达对爱情的憧憬与向往。</p>
	<figcaption>《再别康桥》</figcaption>
	<p>《再别康桥》是现代诗人徐志摩脍炙人口的诗篇，是新月派诗歌的代表作品。全诗以离别康桥时感情起伏为线索，抒发了对康桥依依惜别的深情。语言轻盈柔和，形式精巧圆熟，诗人用虚实相间的手法，描绘了一幅幅流动的画面，构成了一处处美妙的意境，细致入微地将诗人对康桥的爱恋，对往昔生活的憧憬，对眼前的无可奈何的离愁，表现得真挚、浓郁、隽永，是徐志摩诗作中的绝唱。</p>
	<figcaption>《无怨的青春》</figcaption>
	<p>《无怨的青春》是台湾著名女诗人席慕蓉的诗，澄明热烈，真挚动人，充满了田园式的牧歌情调和舒缓的音乐风格。她多写爱情、人生、乡愁，写得美极，淡雅剔透，抒情灵动，饱含着对生命的挚爱真情，充满着对人情、爱情、乡情的领悟。</p>
</hgroup>
</body>
</html>