列表、表格、表單

01-列表

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

列表分類：無序列表、有序列表、定義列表。

無序列表

作用：布局排列整齊的不需要規(guī)定順序的區(qū)域。

標(biāo)簽：ul 嵌套 li，ul 是無序列表，li 是列表?xiàng)l目。

<ul><li>第一項(xiàng)</li><li>第二項(xiàng)</li><li>第三項(xiàng)</li>……
</ul>

注意事項(xiàng)：

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

有序列表

作用：布局排列整齊的需要規(guī)定順序的區(qū)域。

標(biāo)簽：ol 嵌套 li，ol 是有序列表，li 是列表?xiàng)l目。

<ol><li>第一項(xiàng)</li><li>第二項(xiàng)</li><li>第三項(xiàng)</li>……
</ol>

注意事項(xiàng)：

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

定義列表

標(biāo)簽：dl 嵌套 dt 和 dd，dl 是定義列表，dt 是定義列表的標(biāo)題，dd 是定義列表的描述 / 詳情。

<dl><dt>列表標(biāo)題</dt><dd>列表描述 / 詳情</dd>……
</dl>

注意事項(xiàng)：

• dl 里面只能包含dt 和 dd
• dt 和 dd 里面可以包含任何內(nèi)容

實(shí)例：

    <dl><dt>北京市</dt><dd>東城區(qū)</dd><dd>西城區(qū)</dd><dd>海淀區(qū)</dd><dd>朝陽(yáng)區(qū)</dd><dd>豐臺(tái)區(qū)</dd></dl>

效果：

02-表格

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

提示：在網(wǎng)頁(yè)中，表格默認(rèn)沒有邊框線，使用 border 屬性可以為表格添加邊框線。

<table border="1"><tr><th>姓名</th><th>語文</th><th>數(shù)學(xué)</th><th>總分</th></tr><tr><td>張三</td><td>99</td><td>100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>100</td><td>198</td></tr><tr><td>總結(jié)</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr>
</table>

效果展示：

表格結(jié)構(gòu)標(biāo)簽-了解

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

提示：表格結(jié)構(gòu)標(biāo)簽可以省略。

合并單元格

作用：將多個(gè)單元格合并成一個(gè)單元格，以合并同類信息。

合并單元格的步驟：

1. 明確合并的目標(biāo)
2. 保留最左最上的單元格，添加屬性（取值是數(shù)字，表示需要合并的單元格數(shù)量）
   • 跨行合并，保留最上單元格，添加屬性 rowspan
   • 跨列合并，保留最左單元格，添加屬性 colspan
3. 刪除其他單元格

<table border="1"><thead><tr><th>姓名</th><th>語文</th><th>數(shù)學(xué)</th><th>總分</th></tr></thead><tbody><tr><td>張三</td><td>99</td><td rowspan="2">100</td><td>199</td></tr><tr><td>李四</td><td>98</td><!-- <td>100</td> --><td>198</td></tr></tbody><tfoot><tr><td>總結(jié)</td><td colspan="3">全市第一</td><!-- <td>全市第一</td><td>全市第一</td> --></tr></tfoot>
</table>

注意：不能跨表格結(jié)構(gòu)標(biāo)簽合并單元格（thead、tbody、tfoot）。

03-表單

作用：收集用戶信息。

使用場(chǎng)景：

• 登錄頁(yè)面
• 注冊(cè)頁(yè)面
• 搜索區(qū)域

input 標(biāo)簽

input 標(biāo)簽 type 屬性值不同，則功能不同。

<input type="..." >

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

占位文本：提示信息，文本框和密碼框都可以使用。

<input type="..." placeholder="提示信息">

單選框

常用屬性

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

提示：name 屬性值自定義。

上傳文件

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

<input type="file" multiple>

多選框

多選框也叫復(fù)選框，默認(rèn)選中：checked。

<input type="checkbox" checked> 敲前端代碼

下拉菜單

標(biāo)簽：select 嵌套 option，select 是下拉菜單整體，option是下拉菜單的每一項(xiàng)。

<select><option>北京</option><option>上海</option><option>廣州</option><option>深圳</option><option selected>武漢</option>
</select>

默認(rèn)顯示第一項(xiàng)，selected 屬性實(shí)現(xiàn)默認(rèn)選中功能。

文本域

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

<textarea>默認(rèn)提示文字</textarea>

注意點(diǎn)：

• 實(shí)際開發(fā)中，使用 CSS 設(shè)置 文本域的尺寸
• 實(shí)際開發(fā)中，一般禁用右下角的拖拽功能

label 標(biāo)簽

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

經(jīng)驗(yàn)：用 label 標(biāo)簽綁定文字和表單控件的關(guā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)簽包裹文字和表單控件，不需要屬性

<label><input type="radio"> 女</label>

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

按鈕

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

<!-- form 表單區(qū)域 -->
<!-- action="" 發(fā)送數(shù)據(jù)的地址 -->
<form action="">用戶名：<input type="text"><br><br>密碼：<input type="password"><br><br><!-- 如果省略 type 屬性，功能是 提交 --><button type="submit">提交</button><button type="reset">重置</button><button type="button">普通按鈕</button>
</form>

提示：按鈕需配合 form 標(biāo)簽（表單區(qū)域）才能實(shí)現(xiàn)對(duì)應(yīng)的功能。

04-語義化

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

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

• div：獨(dú)占一行
• span：不換行

<div>div 標(biāo)簽，獨(dú)占一行</div>
<span>span 標(biāo)簽，不換行</span>

有語義的布局標(biāo)簽

05-字符實(shí)體