HTML5中article元素的使用

绝地灬酷狼 2022-07-13 03:07 133阅读 0赞

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

**什么是Article元素**

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

**article元素的用法**

<!DOCTYPE html>

<html>

</head>

<body>

</header>

<h1>我是Article</h1>

</header>

<p>

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

</p>

</footer>

</article>

</body>

</html>

Article元素效果演示图

![Center][]

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

**怎么用嵌套**

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

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

<p>

</p>

</header>

<p>

文章很好！

</p>

</article>

<p>

</p>

</header>

<p>

文章非常好！

</p>

</article>

</section>

之后刷新浏览器，预览效果如下：

![Center 1][]

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

原文链接：[http://www.maiziedu.com/wiki/html5/article/][http_www.maiziedu.com_wiki_html5_article]

[Center]: /images/20220713/c35ecd6c566449c2998acd682f5834f7.png
[Center 1]: /images/20220713/52d9f975648e411db91ff13fe6b4c736.png
[http_www.maiziedu.com_wiki_html5_article]: http://www.maiziedu.com/wiki/html5/article/