HTML5中div干啥用的?

html-css017

HTML5中div干啥用的?,第1张

小时候我们玩积木,一块块积木堆积起来,组成了一个完整的建筑模型,div就是这一块块小积木,用来组成一个完整的网页,浏览器很笨,他只认识人们给他定义好的语法,比如div,当浏览器看到div,就会自己去将div组建成网页。每块小积木还可以取个名字,比如有的叫做房顶,有的叫做底部根基,有的叫做房子主体。

这个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 。