一、表單

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       ：當前視訊是否處暫停狀態
volumn         ：當前音量
playbackRate   ：播放速度，大於1快進，小於1慢放

3.成員方法

play()      ：播放視訊
pause()     ：暫停視訊

4.成員事件

onplay      ：當前視訊開始播放時觸發的事件
onpause     ：當前視訊暫停播放時觸發的事件