温故知新，以下是我以前写的html5的案例，从电脑中翻出来了，算是知识复习和回顾吧！
有图有代码！
以下是源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5学习(表单新属性)</title>
<link rel="stylesheet" type="text/css" href="../css/inputAndDiv.css">
<style type="text/css">
input[type=range]::-moz-range-progress {
background: linear-gradient(to right, #059CFA, white 100%, white);
height: 13px;
border-radius: 10px;
}
</style>
</head>
<body style="background-color: #CCE8CF;">
<font style="font-size: 20px;">
请使用最新版本的浏览器测试html5的效果,注意：各个浏览器的显示效果可能还不太一样
</font>
<br />
<label for="testUrl">点击我，焦点会跳到url类型的控件上(测试)</label>
<form action="" id="testForm">
可以在html标签中直接写正则表达式<br />
pattern属性(正则验证)正则表达式:
<input type="text" required="required" placeholder="请输入正确的邮编" pattern="^[1-9]\d{5}$" />
<br /><br />
email类型:<input type="email" value="jiangxi" />
<br /><br />
email类型:<input type="email" value="[email protected]" />
<br /><br />
url类型:<input id="testUrl" type="url" value="blog.csdn.net/czh500" />
<br /><br />
url类型:<input type="url" value="https://blog.csdn.net/czh500" />
<br /><br />
time类型:<input type="time" />
<br /><br />
color类型:<input type="color" style="width: 50px;">
<br /><br />
滑动条效果，
range属性:<input type="range" max="50" min="1" step="5" />
<br /><br />
<input type="submit" value="提交(该提交按钮是写在form标签内的)" />
</form>
<br />
在外部提交form表单
<br />
<input type="submit" form="testForm" value="提交走你(该提交按钮是写在form标签外的)" />
</body>
</html>完！