夜靈的Html筆記Day14——H5新表單、視頻音頻

佈局：
viewport縮放   
媒體查詢 media


rem佈局
vw+rem佈局




---------------------------------------------
1.h5新屬性


   1.新的語義標籤 
   2.新的表單元素
   3.音頻和視頻
   4.Canvas
   5.內聯SVG
   6.拖放
   7.地址定位
   8.web 存儲
   9.web workers
   10.web storage
   11.web socket
   .......


--------------------------------------
1.新表單
   h4:input (text,password,submit,reset,button,radio,checkbox....)
     textarea select/option label標籤 
   h5:
      datalist keygon output progress meter 
   1.datalist 
         輸入域的選項列表。--本身不可見
<datalist id="list-cont">
             <option>aa</option>
    <option>bb</option>
    <option>cc</option>
</datalist>


<input type="text" list="list-cont"/>
        **:和select 區別：datalist可從中選取，也可手動輸入
   2.progress
         <progress> 元素表示任務的進度。
         顯示一個進度條
兩種方式：
    1.<progress></progress>   左右來回動
    2.<progress value="0.5"></progress>   指定固定的進度
       **:h5這個進度條一般不用，用div+css自己寫
   3.meter
      米   度量衡。僅用於已知最大和最小值的度量。
      語法：
         <meter></meter>  最大值 ，最小值 ，最高值 ，最低值 ，最優值
  eg:
    血壓機 
<meter min="最小值" low="合理的下限值" high="合理的上限值" max="最大值 " optimum="最優值 "></meter> 




pm:


視頻和音頻
1. 視頻
     用於播放視頻
   屬性：
      <video src="路徑"></video>   空的行內塊元素，300*150
      <video>
           <source src="video.mp4"/>
           <source src="video.ogg"/>
  <source src="video.webm"/>
  <source src="video.mp4"/>
      </video>


屬性：
    autoplay:false    是否是自動播放
    controls     控件
    loop         循環
    muted        是否靜音播放
    poster:''        在播放第一幀之前顯示的海報