HTML5新增元素

---

title: HTML5新增元素
date : 2016-09-13
tags : HTML5

---

0X01 HTML5新增主体元素

header,nav,aside,section,article,footer

---

0x02 HTML5新增非主体元素

datalist

datalist 要结合 input 元素使用，并且通过的 input 的 list 属于与其关联。

progress

表示一个任务的完成进度，而且通常这些任务都在表单中启动和处理。

vaule:表示处理进度的程度
max:表示任务完成以后达到的值

meter

与 类似，用于显示刻度或精度而非进度。

output

用于显示表单元素处理的结果值。for 将 output 元素与参与计算的元素相关联起来。

---

0x03 HTML5新增文本框元素

email

当在 form 表单中，当输入邮箱地址提交请求时，将会自动验证输入邮箱格式是否正确

tel

tel 在主要功能作用是针对不同的设备自动跳出响应的数字键盘，这个主要是针对移动端的。它不会去验证输入的电话号码的格式。

number

number 只能接受数字类型的值。其中:

min:表示能输入的最小值
max:表示能输入的最大值
step:表示每次调整的增量

range

range 允许用户选择一范围的数值。

date

time

color

---

0x03 HTML5新增音视频元素

---

vedio

vedio 元素提供了 播放、暂停和音量控件来控制视频，也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度等

vedio 元素有如下属性值：

• width/height: 设置 vedio 元素的宽度和高度
• src/source: 设置视频流的存储路劲
• autoplay:视频自动播放
• controls:显示 video 元素自带的控制组件 controls
• poster:指定一个图片路径，在视频等待播放时显示一幅图片。
• preload:有三个值:none,metadata,auto。值为none 不缓存视频；metadata 播放前只加载视频的宽高等信息;auto 默认值，要求浏览器尽快下载视频。
• loop:反复播放视频

---

视频事件

视频处理事件:

• play():播放媒体文件
• load():加载媒体文件，动态应用程序可以使用该方法提前加载
• canPlayType(type):查看浏览器是否支持某种类型的媒体格式
• progress(): 用于更新资源的下载进度，会周期性的触发。
• canplaythrough():当整个媒体可以顺序播放时，触发该事件。
• canplay():不考虑整体状态，只有下载了一定可放的帧变化触发该事件

针对视频处理的常用属性如下：

• ended:媒体播发完成时该属性返回 true
• paused:暂停播放时，该属性返回 true
• duration:返回播放时长，以秒为单位
• currentTime:获得或设置媒体播放位置
• error:播发错误时触发

---

一个简单的视频处理控件

    
    
    
    
    
    
    



    

        
        
        播放