2.5 分区元素div

12 分区元素div

前面讲解的几类块级元素一般用于组织小区块的内容，为了方便管理，许多小区块还需要放到一个大区块中进行布局。分区元素div常用于页面布局时区块的划分，它相当于一个大“容器”，可定义文档中的分区。div是division的简写，意为分割、区域、分组。div元素可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。div元素可以容纳无序列表、有序列表、表格、表单等块级标签，同时也可以容纳普通的标题、段落、文字、图片等内容。

div元素是一个块级元素，也就是说，浏览器通常会在div元素前后放置一个换行符。实际上，换行是div元素固有的唯一格式表现。通常使用div元素来组合块级元素，这样就可以使用样式对它们进行格式化。由于div元素没有明显的外观效果，因此需要为其添加CSS样式属性，才能看到区块的外观效果。div元素的格式为：

﹤div id="控件id"class="类名"﹥文本、图像或表格﹤/div﹥

div元素的属性如下。

1）id属性：用于标识单独的唯一的元素。id值必须以字母或者下画线开始，不能以数字开始。

2）class属性：用于标识类名或元素组（类似的元素，或者可以理解为某一类元素）。

如果用id或class来标记﹤div﹥，那么该标签的作用会变得更加有效。不必为每一个﹤div﹥都加上class或id，虽然这样做也有一定的好处。

【例2-18】 使用div元素组织网页内容。本例文件2-18.html在浏览器中的显示效果如图2-18所示。

图2-18 使用div元素组织网页内容

本例把整个文档体（body）设置成1个分区（page），然后在该分区中设置了4个分区，分别是页头分区（header）、导航栏分区（nav）、主题内容分区（main）和页脚的版权分区（foot）。

由于页面中的内容并未设置CSS样式，因此整个页面看起来并不美观，在后续章节的练习中将利用CSS样式对该页面进行美化。有关div元素的应用，将在后续章节中介绍。