这个div组成的房子里面可以住很多小伙伴,文字、图片、视频动画都是大家庭的一员。
1、div表示一个布局容器,本身没有任何语义,用作布局以及样式化或脚本的钩子(hook)。<div>this is a div </div>
2、section 表示一段专题性的内容,一般会带有标题。
section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一个网站的主页可以分成简介、新闻和联系信息等几部分。其实我对这里传达信息很感兴趣,因为感觉 section 和下面要介绍的 artilce 更加适用于模块化应用,这个话题以后会出篇专门的文章来讨论,这里暂时略过。
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples make a great filling for apple pies.</p>
</section>
3、article 是一个特殊的 section 标签,它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。
一般来说, article 会有标题部分(通常包含在 header 内),有时也会 包含 footer 。虽然 section 也是带有主题性的一块内容,但是无论从结构上还是内容上来说,article 本身就是独立的、完整的。
<article>
<header>
<h1>The Very First Rule of Life</h1>
<p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
</header>
<p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p><p>...</p>
<footer>
<a href="?comments=1">Show comments...</a>
</footer>
</article>
当元素内容聚合起来更加言之有物时,应该使用 article 来替换 section 。