第三周: Html5新增元素

html5是基于html4的升级版，他的优点在于同时适用于移动端和pc端，其在移动端中可以实现flex(弹性布局) 和多列布局。可以做到移动端自适应

浏览器不识别html5时的处理方法

进行左兼容性处理，使用csshack来写

 <!--[IF lt IE 9]>
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     <!-- 下面这个是国内的静态资源库  处理方案更好-->
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->

新增多媒体元素

1. audio 音频播放器
   目前< audio> 元素支持的3种文件格式：MP3、Wav、Ogg
   属性：
   autoplay 自动播放
   controls 控制器
   loop 循环播放
   muted 静音
2. video 视频播放器
   目前< video> 元素支持三种视频格式：MP4、WebM、Ogg
   属性：
   autoplay 自动播放
   controls 控制器
   loop 循环播放
   muted 静音
   height 视频播放器的高度
   width 视频播放器的宽度
3. source
   < source> 标签为媒体元素（如 < video> 和 < audio>)定义媒体资源。
   < source> 标签允许您规定两个视频/音频文件共浏览器根据它对媒体类型或者编解码器的支持进行选择。

新增表单元素

4. < datalist>
   定义选项列表。需要与 input 元素配合使用，用来定义 input 可能的选项。
   < datalist> 标签被用来在为 < input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。
   使用时需要用< input> 元素的 list 属性来绑定 < datalist> 元素。

 <input type="text" list="hm"/>
  <datalist id="hm">
      <option>1122</option>
      <option>0606</option>
      <option>0101</option>
      <option>1119</option>
  </datalist>

5. < keygen>
   规定用于表单的密钥对生成器字段。
6. < output>
   定义不同类型的输出，比如脚本的输出
7. input里面html5
   < input type=“color”/>
   < input type=“date”/>
   < input type=“datetime-local”/>
   < input type=“email”/>
   < input type=“month”/>
   < input type=“range”/>
   < input type=“week”/>
   < input type=“time”/>
   < input type=“tel”/>
   < input type=“number”/>

新的语义和结构元素

8. article : 定义相对页面独立的区域,标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分

9. aside : 定义其所处内容之外的内容。< aside> 的的内容可用作文章的侧栏

10. bdi : 隔离一段文本，使其脱离其父元素的文本方向设置

11. header 定义头部区域

12. footer 定义底部区域

13. nav 定义导航链接的部分

14. section 定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域

15. summary 为 < details> 元素定义一个可见的标题。 当用户点击标题时会显示出详细信息。

16. details 规定用户可见的或者隐藏的需求的补充细节。
    与 < summary> 标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details

<details>
<summary>信息</summary>
<p>这里是信息的补充部分</p>
</details>

17. dialog 定义一个对话框、确认框或窗口。提示框
18. mark 标记本本，突出显示
19. meter 标签定义度量衡。仅用于已知最大和最小值的度量，不能作为一个进度条来使用
    属性：
    max 规定范围的最大值。
    min定范围的最小值。
    optimum规定度量的最优值。
    value 必需的，规定度量的当前值。

<p>展示给定的数据范围：</p>
<meter value="60" min="0" max="100">60 out of 100</meter><br>
<meter value="0.4">40%</meter>

运行结果

20. progress ：定义运行中的任务进度（进程）。 标签不适合用来表示度量衡
    属性：
    max 规定需要完成的值
    value 规定进程的当前值

下载进度：
<progress value="88" max="100">
</progress>

运行结果

21. section 定义文档中的节（section、区段）。
22. time 定义日期或时间。
23. addrecs 地址标签
24. wbr 规定在文本中的何处适合添加换行符
25. 表单更新的属性：
    autocomplete on 开启表单输入智能提示 off 关闭智能提示
    浏览器默认存在这个功能
    novalidate 表单不验证
    autofocus 自动获得焦点
    表单上验证数据格式的
    pattern="\d+" title=“请输入纯数字…”