这一小节，我们继续纯HTML标签的使用，这一节我们做一个 注册页面。说到注册页面，其实大家的网站都大同小异，所以我们就不四处去找设计图了，我们自己想一个注册页面，想想注册页面都应该有哪些元素，应该长什么样子。
目录
1 需求分析
2 标签使用分析
3 布局分析
4 实战源码
1 需求分析
我们先来分析一下，注册页面都应该有哪些功能：
- 用户名，一般用来注册成功后，网站上显示的昵称；
- 密码，后续登录所用的密码；
- 注册的时候，为了确保用户密码输入正确，确保用户没有输入错误，怕后续自己记不住，会有一个确认密码，也就是把密码再输入一次，真正网站开发的时候，还会验证两次输入的密码是否一致；
- 会有手机号的输入；
- 会有手机号的验证码，为什么要有手机号验证码呢？网站得确认你输入的手机号是否是可用的，并且是自己的，如果不是可用的手机号，或者不是自己的，那么你就无法填入正确的手机验证码，对吧。（当然，你也可以用身边输入的手机号，也可以做到这一点，不一定非得是自己的）
- 会有图形验证码，和图形验证码的输入框。（为什么还要有个图形验证码呢？一般都是图形验证码输入正确后，才可以点击发送 “手机验证码” 的按钮，一般图形验证码人都需要使劲儿的看，所以机器是看不出来的。试想一下，如果没有这一步，那么人们是不是就可以使劲儿的点击那个发送 手机验证码 的按钮了，给用户发短信，是需要短信费用的，如果没有图形验证码，那很快坏人不就把网站的短信费浪费光了，多费钱呀，所以得有验证的这一步，才能发短信）
- 发完短信，收到短信验证码，得输入短信验证码；
- 点击“注册”按钮
所以，如果不考虑细节功能的话，注册页面大概需要这些元素：
2 标签使用分析
分析完了功能，那么我们还需要分析一下布局，分析一下使用的标签，对吧。
- 顶部“注册”标题，可以使用h2标签；
- 底部是一个form表单，可以使用 form 标签；
- 每个内容前面应该有个文字提示；
- 有文字输入框，有密码输入框，输入框内应该有灰色文字提示；
- 有图形验证码的图片；
- 有发送手机验证码的按钮；
- 底部有“注册”按钮
所以需要的标签大概会 包括但不限于一下这些：
3 布局分析
布局方面呢，
- 应该是顶部有个“注册”的标题；
- 然后底部是一个大的form表单区域；
- 然后表单中又区分多个小区域；
- 每个小区域呢，有个文字提示，比如用户名：后面是一个用户名输入口，这些是横线展示的；
- 然后遇到点击“发送验证码”，遇到图形验证码的，就又需要和输入框在同一行，对吧；
- 然后最底部的区域，是一个最终的 “注册” 按钮。
就像这样：
我们这个教程与其他教程不同之处就在于，稳扎稳打，一步一个脚印。其他教程HTML章节肯定是匆匆而过了，导致很多同学们，都学到后面了，布局也不熟，用的标签也不熟。然后就很容易学的跟不上，越学越混乱。
而且，越到后面需要学的东西就会越多，不稳扎稳打，后面只会觉得像一团浆糊一样。学了后面的，又得不断去学前面的。
4 实战源码
分析了布局，分析了元素，分析了功能，下面你可以练着敲代码了，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个网页</title>
<style type="text/css">
</style>
</head>
<body>
<h2>注册</h2>
<form>
<div>
<label>用户名：</label><input type="text" placeholder="请输入用户名" />
</div>
<div>
<label>密码：</label><input type="password" placeholder="请输入密码" />
</div>
<div>
<label>确认密码：</label><input type="password" placeholder="请输入确认密码" />
</div>
<div>
<label>手机号：</label><input type="text" placeholder="请输入手机号" />
</div>
<div>
<label>图形验证码：</label><input type="text" placeholder="请输入右侧图形验证码" /> <img src="./files/imgs/verifyCode.png" />
</div>
<div>
<label>手机验证码：</label><input type="text" placeholder="请输入手机验证码" /> <a href="javascript:void(0);">获取验证码</a>
</div>
<div>
<button>注册</button>
</div>
</form>
</body>
</html>
