官术网_书友最值得收藏!

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所示。

圖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所示。

圖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所示。

圖2-8 頁面顯示效果

代碼如下:

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

2.2.4 嵌套列表

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

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

圖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屬性用來設置標題相對于表格垂直方向的對齊方式。

圖2-10 表格的基本結構

表格是一行一行建立的,在每一行中填入該行每一列的表項數(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所示。

圖2-11 頁面的顯示效果

代碼如下:

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

3.跨行跨列的表格

上面講解了表格的基本語法,但在實際應用中往往使用比較復雜的表格,經常需要把多個單元格合并為一個單元格,也就是要用到表格的跨行跨列功能。

(1)跨行

跨行是指單元格在垂直方向上合并,格式為:

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

【演練2-11】制作一個跨行展示櫥柜分類庫存的表格,本例文件2-11.html在瀏覽器中顯示的效果如圖2-12所示。

圖2-12 跨行的效果

代碼如下:

(2)跨列

跨列是指單元格在水平方向上合并,格式為:

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

【演練2-12】制作一個跨列展示櫥柜分類庫存的表格,本例文件2-12.html在瀏覽器中顯示的效果如圖2-13所示。

圖2-13 跨列的效果

代碼如下:

【說明】在編寫表格跨行跨列的代碼時,通常在需要合并的第一個單元格中,設置跨行或跨列屬性,例如,colspan="2"。

(3)跨行、跨列

【演練2-13】制作一個跨行跨列展示櫥柜分類庫存的表格,本例文件2-13.html在瀏覽器中顯示的效果如圖2-14所示。

圖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所示。

圖2-15 櫥柜季度銷量數(shù)據(jù)報表

代碼如下:

【說明】為了區(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-16 櫥柜季度銷量一覽表

代碼如下:

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

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

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

圖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-18 會員登錄表單

圖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所示。

圖2-20 使用<div>標簽組織網頁內容

代碼如下:

【說明】本例中設置了兩個分區(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、背景色為藍色、文字為居中對齊的白色。

主站蜘蛛池模板: 扎鲁特旗| 贵阳市| 乌恰县| 长葛市| 肃北| 鲁甸县| 安西县| 和田县| 莫力| 新乐市| 广西| 石景山区| 庆安县| 苏州市| 辽阳县| 绥中县| 拉萨市| 璧山县| 宝鸡市| 海口市| 海城市| 临夏县| 常德市| 瑞安市| 台北市| 兰考县| 花莲县| 荆州市| 游戏| 昌邑市| 印江| 怀仁县| 恩平市| 蚌埠市| 张掖市| 抚顺市| 石楼县| 当阳市| 南城县| 梓潼县| 松潘县|