2.2 用于布局的块级标签

常用于布局的块级标签包括无序列表、有序列表、表格、表单、分区<div>，这类标签常用于布局网页，组织HTML的内容结构。

2.2.1 无序列表

列表分为无序列表和有序列表。带序号标志（如数字、字母等）的表项组成有序列表，否则为无序列表。

无序列表中每一个表项的前面是项目符号（如●、■等符号）。建立无序列表可使用<ul>标签和<li>表项标签。格式为：

值得注意的是，<li>标签是单标签。即一个表项的开始，就是前一个表项的结束。

从浏览器上看，无序列表的特点是，列表项目作为一个整体，与上下段文本间各有一行空白；表项向右缩进并左对齐，每行前面有项目符号。

type指定每个表项左端的符号类型，可为disc（实心圆点）、circle（空心圆点）、square（方块），也可自己设置图片。方法有以下两种。

1.在<ul>后指定符号的样式

在<ul>后指定符号的样式，可设定直到</ul>的加重符号。例如：

2.在<li>后指定符号的样式

在<li>后指定符号的样式，可以设置从该<li>起直到</ul>的项目符号。格式就是将前面的ul换为li。

【演练2-6】制作梦想橱柜支付方式的无序列表，本例文件2-6.html在浏览器中显示的效果如图2-6所示。

代码如下：

【说明】由于在<ul>后指定符号的样式为type="disc"，因此每个列表项显示为实心圆点。

2.2.2 有序列表

通过带序号的列表可以更清楚地表达信息的顺序。使用<ol>标签可以建立有序列表，表项的标签仍为<li>。格式为：

在浏览器中显示时，有序列表整个表项与上下段文本之间各有一行空白；列表项目向右缩进并左对齐；各表项前带顺序号。

可以改变有序列表中的序号种类，利用<ol>或<li>中的type属性可设定5种序号：数字、大写英文字母、小写英文字母、大写罗马字母和小写罗马字母。序号标签默认为数字。

在<ol>后指定符号的样式，可设定直到</ol>的表项加重记号。格式为：

在<li>后指定符号的样式，可设定该表项前的加重记号。格式只需把上面的ol改为li。

【演练2-7】制作梦想橱柜网银在线支付步骤的有序列表，本例文件2-7.html在浏览器中显示的效果如图2-7所示。

代码如下：

【说明】由于在<ol>后未指定符号的样式，因此每个列表项显示为默认的数字。

2.2.3 定义列表

定义列表又称为释义列表或字典列表，定义列表不是带有前导字符的列项目，而是一列实物以及与其相关的解释。当创建一个定义列表时，主要用到3个HTML标签：<dl>标签、<dt>和<dd>标签。格式为：

在<dl>、<dt>和<dd>3个标签组合中，<dt>是标题，<dd>是内容，<dl>可以看作是承载它们的容器。当出现多组这样的标签组合时，应尽量使用一个<dt>标签配合一个<dd>标签的方法。如果<dd>标签中内容很多，可以嵌套<p>标签使用。

【演练2-8】使用定义列表显示梦想橱柜客服中心的联系电话和地址，本例文件2-8.html的浏览效果如图2-12所示。

代码如下：

在上面的示例中，<dl>列表中每一项的名称不再是<li>标签，而是用<dt>标签进行标记，后面跟着由<dd>标签标记的条目定义或解释。默认情况下，浏览器一般会在左边界显示条目的名称，并在下一行缩进显示其定义或解释。

2.2.4 嵌套列表

所谓嵌套列表就是无序列表与有序列表嵌套混合使用。嵌套列表可以把页面分为多个层次，给人以很强的层次感。有序列表和无序列表不仅可以自身嵌套，而且彼此可互相嵌套。嵌套方式可分为：无序列表中嵌套无序列表、有序列表中嵌套有序列表、无序列表中嵌套无序列表、在有序列表中嵌套有序列表等方式，读者需要灵活掌握。

【演练2-9】制作梦想橱柜服务中心页面，在无序列表中嵌套无序列表、有序列表和定义列表，本例文件2-9.html在浏览器中显示的效果如图2-9所示。

代码如下：

2.2.5 表格

表格将文本和图像按行、列排列，它与列表一样，有利于表达信息。表格除了用来显示数据外，还用于搭建网页的结构，使整个页面更规则地放置文字、图像和空白，并使网页的各个条目更清晰。

1.使用表格的优点

（1）简单通用

由于表格行列的结构简单，并且在日常生活中也广泛使用，设计人员对它的理解和编写都很容易入手。

（2）结构稳定

表格是由指定数目的行和列组成，每行的列数通常一致，同行单元格高度一致且水平对齐，同列单元格宽度一致且垂直对齐，这种严格的约束形成了一个不易变形的长方形盒子结构，堆叠排列起来结构很稳定，如图2-10所示，表格中的内容按照相应的行或列进行分类和显示。

2.表格的基本语法

最简单的表格仅包括行和列。表格的标签为<table>，行的标签为<tr>，表项的标签为<td>。其中，<tr>是单标签，一行的结束是新一行的开始。表项内容写在<td>与</td>之间。<table>标签必须成对使用，简单表格的格式为：

在上面格式中，<caption>标签用来给表格增加标题，其中的align属性用来设置标题相对于表格水平方向的对齐方式，valign属性用来设置标题相对于表格垂直方向的对齐方式。

表格是一行一行建立的，在每一行中填入该行每一列的表项数据。可以把表头看作一行，只不过用的是<th>标签。

在浏览器中显示时，<th>标签的文字按粗体显示，<td>标签的文字按正常字体显示。

表格的整体外观由<table>标签的属性决定。

border：定义表格边框的粗细，n为整数，单位为像素。如果省略，则不带边框。

width：定义表格的宽度，x为像素数或百分数（占窗口的）。

height：定义表格的高度，y为像素数或百分数（占窗口的）。

cellspacing：定义表项间隙，i为像素数。

cellpadding：定义表项内部空白，j为像素数。

【演练2-10】在页面中添加一个3行2列的表格，本例文件2-10.html在浏览器中显示的效果如图2-11所示。

代码如下：

【说明】表格所使用的边框粗细等样式一般应放在专门的CSS样式文件中（后续章节讲解），此处讲解这些属性仅仅是为了演示表格案例中的页面效果，在真正设计表格外观的时候是通过CSS样式完成的。

3.跨行跨列的表格

上面讲解了表格的基本语法，但在实际应用中往往使用比较复杂的表格，经常需要把多个单元格合并为一个单元格，也就是要用到表格的跨行跨列功能。

（1）跨行

跨行是指单元格在垂直方向上合并，格式为：

其中，rowspan表示跨行的意思。

【演练2-11】制作一个跨行展示橱柜分类库存的表格，本例文件2-11.html在浏览器中显示的效果如图2-12所示。

代码如下：

（2）跨列

跨列是指单元格在水平方向上合并，格式为：

其中，colspan表示跨列的意思。

【演练2-12】制作一个跨列展示橱柜分类库存的表格，本例文件2-12.html在浏览器中显示的效果如图2-13所示。

代码如下：

【说明】在编写表格跨行跨列的代码时，通常在需要合并的第一个单元格中，设置跨行或跨列属性，例如，colspan="2"。

（3）跨行、跨列

【演练2-13】制作一个跨行跨列展示橱柜分类库存的表格，本例文件2-13.html在浏览器中显示的效果如图2-14所示。

代码如下：

【说明】表格跨行跨列以后，并不改变表格的特点。表格中同行的内容总高度一致，同列的内容总宽度一致，各单元格的宽度或高度互相影响，结构相对稳定，不足之处是不能灵活地进行布局控制。

4.表格数据的分组标签

表格数据的分组标签包括<thead>、<tbody>和<tfooter>，主要用于对报表数据进行逻辑分组。其中，<thead>标签对应报表的页眉，即表格的表头；<tbody>标签对应报表的数据主体，即报表详细的数据描述；<tfooter>标签对应报表的页脚，即对各分组数据进行汇总的部分。各分组标签内由多行<tr>组成。

【演练2-14】制作一个橱柜季度销量数据报表，本例文件2-14.html在浏览器中显示的效果如图2-15所示。

代码如下：

【说明】为了区分报表各部分的颜色，这里使用了“style”样式属性分别为<thead>、<tbody>和<tfooter>设置背景色，此处只是为了演示页面效果。

5.表格内文字的对齐方式

默认情况下，表项居于单元格左端。可用列、行的属性设置表项数据在单元格中的位置。

（1）水平对齐

表项数据的水平对齐通过标签<th>、<td>和<tr>的align属性实现。align的属性值分别为：center（表项数据的居中）、left（左对齐）、right（右对齐）或justify（左右调整）。

（2）垂直对齐

表项数据的垂直对齐通过标签<th>、<td>和<tr>的valign属性实现。valign的属性值分别为：top（靠单元格顶）、bottom（靠单元格底）、middle（靠单元格中）或baseline（同行单元数据项位置一致）。

6.表格在页面中的对齐方式

前面介绍的是表格中的各个单元格的属性。现在，把表格作为一个整体，介绍如何设置表格在页面中的位置。与图像一样，表格在浏览器窗口中的位置也有3种：居左、居中和居右。使用<table>标签的align属性，设置表格在页面中的位置，格式为：

当表格位于页面的左侧或右侧时，文本填充在另一侧；当表格居中时，表格两边没有文本；当align属性省略时，文本在表格的下面。

7.表格的应用

在讲解了以上表格基本语法的基础上，下面介绍表格在制作页面中的应用，主要分为两个方面：使用表格显示数据和使用表格实现页面局部布局。

（1）使用表格显示数据

【演练2-15】制作橱柜季度销量一览表，本例文件2-15.html在浏览器中显示的效果如图2-16所示。

代码如下：

（2）使用表格实现页面局部布局

使用表格也可以实现页面局部布局，类似于商品分类、新闻列表这样的效果，可以采用表格来实现。

【演练2-16】制作橱柜分类展示页面，本例文件2-16.html在浏览器中显示的效果如图2-17所示。

代码如下：

【说明】在设计页面时，常需要利用表格来定位页面元素。使用表格可以导入表格化数据，设计页面分栏，定位页面上的文本和图像等。使用表格布局具有结构相对稳定、简单通用等优点，但使用嵌套表格布局时HTML层次结构复杂，代码量非常大。因此，表格布局仅适用于页面中数据规整的局部布局，而页面的整体布局一般采用主流的Div+CSS布局，Div+CSS布局将在后续章节进行详细讲解。

2.2.6 表单

表单是用于实现浏览者与网页制作者之间信息交互的一种网页对象。在Internet上，表单被广泛用于各种信息的搜集与反馈，如图2-18所示的会员登录表单。

1.表单的工作原理

表单的作用是从客户端收集信息。当访问者在表单中输入信息，单击提交按钮后，这些信息将被发送到服务器，服务器端脚本或应用程序将对这些信息进行处理。服务器进行响应时，会将被请求信息发送回用户（或客户端），或者基于该表单内容执行一些操作，表单的工作原理如图2-19所示。

2.表单标签

网页上具有可输入表项及项目选择等控制所组成的栏目称为表单。<form>标签用于创建供用户输入的HTML表单。表单的基本格式为：

<form>标签主要处理表单结果的处理和传送，常用属性的含义如下。

name属性：表单的名字，在一个网页中用于唯一识别一个表单。

action属性：表单处理的方式，往往是E-mail地址或网址。

method属性：表单数据的传送方向，是获得（GET）表单还是送出（POST）表单。

表单的具体用法将在第3章讲解表单元素（行级标签）时进行详细介绍。

2.2.7 分区标签<div>

前面讲解的几类块级标签一般用于组织小区块的内容，为了方便管理，许多小区块还需要放到一个大区块中进行布局。分区标签<div>常用于页面布局时对区块的划分，它相当于一个大“容器”，可以容纳无序列表、有序列表、表格、表单等块级标签，同时也可以容纳普通的标题、段落、文字、图片等内容。由于<div>标签没有明显的外观效果，所以需要为其添加CSS样式属性，才能看到区块的外观效果。

分区标签的格式为：

其中，属性align用来设置文本块、文字段或标题在网页上的对齐方式，取值为：left、center和right，默认为left。

【演练2-17】使用<div>标签组织网页内容，通过为其添加“style”样式设置标签的宽度、高度及背景色区块的外观效果。本例文件2-17.html在浏览器中显示的效果如图2-20所示。

代码如下：

【说明】本例中设置了两个分区：内容分区和版权分区。其中，定义内容分区标签的样式为style="width:500px;height:170px;background:#f96"，表示分区的宽度为500px、高度为170px及背景色为桔红色；定义版权分区标签的样式为style="width:500px;height:50px; background:#69c;color:white;text-align:center"，表示分区的宽度为500px、高度为50px、背景色为蓝色、文字为居中对齐的白色。