HTML5

一、新增属性

       1. placeholder   占位符

       2. input 中的type 属性新增的值：都有兼容性的问题

       3. contenteditable : 元素是否可编写（尽量不要嵌套使用）IE都能使用

       4. draggable : 是否可拖拽

            4.1 被拖拽物体：

                   （1）ondragstart   开始拖拽

                   （2）ondrag   进行中

                   （3）ondragend    拖拽结束

             4.2 目标区域：

                    （1）ondragenter   进入目标区域

                    （2）ondragover    在目标区域拖拽进行中  在over中阻止默认事件（ondragleave）,让ondrop事件执行

                    （3）ondragleave   离开目标区域

                    （4）ondrop  放下（松开鼠标）

             4.3 拖拽时鼠标样式

                    （1）ondragstart 中改变样式     e.dataTransfer.effectAllowed = 'link';

                    （2）ondrop 中改变样式    e.dataTransfer.dropEffect = 'link';

 

二、新增的表单元素

       1.<datalist>：数据列表   子元素应该是option 为普通的 input 提供输入建议

       2.<progress>：进度条

       3.<output>：接受计算后的结果

 

三、新增的表单属性

       1. autofocus：自动获取焦点  false / true  只能对一个标签进行聚焦

       2. multiple：可以输入多个值 false / true

       3. required：当前元素必须填写内容

 

四、语义化标签

       在H5中又添加了新的语义化标签

       1. header 头部    2. footer 底部   3. nav 导航条  4. aside 侧边栏   5. article 文章   6. section  段落    

 

五、多媒体元素

       - flash 为什么会被HTML5替代？

       1. 音频  视频

       2. 绘图  线上画板

       3. echarts  two.js  three.js  数据可视化

       4. localStorage  sessionStorage  客户端本地存储

 

六、视频Video

       <video src = "视频资源"></video>  行盒  具有宽高

 

       视频格式（兼容/不兼容）

                                  WebM          OGG           MP4

        IE9+                     NO               NO            YES

        chrome 6+           YES             YES           YES

        firefox 3.6+          YES             YES            NO     

        safari 5+               NO               NO            YES

        opera 10.6+         YES             YES            NO

        **使用video最好提供至少两种视频格式的文件资源：OGG  MP4**

 

        video 的属性

        - controls  视频播放控件

        - autoplay  设置自动播放

                 浏览器禁止视频自动播放，此属性是无效的

                 1.设置视频静音：muted = "true"

                 2.使用 js 调用play（）让视频播放

         - currentTime：获取/设置当前播放时间点  单位s

         - duration：获取影片总时长

         - ended：判定视频是否播放结束 true / false

         - loop ：是否让视频循环播放

         - muted：设置/获取视频是否静音

         - volume：设置/获取视频音量，0-1 默认为1

               在视频静音状态下， 调节视频音量无效

         - paused：（只读）当前视频是否处于暂停状态

 

         video 的方法

         - play（） 让视频播放

         - pause（） 让视频暂停

 

         video 事件

         - onplay 视频开始播放触发

         - on pause 视频暂停时触发

         - onplaying 视频播放中

 

         播放海报

         - poster：指定视频播放前第一帧的图片（一般制作电影海报）

         - preload：预加载方案

                 1. metadata  获取视频元数据并且加载视频的宽度、时长、第一帧的内容

                 2. auto  自动预加载 时长、第一帧内容、缓冲一定的时长

                 3. none  不预加载任何内容

          - playbackRate：视频播放速度，默认值为1，取值大于1，表示1的倍数播放

 

七、音频 audio（同上video）