2014年度辛星html教程夏季版第六節

標籤：style   blog   color   使用   2014   re   

   不知道這樣大家會不會感覺枯燥，總之不管大家怎麼樣，辛星始終會陪伴大家的，期待您的關注和支援，也衷心的希望我的部落格能讓您少走彎路，獲得更系統的知識。

***************表格*****************

1.在早些時候，那時候大家為了布局上的美觀，會經常使用表格來布局，因為表格的布局比較整齊，我們只需要把表格的邊框設定為0就可以讓內容顯示的很有條理了。

2.隨著div+css的流行，表格版面配置越來越不被人所喜歡，甚至有人特別排斥表格，本來該用表格的地方也不用表格了，其實大可不必那麼偏激，它也有它有用的一面，當然也有它不可取的一面。

3.我們table標籤來實現一個表格，然後我們可以指定它的border屬性，預設是無邊框的，即預設情況下表格是用於布局的。

4.我們用tr來表示表格的每一行，即tr標籤是嵌套在他table標籤裡面的。

5.而我們用td標籤來表示一個儲存格，即td標籤是嵌套在tr標籤裡面的，我們通常把內容寫到我們的td標籤中，而tr標籤僅僅相當於起到一個分行符號的作用。

 

******************樣本***************

1.比如下面我們定義一個三行兩列的表格：

<table border = "1">    <tr><td>姓名</td><td>性別</td></tr>    <tr><td>辛星</td><td>男</td></tr>    <tr><td>小倩</td><td>女</td></tr></table>

2.不知道讀者是否感覺有點彆扭，因為上述表格的”姓名“和”辛星“、”小倩“的作用是不同的，它有點類似於標題的感覺。

3.對於上述表格中的”姓名“和”性別“這種儲存格，我們可以用th標籤來代替td標籤，即我們把代碼寫成如下樣式：

<table border = "1">    <tr><th>姓名</th><th>性別</th></tr>    <tr><td>辛星</td><td>男</td></tr>    <tr><td>小倩</td><td>女</td></tr></table>

4.其實表格還有諸如表格的標題、頁首、頁尾等屬性，個人感覺不是很常用，就不講解了。

 

*****************列表*********************

1.HTML中我們支援有序列表、無序列表和定義列表。

2.所謂有序列表即一系列內容是用序號進行標識的，它用ol標籤來表示一個有序列表，用li來表示每一個清單項目。

3.這裡的ol是order list的意思，即”有序 列表“，而li是”list item“的意思，即”列表 元素“。

4.我們可以用ul來表示一個無序列表，每一個清單項目用li標籤來表示，這裡的ul中的u是un的第一個字母，表示否定，即沒有順序。

5.我們可以用dl來進行一個自訂欄表，其中的d是define的意思，即”定義“。

6.而dt標籤表示列表中的上層項目，dd標籤通常用來表示列表中的下層項目，而dt標籤和dd標籤都必須放在dl標籤對之間。

 

*************程式碼範例*************

1.首先是有序列表和無需列表，這裡僅以有序列表為例子進行說明：

<ol>    <li>辛星</li>    <li>小倩</li></ol>

2.然後就是對定義列表的代碼執行個體：

<dl><dt>中國城市</dt><dd>北京 </dd><dd>上海 </dd><dd>廣州 </dd><dt>美國城市</dt><dd>華盛頓 </dd><dd>芝加哥 </dd><dd>紐約 </dd></dl>

 

 

***************小結**************

1.本小節的前部分我們介紹了表格，後部分我們介紹了列表。

2.列表的應用，特別是無序列表，其應用比較廣泛，但是由於我們沒有涉及到css，因此先不講了，等後面再講解。