HTML 列表、表格、表单
1 列表标签
作用：布局内容排列整齐的区域
列表分类：无序列表、有序列表、定义列表。
例如：
1.1 无序列表
标签：ul 嵌套 li，ul是无序列表，li是列表条目。
注意事项：
- ul 标签里面只能包裹 li 标签
- li 标签里面可以包裹任何内容
1.2 有序列表
作用：布局排列整齐的需要规定顺序的区域，
标签：ol 嵌套 li，ol 是有序列表，li是列表条目。
注意事项：
- ol 标签里面只能包裹 li 标签
- li 标签里面可以包裹任何内容
1.3 定义列表
标签：dl 嵌套 dt 和 dd，dl是定义列表，dt 是定义列表的标题，dd是定义列表的描述／详情。
注意事项：
- dl 里面只能包含 dt 和 dd
- dt 和 dd 里面可以包含任何内容
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>无序列表</title>
</head>
<body><dl><dt>服务中心</dt><dd>申请售后</dd><dd>售后政策</dd><dd>订单查询</dd><dd>以旧换新</dd></dl>
</body>
</html>运行效果：
2 表格
标签：table 嵌套 tr，tr 嵌套 td / th
提示：在网页中，表格默认没有边框线，使用 border 属性可以为表格添加边框线。
例子：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格</title>
</head>
<body><table border="1"><!-- 有几行，就写几个 tr 标签 --><!-- 每个 tr 标签内，再分是表头 th，还是内容 td --><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>198</td></tr><tr><td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></table>
</body>
</html>运行效果：
2.1 表格结构标签 了解
但这是给浏览器看的，在网页中的展示并不会有什么变化
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格</title>
</head>
<body><table border="1"><!-- 有几行，就写几个 tr 标签 --><!-- 每个 tr 标签内，再分是表头 th，还是内容 td --><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>198</td></tr></tbody><tfoot><tr><td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></tfoot></table>
</body>
</html>2.2 合并单元格
作用：将多个单元格合并成一个单元格，以合并同类信息
步骤：
- 保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量
- 跨行合并，保留最上单元格，添加属性 rowspan
- 跨列合并，保留最左单元格，添加属性 colspan
- 删除其他单元格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格</title>
</head>
<body><table border="1"><!-- 有几行，就写几个 tr 标签 --><!-- 每个 tr 标签内，再分是表头 th，还是内容 td --><thead><tr><th>姓名</th><th>语文</th><th>数学</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>198</td></tr></tbody><tfoot><tr><td>总结</td><td colspan="3">全市第一</td></tr></tfoot></table>
</body>
</html>运行效果：
3 表单
- 作用：收集用户信息
- 使用场景：登录页面、注册页面、搜索区域
3.1 input 标签
input 标签 type 属性值不同，则功能不同
3.1.1 type 属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>input 基本使用</title>
</head>
<body>文本框：<input type="text"><br><br>密码框：<input type="password"><br><br>单选框：<input type="radio"><br><br>多选框：<input type="checkbox"><br><br>上传文件：<input type="file">
</body>
</html>运行效果：
3.1.2 input 标签占位文本
占位文本：即提示信息，文本框和密码框都可以使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>占位符</title>
</head>
<body>文本框：<input type="text" placeholder="请输入用户名"><br><br>密码框：<input type="password" placeholder="请输入密码">
</body>
</html>运行效果：
3.1.3 radio 单选框
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>radio</title>
</head>
<body>性别：<!-- name 属性保证单选 --><!-- checked 表示刚进入网页的默认选项 --><input type="radio" name="gender"> 男 <input type="radio" name="gender" checked> 女
</body>
</html>运行效果：
3.1.4 多文件上传
默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现 文件多选 功能。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>多文件上传</title>
</head>
<body>上传文件：<input type="file" multiple>
</body>
</html>运行效果：
3.1.4 checkbox 多选框
- 多选框也叫 复选框
- 默认选中：checked
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>多选框</title>
</head>
<body>兴趣爱好：<!-- checked 实现默认选中 --><input type="checkbox"> 敲代码<input type="checkbox" checked> 敲前端代码<input type="checkbox" checked> 敲前端 HTML 代码
</body>
</html>运行效果：
3.2 下拉菜单
标签：select 嵌套 option，selec t是下拉菜单整体，option 是下拉菜单的每一项。selected 是默认选项
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>菜单</title>
</head>
<body>城市：<select><option>南京</option><option selected>杭州</option><option>北京</option><option>上海</option><option>徐州</option></select>
</body>
</html>运行效果：
3.3 文本域
作用：多行输入文本的表单控件。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本域</title>
</head>
<body><!-- 右下角有拖拽功能，未来都会禁用；未来工作中，会用 CSS 设置尺寸；name id 是发送数据用的 --><textarea></textarea>
</body>
</html>运行效果：
3.4 label 标签
作用：网页中，基个标签的说明文本
经验：用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围
3.4.1 label 标签增大点击范围
写法一：
- label 标签只包裹内容，不包裹表单控件
- 设置 label 标签的 for 属性值和表单控件的 id 属性值相同
示例：即点击“男”，也可以选中这个选项，而不是一定要点中“男”对应的那个单选圈
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本域</title>
</head>
<body>性别：<input type="radio" name="gender " id="man"> <label for="man">男</label><input type="radio" name="gender " id="girl"> <label for="girl">女</label>
</body>
</html>写法二：
使用 label 标签包裹文字和表单控件，不需要属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本域</title>
</head>
<body>性别：<!-- 第一种写法 --><input type="radio" name="gender" id="man"> <label for="man">男</label><!-- 第二种写法 --><label><input type="radio" name="gender">女</label>
</body>
</html>提示：支持 label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。
3.5 button 按钮
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本域</title>
</head>
<body><!-- form 表单区域 --><!-- action 是发送数据的地址，比如要提交到哪 --><form action="">用户名：<input type="text"><br><br>密码：<input type="password"> <br><br><button type="submit">提交</button><!-- 需要将所有表单信息放入 form 标签内，重置的功能才会生效 --><button type="reset">重置</button> </form>
</body>
</html>运行效果：
3.6 无语义的布局标签
作用：布局网页(划分网页区域，摆放内容）
- div：独占一行
- span：不换行
3.7 字符实体
作用：在网页中显示预留字符
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本域</title>
</head>
<body><!-- 在代码中敲键盘的空格，网页只识别一个 -->毕业 快乐！
</body>
</html>运行效果：
参考链接：
17-列表-无序和有序和定义列表_哔哩哔哩_bilibili
18-表格-基本使用与表格结构标签_哔哩哔哩_bilibili
19-合并单元格_哔哩哔哩_bilibili
20-表单-input标签_哔哩哔哩_bilibili
21-表单-下拉菜单_哔哩哔哩_bilibili
22-表单-文本域_哔哩哔哩_bilibili
23-表单-label标签_哔哩哔哩_bilibili
24-表单-按钮_哔哩哔哩_bilibili
25-div和span标签和字体实体_哔哩哔哩_bilibili