認(rèn)識(shí)列表元素
? 在開(kāi)發(fā)一個(gè)網(wǎng)頁(yè)的過(guò)程中, 很多數(shù)據(jù)都是以列表的形式存在的
列表的實(shí)現(xiàn)方式
? 事實(shí)上現(xiàn)在很多的列表功能采用了不同的方案來(lái)實(shí)現(xiàn):
方案一: 使用div元素來(lái)實(shí)現(xiàn)(比如汽車之家, 知乎上的很多列表)
方案二: 使用列表元素, 使用元素語(yǔ)義化的方式實(shí)現(xiàn);
? 事實(shí)上現(xiàn)在很多的網(wǎng)站對(duì)于列表元素沒(méi)有很強(qiáng)烈的偏好, 更加不拘一格, 按照自己的風(fēng)格來(lái)布局****:
原因是列表元素默認(rèn)的CSS樣式, 讓它用起來(lái)不是非常方便;
比如列表元素往往有很多的限制, ul/ol中只能存放li, li再存放其他元素, 默認(rèn)樣式等;
雖然我們可以通過(guò)重置來(lái)解決, 但是我們更喜歡自由的div;
? HTML提供了3組常用的用來(lái)展示列表的元素
有序列表:ol、li
無(wú)序列表:ul、li
定義列表:dl、dt、dd
有序列表 – ol – li
? ol(ordered list)
- 有序列表，直接子元素只能是li
? li(list item)
- 列表中的每一項(xiàng)
無(wú)序列表 – ul - li
? ul (unordered list)
- 無(wú)序列表，直接子元素只能是li
? li(list item)
- 列表中的每一項(xiàng)
定義列表 – dl – dt - dd
? dl (definition list)
- 定義列表，直接子元素只能是dt、dd
? dt (definition term)
- term是項(xiàng)的意思, 列表中每一項(xiàng)的項(xiàng)目名
? dd (definition description)
列表中每一項(xiàng)的具體描述，是對(duì) dt 的描述、解釋、補(bǔ)充
一個(gè)dt后面一般緊跟著1個(gè)或者多個(gè)dd
認(rèn)識(shí)表格元素
? 在網(wǎng)頁(yè)中, 對(duì)于某些內(nèi)容的展示使用表格元素更為合適和方便
表格常見(jiàn)的元素
? 編寫表格最常見(jiàn)的是下面的元素:
? table
- 表格
? tr(table row)
- 表格中的行
? td****(table data)
- 行中的單元格
? 另外表格有很多相關(guān)的屬性可以設(shè)置表格的樣式, 但是已經(jīng)不推薦使用了
[圖片上傳失敗...(image-bfa83e-1689733231702)]
表格的其他元素
? thead
- 表格的表頭
? tbody
- 表格的主體
? tfoot
- 表格的頁(yè)腳
? caption
- 表格的標(biāo)題
?th
- 表格的表頭單元格
單元格合并
? 在某些特殊的情況下, 每個(gè)單元格占據(jù)的大小可能并不是固定的
一個(gè)單元格可能會(huì)跨多行或者多列來(lái)使用;
? 比如下面的表格
? 這個(gè)時(shí)候我們就要使用單元格合并來(lái)完成;
如何使用單元格合并呢?
? 單元格合并分成兩種情況:
跨列合并: 使用colspan
? 在最左邊的單元格寫上colspan屬性, 并且省略掉合并的td;
跨行合并: 使用rowspan
? 在最上面的單元格協(xié)商rowspan屬性, 并且省略掉后面tr中的td;
認(rèn)識(shí)表單
常見(jiàn)的表單元素
? form
- 表單, 一般情況下，其他表單相關(guān)元素都是它的后代元素
? input
- 單行文本輸入框、單選框、復(fù)選框、按鈕等元素
? textarea
- 多行文本框
? select、option
- 下拉選擇框
? button
- 按鈕
? label
- 表單元素的標(biāo)題
input元素的使用
? 表單元素使用最多的是input元素
? input元素有如下常見(jiàn)的屬性:
? type :input的類型
- text:文本輸入框(明文輸入)
- password:文本輸入框(密文輸入)
- radio:單選框
- checkbox:復(fù)選框
- button:按鈕
- reset:重置
- submit:提交表單數(shù)據(jù)給服務(wù)器
- file:文件上傳
? readonly:只讀
? disabled:禁用
? checked:默認(rèn)被選中
- 只有當(dāng)type為radio或checkbox時(shí)可用
? autofocus:當(dāng)頁(yè)面加載時(shí)，自動(dòng)聚焦
? name:名字
- 在提交數(shù)據(jù)給服務(wù)器時(shí)，可用于區(qū)分?jǐn)?shù)據(jù)類型
? value:取值
? type類型的其他取值和input的其他屬性, 查看文檔:
布爾屬性(boolean attributes)
? 常見(jiàn)的布爾屬性有 disabled、checked、readonly、multiple、autofocus、selected
? 布爾屬性可以沒(méi)有 屬性值 ， 寫上屬性名就代表使用這個(gè)屬性
- 如果要給布爾屬性設(shè)值，值就是屬性名本身
表單按鈕
? 表單可以實(shí)現(xiàn)按鈕效果:
- 普通按鈕(type=button):使用value屬性設(shè)置按鈕文字
- 重置按鈕(type=reset):重置它所屬form的所有表單元素(包括input、textarea、select)
- 提交按鈕(type=submit):提交它所屬form的表單數(shù)據(jù)給服務(wù)器(包括input、textarea、select)
? 我們也可以通過(guò)按鈕來(lái)實(shí)現(xiàn):
input和label的關(guān)系
? label元素一般跟input配合使用，用來(lái)表示input的標(biāo)題 ? labe可以跟某個(gè)input綁定，點(diǎn)擊label就可以激活對(duì)應(yīng)的input變成選中
radio的使用
? 我們可以將type類型設(shè)置為radio變成****單選框****:
- name值相同的radio才具備單選功能
checkbox 的使用
? 我們可以將type類型設(shè)置為 checkbox 變成多選框:
- 屬于同一種類型的checkbox，name值要保持一致
textarea的使用
? textarea的常用屬性:
cols:列數(shù)
rows:行數(shù)
? 縮放的 CSS 設(shè)置
禁止縮放:resize: none;
水平縮放:resize: horizontal;
垂直縮放:resize: vertical;
水平垂直縮放:resize: both;
select和option的使用
? option是select的子元素，一個(gè)option代表一個(gè)選項(xiàng)
? select常用屬性
multiple:可以多選
size:顯示多少項(xiàng)
? option常用屬性
- selected:默認(rèn)被選中
form常見(jiàn)的屬性
? form通常作為表單元素的父元素:
form可以將整個(gè)表單作為一個(gè)整體來(lái)進(jìn)行操作;
比如對(duì)整個(gè)表單進(jìn)行重置;
比如對(duì)整個(gè)表單的數(shù)據(jù)進(jìn)行提交;
? form常見(jiàn)的屬性如下:
-
action
- 用于提交表單數(shù)據(jù)的請(qǐng)求URL
-
method
- 請(qǐng)求方法(get和post)，默認(rèn)是get
-
target
- 在什么地方打開(kāi)URL(參考a元素的target)
請(qǐng)求方式的對(duì)比
