HTML怎么開發(fā)單選題頁面

這篇文章主要講解了“HTML怎么開發(fā)單選題頁面”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“HTML怎么開發(fā)單選題頁面”吧！

　　表格

　　table標(biāo)簽(表格)、

　　tr標(biāo)簽(行)、

　　td標(biāo)簽(標(biāo)準(zhǔn)單元格)、

　　caption標(biāo)簽(標(biāo)題)、

　　th標(biāo)簽(表頭單元格)。

　　為了更深一層對表格進(jìn)行語義化，HTML引入了thead、tbody和tfoot這三個標(biāo)簽。

　　這三個標(biāo)簽把表格分為三部分：表頭、表身、表腳。

　　table 表格

　　caption 標(biāo)題

　　thead 表頭(語義劃分)

　　tbody 表身(語義劃分)

　　tfoot 表尾(語義劃分)

　　tr 行

　　th 表頭單元格

　　td 表格單元格

　　姓名語文英語數(shù)學(xué)

　　小明808080小紅909090小杰100100100平均909090

　　表格樣式美化

　　table, th, td {

　　border: 1px solid black;

　　border-collapse: collapse;

　　}

　　th, td {

　　padding: 6px;

　　color: blue;

　　}

　　給表格添加邊框，設(shè)置字體顏色，

　　以及給單元格設(shè)置一些padding

　　表單

　　表單就是收集用戶信息的，就是讓用戶填寫的、選擇的。

　　所有的表單內(nèi)容，都要寫在form標(biāo)簽里面

　　form是英語表單的意思，form中間可以添加文本框、密碼框、單選按鈕、復(fù)選框、下拉列表、按鈕、文本域等內(nèi)容

　　1.文本框

　　2.密碼框

　　3.單選按鈕男 女

　　input的type的值如果是radio就是單選按鈕。

　　需要注意的是必須要有相同的name屬性，單選按鈕才能互斥。

　　label標(biāo)簽

　　男

　　女

　　input元素要有一個id，然后label標(biāo)簽就有一個for屬性，和id相同，就表示綁定了，這個label和input就有綁定關(guān)系了。點擊label標(biāo)簽中的文字就可以選擇相應(yīng)的單選框

　　5.4.復(fù)選框 睡覺

　　吃飯

　　復(fù)選框，最好也是有相同的name(便于服務(wù)器端收集用戶選中的信息)。

　　5.下拉列表

　　吃飯

　　睡覺

　　打豆豆

　　select就是“選擇”，

　　select標(biāo)簽和ul、ol、dl一樣，都是組標(biāo)簽

　　option“選項”。

　　6.文本域

　　cols屬性表示columns“列”，

　　rows屬性表示rows“行”。

　　值就是數(shù)字，表示行數(shù)和列數(shù)。標(biāo)簽對兒中間的文字是默認(rèn)出現(xiàn)在文本框的文字，一般不需要寫字。

　　7.按鈕

　　普通按鈕

　　button就是英語“按鈕”的意思。value的“值”就是按鈕上面顯示的文字。

　　提交按鈕

　　submit就是英語“提交”的意思。這個按鈕不需要寫value自動就有“提交”文字。這個按鈕點擊，表單會提交到服務(wù)器。

　　重置按鈕

　　reset就是“復(fù)位”“重置”的意思，可以重置前面各個表單元素中填寫的值。

　　只讀和禁用

　　項目實戰(zhàn)

　　制作商品搜索表單

　　search-form.css.search{

　　height: 40px;

　　width: 420px;

　　margin: 0 auto;

　　margin-top: 60px;

　　}

　　.search .input{

　　border: 3px solid red;

　　width: 300px;

　　height: 36px;

　　font-size: 20px;

　　}

　　.search .btn{

　　height: 44px;

　　width: 100px;

　　border:0;

　　background-color: red;

　　color: white;

　　font-size: 18px;

　　font-weight: bold;

　　margin-left: -4px;

　　vertical-align: top;

　　letter-spacing: 6px;

　　}

　　youlu-search-form.html

　　Document

感謝各位的閱讀，以上就是“HTML怎么開發(fā)單選題頁面”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對HTML怎么開發(fā)單選題頁面這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！