HTML5 使用div元素

    ■知识点

    有时需要在一段内容外围添加一个容器，从而可以为其应用CSS样式或JavaScript效果。如果没有这个容器，页面就会不一样。在评估内容的时候，考虑使用article、section、aside、nav等元素，却发 现它们从语义上来讲都不合适。

    这时，真正需要的是一个通用容器，一个完全没有任何语义含义的容器。这个容器就是div元素，用户可以为其添加样式或JavaScript效果了。

    ■实例设计

    【示例1】下面的示例为页面内容加上div以后，可以添加更多样式的通用容器。

<div>

<article>

<hl>文章标题</h1>

<P>文章内容</P>

<footer>

<p>注释信息</P>

<address><a href="#">W3C</a></address>

</footer>

</article>

</div>

    现在有一个div包着所有的内容，页面的语义没有发生改变，但现在有了一个可以用CSS添加样式的通用容器。

    与 header、footer、main、article、section、aside、nav、hl~h6、p 等兀素一样，在默认情况下，div 元素自身没有任何默认样式，只是其包含的内容从新的一行开始。不过，我们可以对div添加样式以实现设计。

    div对使用JavaScript实现一些特定的交互行为或效果也是有帮助的。例如，在页面中展示一张图片或一个对话框，同时让背景页面覆盖一个半透明的层（这个层通常是一个div)。

    尽管HTML用于对内容的含义进行描述，但div并不是唯一没有语义价值的元素。span是与div对应的一个元素：div是块级内容的无语义容器，而span则是短语内容的无语义容器，例如它可以放在段 落元素p之内。