1.3 常用HTML標籤2：表格和列表

尹成發表於2018-11-09
HTML

html列表

有序列表

在網頁上定義一個有編號的內容列表可以用<ol>、<li>配合使用來實現，程式碼如下：

<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>

在網頁上生成的列表，每條專案上會按1、2、3編號，有序列表在實際開發中較少使用。

無序列表

在網頁上定義一個無編號的內容列表可以用<ul>、<li>配合使用來實現，程式碼如下：

<ul>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ul>

在網頁上生成的列表，每條專案上會有一個小圖示，這個小圖示在不同瀏覽器上顯示效果不同，所以一般會用樣式去掉預設的小圖示，如果需要圖示，可以用樣式自定義圖示，從而達到在不同瀏覽器上顯示的效果相同,實際開發中一般用這種列表。

定義列表

定義列表通常用於術語的定義。<dl>標籤表示列表的整體。<dt>標籤定義術語的題目。<dd>標籤是術語的解釋。一個<dl>中可以有多個題目和解釋，程式碼如下：

<h3>前端三大塊</h3>
<dl>
    <dt>html</dt>
    <dd>負責頁面的結構</dd>
    <dt>css</dt>
    <dd>負責頁面的表現</dd>
    <dt>javascript</dt>
    <dd>負責頁面的行為</dd>
</dl>

html表格

table常用標籤

1、table標籤：宣告一個表格

2、tr標籤：定義表格中的一行

3、td和th標籤：定義一行中的一個單元格，td代表普通單元格，th表示表頭單元格

table常用屬性

1、border 定義表格的邊框

2、cellpadding 定義單元格內內容與邊框的距離

3、cellspacing 定義單元格與單元格之間的距離

4、align 設定單元格中內容的水平對齊方式,設定值有：left | center | right

5、valign 設定單元格中內容的垂直對齊方式 top | middle | bottom

6、colspan 設定單元格水平合併

7、rowspan 設定單元格垂直合併

傳統佈局

傳統的佈局方式就是使用table來做整體頁面的佈局，佈局的技巧歸納為如下幾點：

1、定義表格寬高，將border、cellpadding、cellspacing全部設定為0

2、單元格里面巢狀表格

3、單元格中的元素和巢狀的表格用align和valign設定對齊方式

4、通過屬性或者css樣式設定單元格中元素的樣式

傳統佈局目前應用

1、快速製作用於演示的html頁面

2、商業推廣EDM製作(廣告郵件)

table佈局例項（個人簡歷頁面佈局例項）

 

相關文章