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

div

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

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

<div>
</div>

section

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

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

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

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

<section>
<h1>PRC</h1>
<p>The People's * 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

上一篇:html5笔记——
标签


下一篇:Python 函数进阶(filter/map/json/zip)