本文详细介绍了HTML5中Article元素的使用方法，并通过实例展示了如何正确应用Article元素，包括其基本结构、嵌套使用及与Header、Footer等元素的配合。
本文和大家分享的主要是HTML5中article元素的相关用法，同时结合具体实例进行讲解，加深大家对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元素中，我们又分别为标题和评论内容部分分别放在了header和p元素里面。关于我们上面使用的评论时间里面使用到的pubdate和time元素，我们将在后面会进行讲解。
扫一扫
8105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
