效果图：
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册信息</title>
</head>
<body>
<h1>注册信息</h1>
<form>
<!--表单控件 -->
<!-- 个人信息 -->
<h2>个人信息</h2>
<label>姓名：</label><input type="text" placeholder="请输入真是姓名">
<br>
<label>密码：</label><input type="password" placeholder="请输入密码">
<br>
<label>确认密码:</label><input type="password" placeholder="请重新输入密码">
<br>
<label>性别：</label>
<label> <input type="radio" name="gender">男</label>
<label> <input type="radio" name="gender" checked>女</label>
<br>
<label>居住城市：</label>
<select>
<option>贵州</option>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
<!-- 教育经历 -->
<h2>教育经历</h2>
<label>最高学历:</label>
<select>
<option>博士</option>
<option>硕士</option>
<option>本科</option>
<option>专科</option>
</select>
<br>
<label>学校名称：</label><input type="text">
<br>
<label>所学专业：</label><input type="text">
<br>
<label>在校时间：</label>
<select>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
</select>
<select>
<option>2019</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
</select>
<!-- 工作经历 -->
<h2>工作经历</h2>
<label>公司名称：</label><input type="text">
<br>
<label>工作描述：</label>
<textarea></textarea>
<br>
<!-- 协议和按钮 -->
<input type="checkbox"><label>已同意以下协议：</label>
<ul>
<li><a href="#">《用户服务协议》</a></li>
<li><a href="#">《隐私协议》</a></li>
</ul>
<br>
<button>免费注册</button>
<button type="reset">重新填写</button>
</form>
</body>
</html>代码实现主要围绕，表单的知识点，以下是关于表单的知识点学习，以便我们更容易写出一些简单的注册页面。
表单
作用：收集用户的信息
使用场景：登录页面、注册页面、搜索区域
input标签type属性值不同，则功能不同
<input type="....">
type属性值 说明
text 文本框、用于输入单行文本
password 密码框
radio 单选框
checkbox 多选框
file 上传文件
占位文本：提示信息
<input type="...." blaceholder="提示信息">
注：多适用于文本框和密码框
单选框：radio
常用的属性：
属性名 作用 特殊说明
name 控件名称 控件分组，同组只能选一个（单选功能）
check 默认选中 属性名和属性值相同，简写为一个单词
多文件上传-file
默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多功能。
<input type="file" multiple>
多选框-checkbox
多选框也叫复选框
默认选中：checked
<input type="checkbox" checked>
下拉菜单：
标签：select嵌套option,select是下拉菜单的整体，option是下拉菜单的每一页。
文本域：
作用：多行输入文本的表单控件
标签：textarea双标签
<textarea>默认提示文字</textarea>
label标签
作用：网页中，某个标签的说明文本。
经验：用label标签绑定文字和表单控件的关系，增大表单控件的点击范围。
label标签-增大点击范围
写法一、
label标签只包裹内容，不包裹表单控件
设置label标签的for属性值和表单控件的id属性值相同
<input type="radio" id="man">
<label for="man">男</label>
方法二、
使用label标签包裹文字和表单控件，不需要属性
<label><input type="radio">女</label>
提示：支持label标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等
按钮-button
<button type="">按钮</button>
type属性 说明
submit 提交按钮 点击后可以提交数据到后台（默认功能）
reset 重置按钮 点击后将表单控件恢复默认值
button 普通按钮 默认没有功能，一般配合javaScript
