html5之div，article，section区别与应用

div

块级元素，在里面的内容会自动开始新行，可以定义文档中的分区或节，把文档分割成独立，不同的部分

本身没有什么语义，更适合帮助布局，进行样式化。

<div>
</div>

 

section

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

出席的场景一般是有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一个网站的主页可以分成简介、新闻和联系信息等几部分。

（当一个标签只是为了样式化或者方便脚本使用时，应该去使用 div）

一般来说，当元素内容明确地出现在文档大纲中时，是很好的选择。

<section>
  <h1>PRC</h1>
  <p>The People's Republic of China was born in 1949...</p>
</section>

 

article

<article> 标签定义外部的内容。

外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。

是特殊的section，比section具有更明确的语义，是一个独立的、完整的相关内容块的代表。

一般来说， 会有标题部分(通常包含在 header 内)，有时也会 包含 footer 。虽然 section 也是带有主题性的一块内容，但是无论从结构上还是内容上来说，是独立的、完整的，代表文档、页面或者应用程序中独立完整的可以被外部引用的内容。例如：博客中的一篇文章，论坛中的一个帖子或者一段浏览者的评论等。因为article元素是一段独立的内容，所以article元素中，通常包含头部（header元素）、底部（footer元素）。

<article>
      <header><h1>计算机各类语言介绍</h1></header>
      <p>本文列举了部分计算机语言的一些介绍</p>
      <section>
        <h2>JavaScript</h2>
        <p>js是一门……</p>
      </section>
      <section>
        <h2>HTML</h2>
        <p>HTML是一门……</p>
      </section>
      <footer>版权所有</footer>
    </article>

 

 

 

 

参考原文：

https://blog.csdn.net/anmoran/article/details/48517105