夜灵的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:''        在播放第一帧之前显示的海报