列表，表格與表單

一、列表

列表的作用：布局內(nèi)容排列整齊的區(qū)域

無序：布局排列整齊的不需要規(guī)定順序的區(qū)域，標(biāo)簽ul嵌套li，ul是無序列表，li是列表?xiàng)l目

ul標(biāo)簽里只能包含li標(biāo)簽，li標(biāo)簽里面可以包含任何內(nèi)容

有序：布局排列整齊的需要規(guī)定順序的區(qū)域，標(biāo)簽ol嵌套li，ol是無序列表，li是列表?xiàng)l目

ol標(biāo)簽里只能包含li標(biāo)簽，li標(biāo)簽里面可以包含任何內(nèi)容

定義列表：標(biāo)簽dl嵌套dt和dd，dl是定義列表，dt是定義列表的標(biāo)題，dd是定義列表的描述/詳情。dl里面只能包含dt和dd，dt和dd里面可以包含任何內(nèi)容

二、表格

標(biāo)簽：table嵌套tr，tr嵌套td/th

標(biāo)簽名????說明

table????????表格

tr????????????行

th????????????表頭單元格

td????????????內(nèi)容單元格

表格結(jié)構(gòu)標(biāo)簽（了解）：用表格結(jié)構(gòu)標(biāo)簽把內(nèi)容劃分區(qū)域，讓表格機(jī)構(gòu)更清晰語義更清晰

thead????表格頭部????表格頭部內(nèi)容

tbody????表格主體????主要內(nèi)容區(qū)域

tfoot????表格底部????匯總信息區(qū)域

三、合并單元格

將多個(gè)單元格合并成一個(gè)單元格，以合并同類信息（跨行合并，跨列合并）

合并單元格的步驟：

1. 明確合并到目標(biāo)

2. 保留最左最上的單元格，添加屬性（取值是數(shù)字，表示需要合并的單元格數(shù)據(jù)），跨行合并，保留最上單元格，添加屬性rowspan；跨列合并，保留最左單元格，添加屬性colspan

3. 刪除其他單元格

四、表單

作用：收集用戶信息。

使用場景：登錄頁面，注冊頁面，搜索區(qū)域

1.input標(biāo)簽

<input type="text"> ''''引號內(nèi)為屬性值

type屬性值????????說明

text????????????????????文本框，用于輸入單行文本

password????????????密碼框

radio????????????????????單選框

checkbox????????????多選框

file????????????????????????上傳文件

2.input標(biāo)簽占位文本

<input placeholder="提示信息">

文本框和密碼框都可以使用

3.單選框radio

常用屬性：

屬性名????????作用????????特殊說明

name????????控件名稱????控件分組，同組只能選中一個(gè)（單選功能）

checked????默認(rèn)選中????屬性名和屬性值相同，簡寫為一個(gè)單詞

?<input type="radio" name="gender" checked>男

?<input type="radio" name="gender">女

4.上傳文件file

默認(rèn)情況下，文件上傳表單控件只能上傳一個(gè)文件，添加multiple屬性可以實(shí)現(xiàn)文件多選功能

<input type="file" multiple>

5.下拉菜單

標(biāo)簽：select嵌套o(hù)ption，select是下拉菜單整體，option是下拉菜單的每一項(xiàng)，selected是默認(rèn)選項(xiàng)

name和id是用來給后臺發(fā)送數(shù)據(jù)的選項(xiàng)，現(xiàn)在先不用

<select name="" id=""></select>

6.文本域

作用：多行輸入文本的表單控件

textarea雙標(biāo)簽，name=""?id=""?cols="30"?rows="10"給后臺發(fā)送數(shù)據(jù)用和設(shè)置尺寸用，一般用css設(shè)置尺寸，現(xiàn)在不用，里面輸入默認(rèn)提示文字

<textarea name="" id="" cols="30" rows="10"></textarea>

7.label標(biāo)簽

作用：網(wǎng)頁中，某個(gè)標(biāo)簽的說明文本

<label for=""></label>

經(jīng)驗(yàn)：用label標(biāo)簽綁定文字和表單控件的關(guān)系，增大表單控件的點(diǎn)擊范圍，提升用戶體驗(yàn)

增大點(diǎn)擊范圍寫法一：

label標(biāo)簽之包裹內(nèi)容，不包裹表單控件

設(shè)置label標(biāo)簽的for屬性值和表單控件的id屬性值相同

<input?type="radio" id="man">

<label for="man">男</label>

寫法二：

使用label標(biāo)簽包裹文字和表單控件，不需要for屬性，刪掉

<label><input type="radio" name="gender" id="female">女</label>

提示：支持label標(biāo)簽增大點(diǎn)擊范圍的表單控件：文本框，密碼框，上傳文件，單選框，多選框，下拉菜單，文本域等

8.按鈕

<button type="button">按鈕</button>

type屬性值

submit????????提交按鈕，默認(rèn)功能，點(diǎn)擊數(shù)據(jù)提交到后臺

reset????????重置按鈕，點(diǎn)擊后恢復(fù)表單控件默認(rèn)值

button????????普通按鈕，默認(rèn)沒有功能，可以配合js使用

9.無語義的布局標(biāo)簽

作用：布局網(wǎng)頁（劃分網(wǎng)頁區(qū)域，擺放內(nèi)容）

div?大盒子，雙標(biāo)簽

span 小盒子，雙標(biāo)簽

10.字符實(shí)體

空格 &nbsp

<&lt

>&gt