一、
（1）知识点6：HTML5新增属性
（2）知识点7：HTML5的validity属性
代码：
（1）
1.html文件
<link href="css/style.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<h2 class="reg-top"></h2>
<div class="reg-box">
<div class="reg-main">
<h3>注册账号</h3>
<form action="" method="post" class="reg-form">
<div class="reg-input">
<label><i></i>昵称：</label>
<input type="text" id="uName" required placeholder="英文、数字长度为6-10个字符" pattern="[a-zA-Z0-9]{6,10}" />
</div>
<div class="reg-input">
<label><i></i>密码：</label>
<input type="password" id="pwd" required placeholder="长度为6-16个字符" pattern="[a-zA-Z0-9]{6,16}" />
</div>
<div class="reg-input">
<label>手机号码：</label>
<input type="text" pattern="^1[34578][0-9]{9}$" />
<span id="tel-tip">忘记密码时找回密码使用</span>
</div>
<div class="reg-input">
<label><i>*</i>邮箱：</label>
<input type="email" required id="email"/>
</div>
<div class="reg-input">
<label>年龄：</label>
<input type="number" min="12"/>
</div>
<div class="submit-box">
<input type="submit" id="submit" value="立即注册" >
</div>
</form>
</div>
</div>
</div>
</body>
</html>
（2）
1.html文件
2.CSS文件
*{padding:0;margin:0;}
body,html{font-family:"Microsoft YaHei",SimHei,"微软雅黑","黑体";}
body{
background:url(../img/body.png) repeat-x;
}
h2,h3{
font-weight:normal;
}
.container{
width:956px;
margin:0 auto;
}
.reg-top{
background:url(../img/bg_chs.png) repeat-x center top;
height:109px;
}
.reg-box{
height:500px;
background:#f9fdff;
border:1px #81add9 solid;
border-top:0 none;
}
.reg-main{
width:600px;
margin-left: 25px;
padding:1px;
}
.reg-main h3{
height:25px;
line-height:25px;
border-left:3px #59AfE4 solid;
padding-left:10px;
font-size:18px;
margin-top:80px;
color:#666;
}
.reg-form{
border-top:1px #d7d7d7 solid;
margin-top:10px;
}
.reg-input{
height:36px;
line-height:36px;
margin-top:18px;
}
.reg-input label{
float:left;
width:80px;
padding-right:8px;
text-align:right;
font-size:14px;
}
.reg-input label i{
color:red;
margin-right:3px;
font-style:normal;
}
.reg-input input{
float:left;
width:280px;
height:18px;
line-height:18px;
font-size:14px;
padding:8px;
border:1px #a8d2e7 solid;
}
.reg-input span{
float:left;
padding-left:10px;
font-size:12px;
color:#666;
}
submit{
width:180px;
height:50px;
font-size:24px;
line-height:50px;
text-align:center;
color:#fff;
margin-top:50px;
margin-left:110px;
border:0 none;
background:#b6010e;
font-family: "Microsoft YaHei",SimHei,"微软雅黑","黑体";
cursor:pointer;
}
