html5必会实际常用特性

新的语义（新元素）

1.header:头部；
2.nav: 主要用于导航；
3.article: 页面的主体内容；
4.section: 用来标记页面的重要部分。类似将文档分为多个章节；
5.aside: 表示和页面的主要内容相关，但不是页面的一部分，经常表示一个相关链接;
6.footet: 和header相对，表示文档或者章节的页脚，比如版权等信息放在次标签中;
7.html5还提供了很多丰富的语义话标签，如adress 、mark、 time等；

表单的增强

• input元素的type属性
  1. search: 呈现一个搜索框；
  2. tel: 输入电话号码，可以采用pattern和maxlangth来限定输入的格式。实例如下：

  <input type="tel" name="tel" value="" placeholder="请输入手机号" pattern="1[3-8][0-9]{9}" title="请输入11位手机号">
  

  3. url: 输入url地址；
  4. emaill: 输入电子邮件地址；
  5. date: 输入日期(日期选择在不同浏览器中效果不一样)；
  6. color: 输入颜色;
  7. number: 输入数字；
  8. range: 滑块输入;
  9. 还提供其他输入:datetime,month,week等；
• input通过属性进行表单验证
  1. required:必填

     <input type="text" placeholder="此项必填" required>
  

  2. pattern: 采用正则表达式验证表单输入,对于校验失败的提示信息，可以采用title属性指定；
• input元素其他有用的属性
  1. autofocus: 当页面加载时，自动聚焦；
  2. form: 将input元素和特定的form表单关联；
  3. placeholder: 输入占位符，提示用户输入；
• html5的新元素和特殊属性contenteditable
  1. progress: 表示进度条

  <progress value="30" max="100"></progress>
  

  2. merer: 标尺,包含三个属性，max表示最大值,默认为1，min表示最小值，默认为0，value表示标尺的值

  <meter value="3" min="0" max="10">3/10</meter><br>
   	<meter value="0.6">60%</meter>
  

  3. html5还提供特殊属性contentediable,通过该属性可以让一个普通的元素可编辑

使用音频和视频

1. audio标签;用于播放音频（提供一系列api）

<audio autobuffer autoloop loop controls>
 	<source src="/media/audio.oga">
 	<source src="/media/audio.wav">
 	<object type="audio/x-wav" data="/media/audio.wav" width="290" height="45">
 		<param name="src" value="/media/audio.wav">
 		<param name="autoplay" value="false">
 		<param name="autoStart" value="0">
 		<p><a href="/media/audio.wav">Download this audio file.</a></p>
 	</object>
 </audio>

1. video标签;用于播放视频（提供一系列api）

<video autobuffer autoloop loop controls>
 	<source src="/media/video.oga">
 	<source src="/media/video.m4v">
 	<object type="video/ogg" data="/media/video.oga" width="320" height="240">
 	<param name="src" value="/media/video.oga">
 	<param name="autoplay" value="false">
 	<param name="autoStart" value="0">
 	<p><a href="/media/video.oga">Download this video file.</a></p>
 	</object>
 </video>