1.表格
表格的完整結構
<table>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
把td改成th,表示重要的單元格,呈現加粗效果,并居中顯示
table的屬性:
1.border 最外層的邊框
2.cellspacing 單元格與單元格之間的間距,默認是2px
3.cellpadding 內容到邊框的距離
4.width 表格的寬度(橫向)
5.align="left默認/center/right" 對齊
6.bgcolor 背景顏色
7.background 背景圖像
tr的屬性:改變整行的屬性
1.height
2.align 水平對齊
3.valign="top/middle/bottom" 垂直對齊
td的屬性:寬和高的改變會影響列和行
1.height
2.width
3.align 水平對齊
4.valign="top/middle/bottom" 垂直對齊
簡單的表格結構
<table border="0" cellpsdding="0" cellspacsing="0">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
表格的高級應用
1.合并單元格
> td屬性,水平合并:colspan="3"垂直合并:rowspan="2" 先把不同的內容剪切到一起
2.嵌套
2.form表單
1.雙標簽form的屬性:
name="隨便取,英文的就可以"
action="提交后臺處理程序" "jsp,aspx,php" "java c# php" "數據庫"
method="get/post" get通過地址欄提交數據,且在地址欄上顯示信息,不安全,提交的數據量有限制;
post通過action直接提交,不會顯示在地址欄上,相對安全,提交信息量較大
target="_blank/_self"
2.表單元素
文本框:<input type="text" name="" value="">
單選框:<input type="radio" name="" value="">選項 要求選項的name值要一樣,這樣才能單選
復選框:<input type="checkbox" name="" value="">選項 屬性中name的值盡量一樣,用value獲取值 屬性值加checked,默認選中
上傳文件:<input type="file" name="file">
密碼框:<input type="password" name="" value="">
隱藏域:<input type="hidden" name="content">
下拉框:<select name="down">
<option value="" selected>請選擇</option>
<option value="1">......</option>
<option value="2" selected>........</option>
<option value="3">........</option>
</select>
selected屬性表示默認選擇
文本域:<textarea 行rows="5" 列cols="8"></textarea>
對于文本域和文本框的屬性readonly表示只讀
重置按鈕:<input type="reset" value="重置">
提交按鈕:<input type="submit" value="提交">
普通按鈕:<input type="button" value="普通">
圖像域按鈕:<input type="image" src="圖片地址">
<a href="跳轉地址"></a>
3.標簽的表現分類
1、塊級元素(大標簽、大盒子)
div table h1-h6 p ul li ol dl dt dd
“form"這個塊元素比較特殊,它只能用來容納其他塊元素。
display:inline;這個屬性能夠修復著名的IE雙倍浮動邊界問題。
2、 行內元素(小標簽、小盒子)
span strong a i em
3、行內塊級元素
img select input textarea
特點:1.塊級元素在不同行顯示,可以嵌套塊級元素及行內元素,
2.行內元素不能嵌套塊級元素,可以嵌套行內元素
4.標簽的嵌套規則
>1.不能交叉嵌套
2.同特點
3.h1-h6,p,dt只能嵌套行內元素,不能嵌套塊級元素