表格表單的用法總結(jié)

一.表格

表格就是用來表示一些格式化的數(shù)據(jù)的,在網(wǎng)頁里也可以創(chuàng)建表格

1,使用table標簽創(chuàng)建表格

2,使用tr表示表格一行,有幾行有幾個tr

3,在tr中使用td來創(chuàng)建單元格,有幾個單元格就有幾個td

4,表格創(chuàng)建默認沒有邊框

5,用css來創(chuàng)建單元格或者在table里面加borde=“1”(不常用)

6,在table里加width=“40%”表示在窗口里寬度占40%

7,合并兩個單元格:先刪除其中一個單元格,然后讓另一個格占領(lǐng)兩個位置,在td中加入colspan=“2”,row用來縱向合并單元格

8,table和td邊框之間默認有一個距離,通過border-spaceing屬性可以設(shè)置這個距離

9,border-collapse可以用來設(shè)置表格合并,此時border自動失效

10,th是特殊的td,表標題

11,tr:nth-child(even){background-color: #bfa;}可以給偶數(shù)行設(shè)綠色背景

12,tr:hover{background-color: #ff0; }可以是鼠標指定行背景變黃色

13,表頭,表格主體,表格底部分別為thead,tbody,tfoot。表頭,表格主體,表格底部不管什么情況都永遠分別顯示在頭部,中部,底部。

14,如果表格中沒有tbody,瀏覽器會自動在表格中添加tbody,并且將所有tr都放到tbody中,所以tr不是table的子元素,而是tbody的子元素。





15,表格可以給頁面布局,但是不常用,被css所淘汰。




二,表單

1,表單的作用就是用來將用戶的信息提交給服務(wù)器的。

2,使用form標簽創(chuàng)建一個表單,form標簽必須指定一個action屬性,該屬性指向的是一個服務(wù)器的地址,但我們提交表單時將會提交到action屬性對應(yīng)的地址。

3,使用form創(chuàng)建的是一個空白的表單,我們還需要添加不同的表單項。

4,使用input來創(chuàng)建一個文本框,他的type屬性是text,如果希望表單項中的數(shù)據(jù)會提交到服務(wù)器中,還必須給表單項指定一個name屬性,name表示提交內(nèi)容的名字

5,提交按鈕可以將表單中的信息提交給服務(wù)器,使用input創(chuàng)建一個提交按鈕,它的type屬性值是submit,提交按鈕可以通過value屬性來指定按鈕上的文字

6,使用input創(chuàng)建一個密碼框,它的type屬性是password

7,使用input來創(chuàng)建一個單選按鈕,它的type屬性使用radio,單選按鈕通過name進行分組,name屬性相同是一組按鈕,還需要指定一個value屬性,這樣被選中的表單項會以value屬性值提交給服務(wù)器。

8,使用input創(chuàng)建一個多選框,它的type屬性使用checkbox,記得加name和value

9,使用select來創(chuàng)建一個下拉列表,在下拉列表中使用option標簽來創(chuàng)建一個一個列表項,下拉列表的name屬性要指定給select,而value的值要指定給option。

10,如果希望在單選按鈕或者是多選框中指定默認的選項,添加checked屬性

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容