HTML5与CSS3基础教程:创建通用容器

摘要:一般的,section定义成“通用的”区块,但不要将它与div元素混淆。从语义上讲,section标记的是页面中的特定区域,而div则不传达任何语义。

作者:图灵教育
来源:《HTML5与CSS3基础教程》(第八版)

第三章全部章节:
第一节:“基本HTML结构 开始编写网页”
第二节:创建页面标题
第三节:创建分级标题
第四、五节:普通页面构成和创建页眉
第六节:标记导航 通过nav指向任意页面内容
第七节:标记页面主要区域
第八节:标题在不同浏览器中显示相同大小(创建文章)
第九节:用section定义区块 它与div不同
第十节:用aside表示网页独立内容(指定附注栏)
第十一节:通过footer在任何位置创建页脚

3.12 创建通用容器

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

这时,你真正需要的是一个通用容器,一个完全没有任何语义含义的容器。这个容器就是div(来自division一词)元素,如图3.12.2所示。有了div,就可以为其添加样式(参见图3.12.3)或JavaScript效果了。一定要阅读补充材料“有关div的一些历史以及何时在HTML5中使用它”,了解什么时候可以在页面中使用div。

1.jpg

图3.12.1

在不使用div元素的情况下,我们实现了这个设计。不过,为页面内容加上div(参见图3.12.2)以后,我们有了一个可以添加更多样式的通用容器(效果如图3.12.3所示)

2.jpg

图3.12.2

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

3.jpg

图3.12.3

div元素自身没有任何默认样式,只是其包含的内容从新的一行开始(图3.12.4)。不过,我们可以对div添加样式以实现自己的设计。这里,我对div添加了浅的背景色和阴影,这样我就可以将body元素的背景改为渐变的红色,使内容凸显出来。要查看实现这个页面的HTML和CSS,可以访问www.htmlcssvqs.com/8ed/structure-final

创建通用容器的步骤

(1) 输入<div>。

(2) 创建容器的内容,内容可以包含任意数量的元素。

(3) 在容器的结尾处输入</div>。

同header、footer、main、article、section、aside、nav、h1~h6、p和其他很多元素一样,默认情况下,div从新的一行开始显示(图3.12.4)。

4.jpg

图3.12.4

同一个页面在未对div、标题、段落及其他元素添加CSS的样子。可以看到,div并未产生任何独特的样式

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

尽管我始终强调HTML用于对内容的含义进行描述,但div并不是唯一没有语义价值的元素。span是与div对应的一个元素:div是块级内容的无语义容器,而span(写作<span>这里是内容</span>)则是短语内容的无语义容器,例如它可以放在段落元素p之内。参见第4章了解span。

要了解如何在div中使用地标角色,参见3.13节。

5.jpg

6.jpg

图3.12.5

这个页面有一个包含整个页面的div,另外还新增了一个包着附注栏的div。带有class="sidebar"(使用任何类名都可以)的div包围着想要显示为第二栏的内容。然后可以在CSS中通过类定位到这样的div并对其应用样式。main则加上了显示为第一栏的样式

7.jpg

图3.12.6

此图显示了图3.12.5中的代码如何在概念上对应到CSS布局对应的形式。这是很常见的一种安排,但只是针对这段HTML众多可能的CSS样式中的一种。一定要阅读3.13节,了解如何进一步增强页面的语义和可访问性。