表格表單及樣式重置、特性

1、表格 用table標簽,標簽 table的標簽基本特性是 display:table;

<thead> 表格頭部

<tbody> 表格主體

<tfoot> 表格尾部

<tr>行

<th>表格標題

<td>單元格

一般只用<tbody>

colspan 屬性規定單元格可橫跨的列數 只能放在th,td標簽中<th colspan='2'>

rowspan 屬性規定單元格可橫跨的行數 只能放在td標簽中<td colspan='2'>

例：

<table>

<thead>

<tr>

<th>

</th>

</tr>

</thead>

<tbody>

<tr>

<td>

</td>

</tr>

</tbody>

</table>

注意事項：

1、不要給table，th，td以外的標簽加樣式，會存在不兼容問題

標簽th,td有內邊距，使用時候去掉

2、單元格默認平分table寬度，高度 

3、th里面的文字默認加粗，并且左右上下居中顯示

4、td里面的文字默認上下居中，左右居左顯示

5、table決定了整個表格的寬度

6、table里面的單元格寬度會被轉化成百分比；

7、表格里面的每一列必須有寬度；保證表格的樣式不會被內容撐開太多

8、表格的同一豎列繼承最大寬度，同一橫行繼承最大高度

2.<form> 表單標簽

<form action="目標" method-"get" target="_blank"/>

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

<input type="text" name=""/>  文本框 文本內容只能為單行

<input type="password" name=""/>  密碼框

(

<input type="radio" name="gender" id="a"/><label for="a">男</label> 單選框

<input type="radio" name="gender"/ id="b"> <label for="b女</label>

)

</label>文字和單選按鈕相連接 點擊文字也能選到單選框

（

<input type="checkbox" name="" disabled/> 旅游

<input type="checkbox" name="" disabled/> 建設

<input type="checkbox" name="" checked/> 美食

check 默認選中 disabled 默認靜掉

）復選框

<input type="file" name=""/>上傳

<input src="" type="img" name=""/>圖片 也具備提交功能

<input type="button" name=""/> 按鈕功能 沒有任何功能

<input type="reset" name=""/>  重置 一般不用

<input type="hidden" name=""/> 一個隱藏按鈕 前端沒有 對于后臺有用處

(

<select>

<option>1</option>

<option>2</option>

<option selected>3</option>

</select>

) 下拉選框 沒加selected 默認第一行 加selected 會默認第3行

文本域 :<textarea></textarea>文本內容可以多行 

下滑 可以用overflow：auto 來處理 焦點框用outline：none 

存在一些兼容性問題

注意事項：

form標簽有外邊距

input有默認margin,padding

selct默認margin

textarea有默認margin，paddiing

form表單都支持寬高，都是一個inline-block屬性