HTML5新特性之表单、视频和音频

一、表单

1.新的 input 元素

<input type=”email”> 　　 ：检测电子邮件类型
<input type=”search”>　　 ：提供了快速清除操作
<input type=”url”> 　　 　：检测URL类型
<input type=”tel”> 　　　 ：移动设备中展开拨号键盘
<input type=”number”>    ：数字类型
    min：最小值，max：最大值，step：微调数值（默认为1）
<input type=”range”>  　 ：范围类型（滑块）
    min ：最小值，max ：最大值，value ：初始值
<input type=”color”> 　　：颜色拾取控件
<input type=”date”> 　　 ：日期输入控件
<input type=”week”> 　　 ：日期控件，选取周
<input type=”month”> 　　：月份控件

2-1.新的表单元素-datalist（数据列表）

datalist本身不可见
    <datalist id="list3">
        <option>xx</option>
        <option>yy</option>
    </datalist>
    <input type="text" list="list3">
datalist为input提供了输入列表，用户可以从中选取，也可以输入

2-2.新的表单元素-progress（进度条）

显示也给进度条，有两种形式
    <progress></progress>    左右晃动的进度条
    <progress value=" "></progress>    具有指定进度值的进度条（value取值范围：0~1）

练习：使用定时器+进度条实现一个可以动态前进的进度条，到100%时弹出"下载完成"提示

    <progress value="0" id="pro"></progress>
    <script>
        let i=$("#pro").val();
        var timer=setInterval(function task(){
            i+=0.1;
            $("#pro").val(i);
            if(i>=1){
                clearInterval(timer);
                alert("下载完成");
            }
        },200);
    </script>

2-3.新的表单元素-meter（刻度尺）

meter 用于标示一个值所处范围：不可接受(红色) 可以接受(黄色)非常优秀(绿)
属性：
    <meter min="可取最小值"     max="可取最大值"
    low="合理下限"     high="合理的上限值" 
    optimum="最佳值"    value="当前实际值"></meter>

2-4.新的表单元素-output

output:输出，语义标签，没有任何样式，样式等同于span

3.表单元素的新属性

placeholder    ：占位字符
autofocus      ：自动获取输入焦点
multiple       ：允许输入框中出现多个值（值之间用逗号分隔）
form           ：用于把输入域放置在form外部
        用法：给表单添加一个id，表单外元素增加一个属性：form="表单id"
required       ：必填项，内容不能为空
maxlength      ：指定字符串最大长度
minlength      ：指定字符串最小长度
max            ：指定数字最大值
min            ：指定数字最小值
pattern        ：正则表达式

二、视频

1.语法

    <video src="视频文件"></video>
    或：
    <video>
        <source src="shipin.mp4">
        <source src="shipin.ogg">
        <source src="shipin.webm">
        您的浏览器版本太低不支持播放次视频，请下载最新版
    </video>
    注意：video本身是一个300*150的inline-block元素

2.成员属性

autoplay    ：自动播放
controls    ：显示播放控件
loop        ：循环播放
muted       ：静音
注意：以上属性不需要取值，添加上就可以实现相应的功能
poster:" "   ：视频封面
preload:" "  :视频的预加载策略
        取值：auto 预加载视频的原数据以及一定时长视频（pc端使用）
                metadate  预加载视频的原数据（移动端使用）
                none  不预加载任何数据

2-1.js对象属性

correntTime    ：当前播放的时长
duration       ：总时长
paused         ：当前视频是否处暂停状态
volume         ：当前音量（范围为0~1）
playbackRate   ：播放速度，大于1快进，小于1慢放

　　

3.成员方法

play()      ：播放视频
pause()     ：暂停视频

4.成员事件

onplay      ：当前视频开始播放时触发的事件
onpause     ：当前视频暂停播放时触发的事件

三、音频

1.语法

    <audio src="音频文件"></audio>
    或：
    <audio>
        <source src="yinpin.mp4">
        <source src="yinpin.ogg">
        <source src="yinpin.webm">
        您的浏览器版本太低不支持播放次视频，请下载最新版
    </audio>

2.成员属性同视频方法