HTML5中article元素的使用

本文详细介绍了HTML5中Article元素的使用方法,并通过实例展示了如何正确应用Article元素,包括其基本结构、嵌套使用及与Header、Footer等元素的配合。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本文和大家分享的主要是HTML5article元素的相关用法,同时结合具体实例进行讲解,加深大家对article元素的印象,一起来看看吧,希望对大家学习HTML5有所帮助。

什么是Article元素

代表文档、页面、应用程序中独立的完整的被外部引用的内容区域。它可以是博客中的文章、帖子、用户的回复,总之article它所表示的所展现的内容,是外表独立出来的内容,所以它有自己独立的标题、页脚。

article元素的用法

<!DOCTYPE html>

<html>

<head lang=en>

<meta charset=UTF-8>

<titile></title>

</head>

<body>

<article>

</header>

<h1>我是Article</h1>

<p>创建时间:<time pubdate=pabdate>2014/09/27</time></p>

</header>

<p>

<b>Article</b>是一个独一的区域

</p>

<footer>

<p><small>麦子学院版权所有</small></p>

</footer>

</article>

</body>

</html>

 

Article元素效果演示图


因此,以上实例代码是一个完整的、独立的。所以我们使用article元素是正确的。

怎么用嵌套

Article元素是可以被嵌套使用的,内层的内容在原则上是需要与外层的内容相关联,比如我们刚刚讲解的article的实例,针对这个实例,我们就可以使用嵌套的article元素来展示,用来呈现的评论将会被包含在整理的大的元素里面,我们就来展示下怎么用嵌套。

我们找到内容区域,在内容区域的下面添加一个section元素.

<section>

<h2>读者评论</h2>

<article>

<header>

<h3>读者:朱朝兵</h3>

<p>

<time pudate datetime=2014/09/27T21:00>2小时前</time>

</p>

</header>

<p>

文章很好!

</p>

</article>

<h2>读者评论</h2>

<article>

<header>

<h3>读者:小星星</h3>

<p>

<time pudate datetime=2014/09/27T21:00>2小时前</time>

</p>

</header>

<p>

文章非常好!

</p>

</article>

</section>

之后刷新浏览器,预览效果如下:


具体来说,我们的实例内容分为了几部分,文章我们放在了header元素里面,文章正文放在了header元素后面的p元素里面,然后section元素又把文章正文与评论进行了区分,关于section元素是一个分块的的元素,用来把页面的内容进行分块,在section元素中嵌入了评论内容,评论中每个评论都是相对独立完整的,因此对它们使用了article元素。在评论的article元素中,我们又分别为标题和评论内容部分分别放在了headerp元素里面。关于我们上面使用的评论时间里面使用到的pubdatetime元素,我们将在后面会进行讲解。

 

原文链接:http://www.maiziedu.com/wiki/html5/article/

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值