div、section、article的区别和使用,有需要的朋友可以参考下。
在进行HTML5的编写时,会对div、section、article的使用混淆,经过查阅相关的资料,以及自己的总结,得出div、section、article的区别。
1、什么时候使用
(1)div:作为布局以及样式化时使用;
(2)section:表示文档中的节,一般是具有标题的。如:文档大纲、文章章节、博客条目、用户评论部分或者论文中有编号的部分时使用;
通常会带有标题。如果没有标题,那么就不推荐使用section。
<section><h1>文章章节小标题</h1><p>文章章节内容</p></section>
(3)article:表示独立的自包含内容,如:一篇文章。文章中可包含标题、内容、脚注
<article><header><h1>文章标题</h1></header><p>文章内容</p></article>
2、示例
<article><header><h1>文章标题</h1><p><time datetime="2014-03-28">发表时间</time></p></header><p>文章正文</p><section><h2>文章评论</h2><article><header><h3>发表者:lanyf</h3><p><time datetime="2014-03-28">10:13</time></p></header><p>评论内容</p></article></section></article>
注:
1、<header>:定义文档的页面(介绍信息),如文章标题,发表时间
2、article和section是可以嵌套使用的
3、为什么在section中可以嵌套使用article,拿示例中的代码来解释
(1)评论是文章的一个节,所以使用section
(2)而每一个用户的评论是相对独立的内容,所以每一个用户的评论用article
联系客服