1. 表格
常見元素:
table 表格
tr (table row) 表格中的行;
td (table data) 行中的單元格;
thead 表格的表頭;
th 表格的表頭單元格;
tbody 表格的主體;
tfoot 表格的頁腳;
caption 表格的標(biāo)題;
合并邊框;
table { border-collapse: collapse; }
單元格的合并
- 跨列合并: 使用colspan
在最左邊的單元格寫上colspan屬性, 并且省略掉合并的td; -
跨行合并: 使用rowspan
在最上面的單元格協(xié)商rowspan屬性, 并且省略掉后面tr中的td;
2.表單
? form 表單, 一般情況下得封，其他表單相關(guān)元素都是它的后代元素
? input 單行文本輸入框底燎、單選框、復(fù)選框、按鈕等元素
? textarea 多行文本框
? select、option 下拉選擇框
? button 按鈕
? label 表單元素的標(biāo)題
input元素
input元素有如下常見的屬性:
type：input的類型
? text：文本輸入框（明文輸入）
? password：文本輸入框（密文輸入）
? radio：?jiǎn)芜x框
? checkbox：復(fù)選框
? button：按鈕
? reset：重置
? submit：提交表單數(shù)據(jù)給服務(wù)器
? file：文件上傳常見屬性
? readonly：只讀
? disabled：禁用
? checked：默認(rèn)被選中 只有當(dāng)type為radio或checkbox時(shí)可用
? autofocus：當(dāng)頁面加載時(shí)，自動(dòng)聚焦
? name：名字 在提交數(shù)據(jù)給服務(wù)器時(shí)，可用于區(qū)分?jǐn)?shù)據(jù)類型
? value：取值type類型的其他取值和input的其他屬性, 查看文檔:
<input>：輸入（表單輸入）元素 - HTML（超文本標(biāo)記語言） | MDN (mozilla.org)
3. 布爾屬性（boolean attributes）
常見的布爾屬性有disabled柬讨、checked、readonly袍啡、multiple踩官、autofocus、selected
布爾屬性可以沒有屬性值，寫上屬性名就代表使用這個(gè)屬性
4. 表單按鈕
1. 表單可以實(shí)現(xiàn)按鈕效果:
- 普通按鈕（type=button）：使用value屬性設(shè)置按鈕文字
- 重置按鈕（type=reset）：重置它所屬form的所有表單元素（包括input、textarea、select）
-
提交按鈕（type=submit）：提交它所屬form的表單數(shù)據(jù)給服務(wù)器（包括input、textarea铭拧、select）
2. 我們也可以通過按鈕來實(shí)現(xiàn):
5. input和label的關(guān)系
? label元素一般跟input配合使用，用來表示input的標(biāo)題
? labe可以跟某個(gè)input綁定(for=id)敦间，點(diǎn)擊label就可以激活對(duì)應(yīng)的input變成選中
6. radio的使用
name值相同的radio才具備單選功能
7. checkbox的使用
屬于同一種類型的checkbox蜓谋，name值要保持一致
8. textarea的使用
-
textarea的常用屬性:
- cols：列數(shù)
- rows：行數(shù)
-
縮放的CSS設(shè)置
- 禁止縮放：resize: none;
- 水平縮放：resize: horizontal;
- 垂直縮放：resize: vertical;
- 水平垂直縮放：resize: both;
9. select和option的使用
- option是select的子元素，一個(gè)option代表一個(gè)選項(xiàng)
- select常用屬性
- multiple：可以多選
- size：顯示多少項(xiàng)
- option常用屬性
- selected：默認(rèn)被選中
10. form常見的屬性
- form常見的屬性如下:
- action
- 用于提交表單數(shù)據(jù)的請(qǐng)求URL
- method
- 請(qǐng)求方法（get和post）偷拔，默認(rèn)是get
- target
- 在什么地方打開URL（參考a元素的target）
