html5新增元素

             <style type="text/css">
.myform{
border: orange 1px solid;

width: 100%;
min-width: 20%;
max-width: 60%;
}
input,meter,progress {
display: block;
width: 60%;
}
</style>

           <form action="">
<fieldset class="myform">
<legend>新增属性</legend>

                   <label for="a">
  <input type="text"  placeholder="用户名"/>
   </label>
    <label for="a">
        <input type="text"  placeholder="请输入手机号码"/>
   </label>
<label for="b">
  <input type="email" placeholder="邮箱"/>
   </label>
<label for="">
  <input type="password" placeholder="密码由6~20位数字，字母和符号组合" />
   </label>
<label for="">
  <input type="number" placeholder="财富值" />
   </label>
<input type="text" name="sex" list="sex" id="sex"/>性别
<datalist id="sex">
  <option>男</option>
  <option>女</option>
   </datalist>
   <input type="text" name="hobby" list="hobby" id="hobby"/>爱好
    <datalist id="hobby">
           <option>吃饭</option>
           <option>睡觉</option>
           <option>打豆豆</option>
     </datalist>
<label for="">
                       <input type="date"  id="date"/>日期
              </label>
<label for="">
                      <input type="file" />
 </label>
    //音频
    <audio controls="controls" loop="loop">
    <source src="music/yinyue.mp3"></source>
    <source src="music/yinyue.ogg"></source>
    抱歉，不支持
    </audio>

                   //视频
    <video controls="controls" >
    <source src="video/movie.mp4"></source>
    </video>

<label for="">
加密类型
<keygen />
</label>
<label for="">
考试级别
  <meter high="95" low="90" value="10" max="100"></meter>
</label>
                         <label for="">
     学习增长率:
<progress max="100" value="50"></progress>
</label>
<input type="submit" value="提交" />
</fieldset>
</form>