列表、表格、表单
1.列表
1.1 无序列表(有序、无序、自定义列表都默认独占一行，可通过js语句改变布局)
作用： 布局排列整齐的不需要规定顺序的列表
标签： ul嵌套li，ul是无序列表，li是列表条目
<body>
<h3>您喜欢的水果？</h3>
<!-- ul里只能放li标签 -->
<!-- li里可以放其他标签-->
<ul>
<li>苹果</li>
<li>芒果</li>
<li>香蕉</li>
<li>梨子</li>
</ul>
</body>
1.2 有序列表
作用： 布局排列整齐的需要规定顺序的列表
标签： ol嵌套li，ol是无序列表，li是列表条目
<body>
<h3>您喜欢的水果？</h3>
<!-- ul里只能放li标签 -->
<ol>
<li>苹果</li>
<li>芒果</li>
<li>香蕉</li>
<li>梨子</li>
</ol>
</body>
1.3 定义列表
标签: dl嵌套dt和dd,dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情.dl里面只能包含dt和dd
<body>
<h3>您所在的区域？</h3>
<dl>
<dt>广州市</dt>
<dd>越秀区</dd>
<dd>天河区</dd>
<dd>黄浦区</dd>
<dd>荔湾区</dd>
</dl>
</body>
2. 表格
2.1 表格基本用法
<body>
<!-- th表头 第一行才能使用 -->
<!-- border="1"给表格加边框 -->
<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>100</td>
</tr>
<tr>
<td>总结</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
</table>
</body>
2.2 表格结构标签（了解）
划分标签有利于后期js处理
(分为thead、tbody，tfoot)
<body>
<!-- th表头 第一行才能使用 -->
<!-- border="1"给表格加边框 -->
<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>100</td>
</tr>
</tbody>
<!-- 表格底部 -->
<tfoot>
<tr>
<td>总结</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
</tfoot>
</table>
</body>
2.3 合并单元格
<body>
<!-- th表头 第一行才能使用 -->
<!-- border="1"给表格加边框 -->
<table border="1">
<!-- 表格头部 -->
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<!-- 表格主体部分 -->
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<!-- 保留最上的单元格，且合并两个 所以需要使用rowspan="2" -->
<td rowspan="2">100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<td>100</td>
</tr>
</tbody>
<!-- 表格底部 -->
<tfoot>
<tr>
<td>总结</td>
<!-- 跨列合并 保留最左的单元格 所以写作 colspan="3" -->
<td colspan="3">全市第一</td>
</tr>
</tfoot>
</table>
</body>
3 表单
3.1 input标签基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>inpupt</title>
</head>
<body>
<!-- text 文本框 -->
姓名：<input type="text"><br>
<!-- password:密码框 隐藏输入的密码 -->
密码：<input type="password"><br>
<!-- redio 单选框 name属性 给相同的值就可以单选(否则可以选中多个)-->
性别：<input type="radio" name="sex">女
<input type="radio" name="sex">男</input><br>
<!-- checkbox 复选框 -->
爱好：<input type="checkbox">打球
<input type="checkbox">游泳
<input type="checkbox">音乐
<input type="checkbox">写代码
</body>
</html>
结果：
4 占位符和默认选中
4.1占位符
```<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>inpupt</title>
</head>
<body>
<!-- text 文本框 -->
<!-- 占位符（placeholder） -->
姓名：<input type="text" placeholder="请您输入姓名"><br>
<!-- password:密码框 隐藏输入的密码 -->
密码：<input type="password" placeholder="请输入密码"><br>
<!-- redio 单选框 name属性 给相同的值就可以单选(否则可以选中多个)-->
性别：<input type="radio" name="sex">女
<input type="radio" name="sex">男</input><br>
<!-- checkbox 复选框 -->
爱好：<input type="checkbox">打球
<input type="checkbox">游泳
<input type="checkbox">音乐
<input type="checkbox">写代码
</body>
</html>
4.2 默认选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>inpupt</title>
</head>
<body>
<!-- text 文本框 -->
<!-- 占位符（placeholder） -->
姓名：<input type="text" placeholder="请您输入姓名"><br>
<!-- password:密码框 隐藏输入的密码 -->
密码：<input type="password" placeholder="请输入密码"><br>
<!-- redio 单选框 name属性 给相同的值就可以单选(否则可以选中多个)-->
<!-- 给女绑定默认选中 checked -->
性别：<input type="radio" name="sex" checked="checked">女
<input type="radio" name="sex">男</input><br>
<!-- checkbox 复选框 -->
爱好：<input type="checkbox">打球
<input type="checkbox">游泳
<input type="checkbox">音乐
<input type="checkbox" checked>写代码
</body>
</html>
5文件域和下拉表单
5.1 文件域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>inpupt</title>
</head>
<body>
<!-- text 文本框 -->
<!-- 占位符（placeholder） -->
姓名：<input type="text" placeholder="请您输入姓名"><br>
<!-- password:密码框 隐藏输入的密码 -->
密码：<input type="password" placeholder="请输入密码"><br>
<!-- redio 单选框 name属性 给相同的值就可以单选(否则可以选中多个)-->
<!-- 给女绑定默认选中 checked -->
性别：<input type="radio" name="sex" checked="checked">女
<input type="radio" name="sex">男</input><br>
<!-- checkbox 复选框 -->
爱好：<input type="checkbox">打球
<input type="checkbox">游泳
<input type="checkbox">音乐
<input type="checkbox" checked>写代码 <br>
<!-- 可以选择文件上传 multiple关键字可以选择多文件-->
上传头像：<input type="file" multiple>
</body>
</html>
5.2 下拉表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>inpupt</title>
</head>
<body>
<!-- text 文本框 -->
<!-- 占位符（placeholder） -->
姓名：<input type="text" placeholder="请您输入姓名"><br>
<!-- password:密码框 隐藏输入的密码 -->
密码：<input type="password" placeholder="请输入密码"><br>
<!-- redio 单选框 name属性 给相同的值就可以单选(否则可以选中多个)-->
<!-- 给女绑定默认选中 checked -->
性别：<input type="radio" name="sex" checked="checked">女
<input type="radio" name="sex">男</input><br>
<!-- checkbox 复选框 -->
爱好：<input type="checkbox">打球
<input type="checkbox">游泳
<input type="checkbox">音乐
<input type="checkbox" checked>写代码 <br>
<!-- 可以选择文件上传 multiple关键字可以选择多文件-->
上传头像：<input type="file" multiple><br>
籍贯：
<select name="" id="">
<option value="">北京</option>
默认选中项为上海
<option value="" selected>上海</option>
<option value="">广州</option>
<option value="">深圳</option>
<option value="">香港</option>
<option value="">杭州</option>
</select>
</body>
</html>
6 文本域
默认文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>inpupt</title>
</head>
<body>
<!-- text 文本框 -->
<!-- 占位符（placeholder） -->
姓名：<input type="text" placeholder="请您输入姓名"><br>
<!-- password:密码框 隐藏输入的密码 -->
密码：<input type="password" placeholder="请输入密码"><br>
<!-- redio 单选框 name属性 给相同的值就可以单选(否则可以选中多个)-->
<!-- 给女绑定默认选中 checked -->
性别：<input type="radio" name="sex" checked="checked">女
<input type="radio" name="sex">男</input><br>
<!-- checkbox 复选框 -->
爱好：<input type="checkbox">打球
<input type="checkbox">游泳
<input type="checkbox">音乐
<input type="checkbox" checked>写代码 <br>
<!-- 可以选择文件上传 multiple关键字可以选择多文件-->
上传头像：<input type="file" multiple><br>
籍贯：
<select name="" id="">
<option value="">北京</option>
默认选中项为上海
<option value="" selected>上海</option>
<option value="">广州</option>
<option value="">深圳</option>
<option value="">香港</option>
<option value="">杭州</option>
</select><br>
<!-- 文本域 -->
请您留言：
<!-- cols是行数，rows是列数 -->
<textarea name="" id="" cols="10" rows="10"></textarea>
</body>
</html>
7 label标签
方法一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>inpupt</title>
</head>
<body>
<!-- text 文本框 -->
<!-- 占位符（placeholder） -->
<!-- label标签 -->
<!-- 只要label和placeholder的id绑定相同就可以选中对应表单 -->
<label for="name">姓名：</label>
<input type="text" placeholder="请您输入姓名" id="name"><br>
<!-- password:密码框 隐藏输入的密码 -->
<label for="pswd">密码：</label>
<input type="password" placeholder="请输入密码" id="pswd"><br>
<!-- redio 单选框 name属性 给相同的值就可以单选(否则可以选中多个)-->
<!-- 给女绑定默认选中 checked -->
性别：<input type="radio" name="sex" checked="checked">女
<input type="radio" name="sex">男</input><br>
<!-- checkbox 复选框 -->
爱好：<input type="checkbox">打球
<input type="checkbox">游泳
<input type="checkbox">音乐
<input type="checkbox" checked>写代码 <br>
<!-- 可以选择文件上传 multiple关键字可以选择多文件-->
上传头像：<input type="file" multiple><br>
籍贯：
<select name="" id="">
<option value="">北京</option>
默认选中项为上海
<option value="" selected>上海</option>
<option value="">广州</option>
<option value="">深圳</option>
<option value="">香港</option>
<option value="">杭州</option>
</select><br>
<!-- 文本域 -->
请您留言：
<!-- cols是行数，rows是列数 -->
<textarea name="" id="" cols="10" rows="10"></textarea>
</body>
</html>
方法二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>inpupt</title>
</head>
<body>
<!-- text 文本框 -->
<!-- 占位符（placeholder） -->
<label>姓名：<input type="text" placeholder="请您输入姓名"><br></label>
<!-- password:密码框 隐藏输入的密码 -->
<label> 密码：<input type="password" placeholder="请输入密码"><br></label>
<!-- redio 单选框 name属性 给相同的值就可以单选(否则可以选中多个)-->
<!-- 给女绑定默认选中 checked -->
性别：<input type="radio" name="sex" checked="checked">女
<input type="radio" name="sex">男</input><br>
<!-- checkbox 复选框 -->
爱好：<input type="checkbox">打球
<input type="checkbox">游泳
<input type="checkbox">音乐
<input type="checkbox" checked>写代码 <br>
<!-- 可以选择文件上传 multiple关键字可以选择多文件-->
上传头像：<input type="file" multiple><br>
籍贯：
<select name="" id="">
<option value="">北京</option>
默认选中项为上海
<option value="" selected>上海</option>
<option value="">广州</option>
<option value="">深圳</option>
<option value="">香港</option>
<option value="">杭州</option>
</select><br>
<!-- 文本域 -->
请您留言：
<!-- cols是行数，rows是列数 -->
<textarea name="" id="" cols="10" rows="10"></textarea>
</body>
</html>
8 按钮
<button type=** ” **>
绑定表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>inpupt</title>
</head>
<body>
<!-- 将所有内容放入表单中 -->
<form><!-- text 文本框 -->
<!-- 占位符（placeholder） -->
<label>姓名：<input type="text" placeholder="请您输入姓名"><br></label>
<!-- password:密码框 隐藏输入的密码 -->
<label> 密码：<input type="password" placeholder="请输入密码"><br></label>
<!-- redio 单选框 name属性 给相同的值就可以单选(否则可以选中多个)-->
<!-- 给女绑定默认选中 checked -->
性别：<input type="radio" name="sex" checked="checked">女
<input type="radio" name="sex">男</input><br>
<!-- checkbox 复选框 -->
爱好：<input type="checkbox">打球
<input type="checkbox">游泳
<input type="checkbox">音乐
<input type="checkbox" checked>写代码 <br>
<!-- 可以选择文件上传 multiple关键字可以选择多文件-->
上传头像：<input type="file" multiple><br>
籍贯：
<select name="" id="">
<option value="">北京</option>
默认选中项为上海
<option value="" selected>上海</option>
<option value="">广州</option>
<option value="">深圳</option>
<option value="">香港</option>
<option value="">杭州</option>
</select><br>
<!-- 文本域 -->
请您留言：
<!-- cols是行数，rows是列数 -->
<textarea name="" id="" cols="10" rows="10"></textarea> <br>
<!-- 按钮 -->
<!-- 放入form之中就可以绑定事件 -->
<button type="button">搜索</button>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
</body>
</html>
