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