本文介紹 列表、表格、表單的具體使用。
目錄
1. 列表
1.1 無序列表
1.2 有序列表
1.3 定義列表
2. 表格
2.1 基本使用
2.2 表格結構標簽
2.3 合并單元格
3. 表單
3.1 input標簽
3.2 input 標簽占位文本
3.3 單選框
3.4 上傳文件
3.5 多選框
3.6 下拉菜單
3.7 文本域
3.8 label 標簽
3.9 按鈕標簽
3.10 無語義的布局標簽
3.11 字符實體
1. 列表
布局內容整齊的區域
分為：無序、有序、定義列表
1.1 無序列表
標簽：ul 嵌套 li
ul 無序列表，li 列表條目
ul 只能包含 li，li 可以包含任何內容
<body><ul><li>列表條目1</li><li>列表條目2</li><li>列表條目3</li><!-- li獨占一行 --></ul>
</body>1.2 有序列表
規定順序 1 2 3...
標簽：ol 嵌套 li
<body><ol><li>步驟1</li><li>步驟2</li><li>步驟3</li><!-- 有順序123 ol只能包含li --></ol>
</body>1.3 定義列表
一般放在網頁底部 幫助中心
一個標題對應多個內容
標簽：dl 嵌套 dt dd
dl 是 定義列表
dt 是 定義列表的標題
dd 是 定義列表的描述/詳情
<body><dl><dt>服務中心</dt><!-- 沒有點和序號 --><dd>申請售后</dd><!-- 自動縮后一級 --><dd>售后政策</dd><!-- dl只能包含dt和dd dt和dd可以包含任何內容 --></dl>
</body>
2. 表格
與Excel表格類似
2.1 基本使用
標簽：table 嵌套 tr，tr 嵌套 td / th
table 是 表格，tr 是 行，th 是 表頭單元格，td 是內容單元格
?表格默認沒有邊框線，使用border屬性為其添加邊框線
<body><!-- 2.添加border屬性邊框線 --><table border="1"><tr><!-- 表頭內容 --><th>姓名</th><th>語文</th><th>數學</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>199</td></tr><tr><td>王五</td><td>98</td><td>99</td><td>197</td></tr></table>
</body>
2.2 表格結構標簽
用表格結構標簽把內容劃分區域，讓表格結構更清晰，語義更清晰（針對瀏覽器）
<body><!-- 添加border屬性邊框線 --><table border="1"><!-- 表頭內容 --><thead><tr><th>姓名</th><th>語文</th><th>數學</th><th>總分</th></tr></thead><!-- 表格內容 --><tbody><tr><td>張三</td><td>99</td><td>100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>100</td><td>199</td></tr></tbody><!-- 表格底部 --><tfoot><tr><td>王五</td><td>98</td><td>99</td><td>197</td></tr></tfoot></table>
</body>頁面效果和之前一樣 不過這種寫法是針對瀏覽器寫的
2.3 合并單元格
可以跨行合并 也可以跨列合并
步驟：
1. 明確合并目標
2. 保留最左最上的單元格，添加屬性（取值是數字，表示需要合并的單元格數量）
— 跨行合并 保留最上單元格，添加屬性 rowspan
— 跨列合并 保留最左單元格，添加屬性 colspan
3. 刪除其他單元格
注意：不能跨越結構標簽合并
<body><!-- 添加border屬性邊框線 --><table border="1"><!-- 表頭內容 --><thead><tr><th>姓名</th><th>語文</th><th>數學</th><th>總分</th></tr></thead><!-- 表格內容 --><tbody><tr><td>張三</td><td>99</td><!-- 1.保留最左最上單元格 跨行合并 --><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>總結</td><!-- 2.保留最左最上 跨列合并 --><td colspan="3">全市第一</td><!-- 刪除其他 --><!-- <td>全市第一</td><td>全市第一</td> --></tr></tfoot></table>
</body>
3. 表單
作用：收集用戶信息
使用：登錄頁面、注冊、搜索區域
能輸入 能選擇
3.1 input標簽
input標簽type屬性不同，則功能不同
<body>文本框:<!-- 1.輸入什么就顯示什么 2.單行輸入--><input type="text"><br><br>密碼框:<!-- 輸入的內容都是點 密碼 --><input type="password"><br><br>單選框:<!-- 目前并沒有實現真正的單選功能 后續涉及 --><input type="radio"><br><br>多選框:<input type="checkbox"><br><br>上傳文件:<!-- 點擊選擇文件后 可以上傳文件并顯示在后面 --><input type="file">
</body>
3.2 input 標簽占位文本
占位文本 placeholder 是 提示信息 的作用
<body>文本框:<!-- 提示色是灰色 輸入后輸入內容是黑色的 --><input type="text" placeholder="請輸入用戶名"><br><br>密碼框:<!-- 顯示文字灰色 輸入內容還是點 --><input type="password" placeholder="請輸入密碼">
</body>
3.3 單選框
radio
<body>性別:<!-- name實現單選功能 內容隨便寫 --><!-- checked是打開網頁時默認選擇的 --><input type="radio" name="gender" checked> 男<input type="radio" name="gender"> 女
</body>
3.4 上傳文件
file 默認時只能上傳一個文件，添加 multiple 屬性實現文件多選
3.5 多選框
默認選中：checked
3.6 下拉菜單
標簽：select 嵌套 option
select 是下拉菜單整體
option 是菜單的每一項
下拉菜單也支持默認選中功能
3.7 文本域
多行輸入文本的表單空件 可以換行
textarea
3.8 label 標簽
網頁中，某個標簽的說明文本
用label標簽綁定文字和表單控件的關系，增大表單控件的點擊范圍。
舉個例子：點擊性別是 一般必須點擊哪個單選按鈕才行，但是我們經過labei標簽后點擊它周圍的范圍，比如點擊“男”也可以直接選中，這就是增大了表單控件的點擊范圍。
有兩種寫法：
① label 只包裹內容，不包裹表單控件
設置 label 標簽的 for 屬性值和表單控件的 id 屬性值相同
② 直接 label 包裹所有內容 不需要 id 和其余內容
注：文本框、密碼框、上傳文件、單選框、多選框、下拉菜單、文本域等都可以
<body>性別:<!-- 完整寫法 --><input type="radio" name="gender" id="man"> <label for="man">男</label><!-- 點擊男也可以選中 --><!-- 簡單寫法 --><label><input type="radio" name="gender">女</label>
</body>
3.9 按鈕標簽
button 且也有 type 屬性值
目前只能演示 reset?
<body><!-- 3.放到form表單區域 --><!-- action是發送數據的地址 --><form action="">用戶名:<input type="text"><br><br>密碼:<input type="password"><br><br><!-- 1.如果省略 type 屬性 功能也是 提交 --><button type="submit">提交</button><!-- 2.但是實際點擊時無法重置 轉步驟3 --><!-- 4.放到form才能有效 --><button type="reset">重置</button><!-- 5.普通按鈕未來配合js使用 --><button type="button">普通按鈕</button></form>
</body>
3.10 無語義的布局標簽
只是布局網頁而已?
div? 獨占一行
span? 不換行
3.11 字符實體
顯示預留字符使用
本文介紹 列表、表格、表單的具體使用。
、調參方法)