上一篇稍微說了一下HTML和標籤，這一篇進行一次簡單的總結，並且初識css。

 一。首先說一下表格標籤即<table></table>標籤

①.

<table>...</table>:整個標籤是以<table>標記開始、以</table>標記結束。

<tr>...</tr>:表格的行，所以一個表格中有幾個<tr>就表示有幾行。

<td>...</td>：表格的單元格，一行中可以包含多個<td>...</td>。

表格細分為頭部<thead>...</thead>,身體<tbody>...<tbody>,尾部<tfoot>...</tfoot>。

注意：在table表格沒有新增css樣式之前，原生的表格在瀏覽器中顯示都是沒有表格線的。

②.

表格可以新增標題和摘要：

摘要：摘要的內容是不會出現在瀏覽器頁面中的，他的作用只是增加表格的可讀性(語義化)，使得搜尋引擎更好讀懂表格的內容。

<table summary="表格簡介文字">

標題：用於描述表格內容，標題的顯示位置是在表格的上方

<table>

<caption>標題文字</caption>

<tr>

<td>...</td>

...

</tr>

....

</table>

後來對錶格的結構進行了簡化，去掉了頭部和尾部，只保留了身體部分。

在有的網上對<tbody>...</tbody>有過這樣的描述：當表格內容非常多時，表格會下載一點顯示。但是如果加上<tbody>標籤後會等表格全部內容載入完成後才顯示。

詳細的完整結構位:

<table>

   <thead>

<tr>

<td>...</td>

....

</tr>

....

</thead>

<tbody>

<tr>

<td>...</td>

....

</tr>

....

</tbody>

<tfoot>

<tr>

<td>...</td>

...

</tr>

.....

</tfoot>

</table>

後來因為該種結構實在是太過於複雜。所以對錶格的結構進行了簡化。

簡化後的表格結構為：

    <table>
<tr>
<td>...</td>
...
</tr>
...
</table>

③.table標籤的屬性：

border:0 邊框

cellspacing:0 單元格與單元格之間的間距

cellpadding:0 內容到邊框的距離

width:200       表格的寬度

align:left/right/center 表格的對齊方式(水平)

bordercolor 邊框的顏色

bgcolor 背景顏色

background 背景影象

     tr的屬性：

height 高度

align 水平對齊方式

valign 垂直對齊方式

bgcolor 背景顏色

background 背景圖片

     td的屬性：

width 寬度

height

align

valign

bgcolor

background

④.表格的高階應用：

合併單元格：

水平合併：colspan="數字"

垂直合併：rowspan="數字"

表格的巢狀

表格巢狀佈局：該佈局方式有些麻煩，所以這樣的佈局方式現在幾乎不會用了。

注意：表格佈局基本不用但是表格的用處還是很大的。

二。另外一個重要的標籤：表單標籤

表單的作用：負責收集資料

form標籤：

      form的屬性：

method="get/post"

action="提交的路徑"

target="_blank/_self"

name=" "

簡單介紹一下get和post的區別：

get:

1.通過位址列提交(我們可以在位址列看到提交的內容)

2.不安全

3.資料量小

post:

1.比較安全

2.資料量比較大

注意：這只是最簡單的區別。複雜的可以去google。

              form的元素： 

文字框：<input type="text" name=" " value=" "/>

密碼框：<input type="possword" name=" " value=" "/>

單選按鈕：<input type="radio" name=" " value=" "/>

複選按鈕：<input type="checkbox" name=" " value=" "/>

檔案域：<input type="file" name=" " value=" "/>

下拉框：<select  name=" ">

<option value=" ">請選擇</option>

.....

      </select>

文字域：(文字框的放大版)

<textarea cols="數字" rows="數字" name=" ">內容</textarea>

提交按鈕：<input type="submit" value="提交"/>

重置按鈕：<input type="reset" value="重置"/>

普通按鈕:<input type="button" value=" "/>

影象域按鈕:<input type="image" src="圖片的路徑"/>

按鈕:<button>文字內容</button>

單選按鈕和複選按鈕的屬性:checked

下拉框的屬性：selected

文字框的顯示寬度屬性：size

下拉框裡option的顯示個數屬性：size

文字框最多輸入字數屬性:maxlength

三。標籤的分類

塊級元素(大標籤/大盒子)：

1.可以巢狀塊級元素和行內元素

2.是在不同行顯示的

3.具有寬和高的屬性

常見的大盒子：

div, table, ul, li, ol, dl, dd, dt, p, form, h1-h6

行內元素(內聯元素小標籤、小盒子)

1.不能巢狀塊級元素，但是可以巢狀行內元素

2.在同一行顯示

3.沒有寬和高的屬性

常見的小盒子：

span, a, strong, b, i, em

行內塊級元素:

1.在同一行顯示

常見的元素：

img， input, textarea, select

五.巢狀的原則

1.不能交叉巢狀

2.塊級元素可以巢狀行內元素，行內元素不能巢狀塊級元素

3.h1-h6不能巢狀塊級元素

4.p不能巢狀塊級元素