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

  本文关键词：HTML5与CSS3基础教程，由笔耕文化传播整理发布。

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

作者：图灵教育来源：《HTML5与CSS3基础教程》（第八版）

第三章全部章节：

第一节： “基本HTML结构 开始编写网页”

第二节：创建页面标题

第三节：创建分级标题

第四、五节： 普通页面构成和创建页眉

第六节： 标记导航 通过nav指向任意页面内容

第七节：标记页面主要区域

第八节： 标题在不同浏览器中显示相同大小（创建文章）

第九节： 用section定义区块 它与div不同

第十节： 用aside表示网页独立内容(指定附注栏)

第十一节： 通过footer在任何位置创建页脚

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

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

图3.12.1

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

图3.12.2

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

图3.12.3

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

创建通用容器的步骤

(1) 输入

  本文关键词：HTML5与CSS3基础教程，由笔耕文化传播整理发布。