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
--- 所有笔记仅作个人整理,非全部原创,内容源自网络 ---