2.2 用于布局的塊級標簽

常用于布局的塊級標簽包括無序列表、有序列表、表格、表單、分區(qū)<div>，這類標簽常用于布局網頁，組織HTML的內容結構。

2.2.1 無序列表

列表分為無序列表和有序列表。帶序號標志（如數(shù)字、字母等）的表項組成有序列表，否則為無序列表。

無序列表中每一個表項的前面是項目符號（如●、■等符號）。建立無序列表可使用<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種序號：數(shù)字、大寫英文字母、小寫英文字母、大寫羅馬字母和小寫羅馬字母。序號標簽默認為數(shù)字。

在<ol>后指定符號的樣式，可設定直到</ol>的表項加重記號。格式為：

在<li>后指定符號的樣式，可設定該表項前的加重記號。格式只需把上面的ol改為li。

【演練2-7】制作夢想櫥柜網銀在線支付步驟的有序列表，本例文件2-7.html在瀏覽器中顯示的效果如圖2-7所示。

代碼如下：

【說明】由于在<ol>后未指定符號的樣式，因此每個列表項顯示為默認的數(shù)字。

2.2.3 定義列表

定義列表又稱為釋義列表或字典列表，定義列表不是帶有前導字符的列項目，而是一列實物以及與其相關的解釋。當創(chuàng)建一個定義列表時，主要用到3個HTML標簽：<dl>標簽、<dt>和<dd>標簽。格式為：

在<dl>、<dt>和<dd>3個標簽組合中，<dt>是標題，<dd>是內容，<dl>可以看作是承載它們的容器。當出現(xiàn)多組這樣的標簽組合時，應盡量使用一個<dt>標簽配合一個<dd>標簽的方法。如果<dd>標簽中內容很多，可以嵌套<p>標簽使用。

【演練2-8】使用定義列表顯示夢想櫥柜客服中心的聯(lián)系電話和地址，本例文件2-8.html的瀏覽效果如圖2-12所示。

代碼如下：

在上面的示例中，<dl>列表中每一項的名稱不再是<li>標簽，而是用<dt>標簽進行標記，后面跟著由<dd>標簽標記的條目定義或解釋。默認情況下，瀏覽器一般會在左邊界顯示條目的名稱，并在下一行縮進顯示其定義或解釋。

2.2.4 嵌套列表

所謂嵌套列表就是無序列表與有序列表嵌套混合使用。嵌套列表可以把頁面分為多個層次，給人以很強的層次感。有序列表和無序列表不僅可以自身嵌套，而且彼此可互相嵌套。嵌套方式可分為：無序列表中嵌套無序列表、有序列表中嵌套有序列表、無序列表中嵌套無序列表、在有序列表中嵌套有序列表等方式，讀者需要靈活掌握。

【演練2-9】制作夢想櫥柜服務中心頁面，在無序列表中嵌套無序列表、有序列表和定義列表，本例文件2-9.html在瀏覽器中顯示的效果如圖2-9所示。

代碼如下：

2.2.5 表格

表格將文本和圖像按行、列排列，它與列表一樣，有利于表達信息。表格除了用來顯示數(shù)據(jù)外，還用于搭建網頁的結構，使整個頁面更規(guī)則地放置文字、圖像和空白，并使網頁的各個條目更清晰。

1.使用表格的優(yōu)點

（1）簡單通用

由于表格行列的結構簡單，并且在日常生活中也廣泛使用，設計人員對它的理解和編寫都很容易入手。

（2）結構穩(wěn)定

表格是由指定數(shù)目的行和列組成，每行的列數(shù)通常一致，同行單元格高度一致且水平對齊，同列單元格寬度一致且垂直對齊，這種嚴格的約束形成了一個不易變形的長方形盒子結構，堆疊排列起來結構很穩(wěn)定，如圖2-10所示，表格中的內容按照相應的行或列進行分類和顯示。

2.表格的基本語法

最簡單的表格僅包括行和列。表格的標簽為<table>，行的標簽為<tr>，表項的標簽為<td>。其中，<tr>是單標簽，一行的結束是新一行的開始。表項內容寫在<td>與</td>之間。<table>標簽必須成對使用，簡單表格的格式為：

在上面格式中，<caption>標簽用來給表格增加標題，其中的align屬性用來設置標題相對于表格水平方向的對齊方式，valign屬性用來設置標題相對于表格垂直方向的對齊方式。

表格是一行一行建立的，在每一行中填入該行每一列的表項數(shù)據(jù)。可以把表頭看作一行，只不過用的是<th>標簽。

在瀏覽器中顯示時，<th>標簽的文字按粗體顯示，<td>標簽的文字按正常字體顯示。

表格的整體外觀由<table>標簽的屬性決定。

border：定義表格邊框的粗細，n為整數(shù)，單位為像素。如果省略，則不帶邊框。

width：定義表格的寬度，x為像素數(shù)或百分數(shù)（占窗口的）。

height：定義表格的高度，y為像素數(shù)或百分數(shù)（占窗口的）。

cellspacing：定義表項間隙，i為像素數(shù)。

cellpadding：定義表項內部空白，j為像素數(shù)。

【演練2-10】在頁面中添加一個3行2列的表格，本例文件2-10.html在瀏覽器中顯示的效果如圖2-11所示。

代碼如下：

【說明】表格所使用的邊框粗細等樣式一般應放在專門的CSS樣式文件中（后續(xù)章節(jié)講解），此處講解這些屬性僅僅是為了演示表格案例中的頁面效果，在真正設計表格外觀的時候是通過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所示。

代碼如下：

【說明】表格跨行跨列以后，并不改變表格的特點。表格中同行的內容總高度一致，同列的內容總寬度一致，各單元格的寬度或高度互相影響，結構相對穩(wěn)定，不足之處是不能靈活地進行布局控制。

4.表格數(shù)據(jù)的分組標簽

表格數(shù)據(jù)的分組標簽包括<thead>、<tbody>和<tfooter>，主要用于對報表數(shù)據(jù)進行邏輯分組。其中，<thead>標簽對應報表的頁眉，即表格的表頭；<tbody>標簽對應報表的數(shù)據(jù)主體，即報表詳細的數(shù)據(jù)描述；<tfooter>標簽對應報表的頁腳，即對各分組數(shù)據(jù)進行匯總的部分。各分組標簽內由多行<tr>組成。

【演練2-14】制作一個櫥柜季度銷量數(shù)據(jù)報表，本例文件2-14.html在瀏覽器中顯示的效果如圖2-15所示。

代碼如下：

【說明】為了區(qū)分報表各部分的顏色，這里使用了“style”樣式屬性分別為<thead>、<tbody>和<tfooter>設置背景色，此處只是為了演示頁面效果。

5.表格內文字的對齊方式

默認情況下，表項居于單元格左端。可用列、行的屬性設置表項數(shù)據(jù)在單元格中的位置。

（1）水平對齊

表項數(shù)據(jù)的水平對齊通過標簽<th>、<td>和<tr>的align屬性實現(xiàn)。align的屬性值分別為：center（表項數(shù)據(jù)的居中）、left（左對齊）、right（右對齊）或justify（左右調整）。

（2）垂直對齊

表項數(shù)據(jù)的垂直對齊通過標簽<th>、<td>和<tr>的valign屬性實現(xiàn)。valign的屬性值分別為：top（靠單元格頂）、bottom（靠單元格底）、middle（靠單元格中）或baseline（同行單元數(shù)據(jù)項位置一致）。

6.表格在頁面中的對齊方式

前面介紹的是表格中的各個單元格的屬性。現(xiàn)在，把表格作為一個整體，介紹如何設置表格在頁面中的位置。與圖像一樣，表格在瀏覽器窗口中的位置也有3種：居左、居中和居右。使用<table>標簽的align屬性，設置表格在頁面中的位置，格式為：

當表格位于頁面的左側或右側時，文本填充在另一側；當表格居中時，表格兩邊沒有文本；當align屬性省略時，文本在表格的下面。

7.表格的應用

在講解了以上表格基本語法的基礎上，下面介紹表格在制作頁面中的應用，主要分為兩個方面：使用表格顯示數(shù)據(jù)和使用表格實現(xiàn)頁面局部布局。

（1）使用表格顯示數(shù)據(jù)

【演練2-15】制作櫥柜季度銷量一覽表，本例文件2-15.html在瀏覽器中顯示的效果如圖2-16所示。

代碼如下：

（2）使用表格實現(xiàn)頁面局部布局

使用表格也可以實現(xiàn)頁面局部布局，類似于商品分類、新聞列表這樣的效果，可以采用表格來實現(xiàn)。

【演練2-16】制作櫥柜分類展示頁面，本例文件2-16.html在瀏覽器中顯示的效果如圖2-17所示。

代碼如下：

【說明】在設計頁面時，常需要利用表格來定位頁面元素。使用表格可以導入表格化數(shù)據(jù)，設計頁面分欄，定位頁面上的文本和圖像等。使用表格布局具有結構相對穩(wěn)定、簡單通用等優(yōu)點，但使用嵌套表格布局時HTML層次結構復雜，代碼量非常大。因此，表格布局僅適用于頁面中數(shù)據(jù)規(guī)整的局部布局，而頁面的整體布局一般采用主流的Div+CSS布局，Div+CSS布局將在后續(xù)章節(jié)進行詳細講解。

2.2.6 表單

表單是用于實現(xiàn)瀏覽者與網頁制作者之間信息交互的一種網頁對象。在Internet上，表單被廣泛用于各種信息的搜集與反饋，如圖2-18所示的會員登錄表單。

1.表單的工作原理

表單的作用是從客戶端收集信息。當訪問者在表單中輸入信息，單擊提交按鈕后，這些信息將被發(fā)送到服務器，服務器端腳本或應用程序將對這些信息進行處理。服務器進行響應時，會將被請求信息發(fā)送回用戶（或客戶端），或者基于該表單內容執(zhí)行一些操作，表單的工作原理如圖2-19所示。

2.表單標簽

網頁上具有可輸入表項及項目選擇等控制所組成的欄目稱為表單。<form>標簽用于創(chuàng)建供用戶輸入的HTML表單。表單的基本格式為：

<form>標簽主要處理表單結果的處理和傳送，常用屬性的含義如下。

name屬性：表單的名字，在一個網頁中用于唯一識別一個表單。

action屬性：表單處理的方式，往往是E-mail地址或網址。

method屬性：表單數(shù)據(jù)的傳送方向，是獲得（GET）表單還是送出（POST）表單。

表單的具體用法將在第3章講解表單元素（行級標簽）時進行詳細介紹。

2.2.7 分區(qū)標簽<div>

前面講解的幾類塊級標簽一般用于組織小區(qū)塊的內容，為了方便管理，許多小區(qū)塊還需要放到一個大區(qū)塊中進行布局。分區(qū)標簽<div>常用于頁面布局時對區(qū)塊的劃分，它相當于一個大“容器”，可以容納無序列表、有序列表、表格、表單等塊級標簽，同時也可以容納普通的標題、段落、文字、圖片等內容。由于<div>標簽沒有明顯的外觀效果，所以需要為其添加CSS樣式屬性，才能看到區(qū)塊的外觀效果。

分區(qū)標簽的格式為：

其中，屬性align用來設置文本塊、文字段或標題在網頁上的對齊方式，取值為：left、center和right，默認為left。

【演練2-17】使用<div>標簽組織網頁內容，通過為其添加“style”樣式設置標簽的寬度、高度及背景色區(qū)塊的外觀效果。本例文件2-17.html在瀏覽器中顯示的效果如圖2-20所示。

代碼如下：

【說明】本例中設置了兩個分區(qū)：內容分區(qū)和版權分區(qū)。其中，定義內容分區(qū)標簽的樣式為style="width:500px;height:170px;background:#f96"，表示分區(qū)的寬度為500px、高度為170px及背景色為桔紅色；定義版權分區(qū)標簽的樣式為style="width:500px;height:50px; background:#69c;color:white;text-align:center"，表示分區(qū)的寬度為500px、高度為50px、背景色為藍色、文字為居中對齊的白色。