html5

什麼是html5
1.H5不是新語言,是第五次修改的版本

2.支持全部主流瀏覽器(IE9以上支持H5,ie8一下不支持)

3.改變了用戶與文檔交互方式:多媒體 video audio canvas 

4.增長其它的新特性:語義特性,本地存儲特性,網頁多媒體,二維三維,特效(過分,動畫)

5.相對於h4:
    1:進步:拋棄了不經常使用的標記
    2.新增:新增標記和屬性
    3.結構簡潔

html:xt +tab
html5 是一套規範
-------------------------------------------
width:100% 流失佈局 || 百分佈局

解決ie8兼容性問題:引進JS文件或者更改屬性
電話 tel 彈出數字鍵盤

form:myForm 指定表單 

-------------------------------
碼雲上傳
git clone url地址
git add * 將代碼上傳到本地倉庫
git commit -m '必須寫的註釋'
git push

1.在碼雲上建立項目
2.複製項目地址
3.四步走

https://gitee.com/tuziling84/code.git
-------------------------------------
   <!--autofocus:自動獲取焦點-->
    <!--autocomplete:自動完成：on:打開  off:關閉
    1.必須成功提交過:提交過纔會記錄
    2.當前添加autocomplete的元素必須有name屬性-->
    用戶名：<input type="text" name="userName" placeholder="請輸入用戶名" autofocus autocomplete="on"> <br>
    <!--tel並不會實現驗證，僅僅是在移動端可以彈出數字鍵盤-->
    <!--required:必須輸入，若是沒有輸入則會阻止當前數據提交-->
    <!--pattern:正則表達式驗證
    *:表明任意個
    ?:表明0個或1個
    +：表明1個或多個-->
    手機號：<input type="tel" name="userPhone" required pattern="^(\+86)?1\d{10}$"> <br>
    <!--multiple：能夠選擇多個文件-->
    文件：<input type="file" name="photo" multiple> <br>
    <!--email:有默認驗證  在email中，multiple容許輸入多個郵箱地址，以逗號分隔-->
    郵箱：<input type="email" name="email" multiple><br>
    
    <!--提交：-->
    <input type="submit"> <br>
</form>
<!--下面這個表單元素並無包含在form中：默認狀況下面表單元素的數據不會進行提交-->
<!--form:指定表單id,那麼在未來指定id號的表單進行數據提交的時候，也會將當前表單元素的數據一塊兒提交-->
地址：<input type="text" name="address" form="myForm">


 <!--創建輸入框與datalist的關聯  list="datalist的id號"-->
    專業：<input type="text" list="subjects"> <br>
    <!--經過datalist建立選擇列表-->
    <datalist id="subjects">
        <!--建立選項值：value:具體的值 label:提示信息，輔助值-->
        <!--option能夠是單標籤也能夠是雙標籤-->
        <option value="英語" label="不會"/>
        <option value="前端與移動開發" label="前景很是好"></option>
        <option value="java" label="使用人數多"></option>
        <option value="javascript" label="作特效"></option>
        <option value="c" label="不知道"></option>
    </datalist>

    網址：<input type="url" list="urls">
    <datalist id="urls">
        <!--若是input輸入框的type類型是url,那麼value值必須添加http://-->
        <option value="http://www.baidu.com" label="百度"></option>
        <option value="http://www.sohu.com"></option>
        <option value="http://www.163.com"></option>
    </datalist>

-------------------------------
fullscreen
    一、js的兼容性處理   加前綴
        google+apple+360+qq       內核：webkit
        火狐                      內核：moz
        歐朋                      內核：o
        ie                        內核：ms
    二、實現全屏和退出全屏對象不同
        實現全屏：具體對象調用     RequestFullScreen()方法
        退出全屏：document對象調用 CancelFullScreen()方法
    三、火狐最標準的 


-------------------------
oninput :監聽當前指定元素
onkeypu : 鍵盤彈起時候觸發
oninvalid :當驗證不經過時觸發


進度條
progress :  max  value
meter
-----------------------
音頻
embed 直接插件視頻文件:他的本質是條用本機上已經安裝的軟件,有兼容性

flash 插件  安裝flash 蘋果設備不支持  增長學習成本

<!--embed:能夠直接插入音頻視頻，本質是經過本機安裝的音頻視頻播放軟件來播放的。要求必須已經安裝了這些軟件  兼容性-->

<!--flash:  1.先學習flash,增長使用成本  2.iphone,ipd,不支持flash-->

<!--audio:音頻-->

    <!-- <audio controls  autoplay>
        <source src="./mp3/aa.mp3" type="audio/ogg">
        <source src="./mp3/aa.mp3" type="audio/mpeg">
    </audio> -->

<!--
src:播放文件的路徑
controls:音頻播放器的控制器面板
autoplay:自動播放
loop:循環播放-->
<!--<audio src="../mp3/aa.mp3" controls></audio>-->

<!--video：視頻-->
<!--
pause 暫停
src:播放文件的路徑
controls:音頻播放器的控制器面板
autoplay:自動播放
loop:循環播放
poster:指定視頻尚未徹底下載完畢，或者用戶沒有點擊播放前顯示的封面。 默認顯示當前視頻文件的第一副圖像
width:視頻的寬度
height:視頻的高度
-->
<!--注意事項：視頻始終會保持原始的寬高比。意味着若是你同時設置寬高，並非真正的將視頻的畫面大小設置爲指定的大小，而只是將視頻的佔據區域設置爲指定大小，除非你設置的寬高恰好就是原始的寬高比例。因此建議：在設置視頻寬高的時候，通常只會設置寬度或者高度，讓視頻文件自動縮放-->
<!--<video src="../mp3/mp4.mp4" poster="../images/l1.jpg" controls  height="600"></video>-->

<!--source:由於不一樣的瀏覽器所支持的視頻格式不同，爲了保證用戶可以看到視頻，咱們能夠提供多個視頻文件讓瀏覽器自動選擇-->
<!--<video muted src="../mp3/flv.flv" controls></video>-->

------------------------------------

1.ononline:網絡連通的時候觸發事件
2.nooffline:網絡斷開觸發

全屏操做:
required  必填

    3c3ff6933cb1c09c87d09de335612321

--------------------
拖拽:
e.preventDefault();阻止默認事件
draggable 改變鼠標樣式  拖拽
--------------------------------
sessionStorage
生命週期:
存儲大小:5M
關閉瀏覽器 數據不存在
存儲在瀏覽器當前頁面內存中
數據只能在當前頁面
sessionStorage.getItem("key",value)
setItem(key,value):存儲數據，以鍵值對的方式存儲
getItem(key):獲取數據，經過指定名稱的key獲取對應的value值
removeItem(key):刪除數據，經過指定名稱key刪除對應的值
clear():清空全部存儲的內容


JSON.stringify(arr2)   =========將數組轉換成字符串  原理就是在數組身上打上一個引號
JSON.parse(arr3)  ==============將字符串轉換成數組對象    原理是把引號去掉
-------------------------
localStorage 同一個瀏覽器能夠共享數據
數據只能手動刪除
存儲大小 : 20M
數據存儲在硬盤上
setItem(key,value):存儲數據，以鍵值對的方式存儲
getItem(key):獲取數據，經過指定名稱的key獲取對應的value值
removeItem(key):刪除數據，經過指定名稱key刪除對應的值
clear():清空全部存儲的內容


例子：

//定義一個字符串

var data='{"name":"goatling"}'

//解析對象?

?JSON.parse(data)

結果是：

?name:"goatling"

JSON.stringify()【從一個對象中解析出字符串】

var data={name:'goatling'}

JSON.stringify(data)

結果是：

'{"name":"goatling"}'

--------------------------
用於被拖拽元素的事件
 ondrag         應用於拖拽元素，整個拖拽過程都會調用--持續
 ondragstart    應用於拖拽元素，當拖拽開始時調用
 ondragleave    應用於拖拽元素，當鼠標離開拖拽元素時調用
 ondragend      應用於拖拽元素，當拖拽結束時調用
應用於目標元素的事件 
 ondragenter    應用於目標元素，當拖拽元素進入時調用
 ondragover     應用於目標元素，當停留在目標元素上時調用--持續
 ondrop         應用於目標元素，當在目標元素上鬆開鼠標時調用
 ondragleave    應用於目標元素，當鼠標離開目標元素時調用
e.preventDefault(); 清除默認行爲

列如:
<script>
             var div1 = document.querySelector("#div1");
            var div2 = document.querySelector("#div2");
            //開始拖拽
            document.ondragstart=function(e){
                console.log(e);
                e.dataTransfer.setData("text/html",e.target.id);
            }
            //持續拖拽
            document.ondragover=function(e){
                e.preventDefault();
            }
            //結束拖拽
            document.ondrop=function(e){
               var id=e.dataTransfer.getData("text/html");
                e.target.appendChild(document.getElementById(id));
            }
        </script>


---------------上傳-----------------------
multiple 多個文件上傳
 onabort:讀取文件中斷片時觸發
 onerror:讀取錯誤時觸發
 onload:文件讀取成功完成時觸發
 onloadend:讀取完成時觸發，不管成功仍是失敗
 onloadstart:開始讀取時觸發
 onprogress:讀取文件過程當中持續觸發
reader.onload=function(){
 //console.log(reader.result); 讀取的文件在讀取對象的reader.result中
    document.querySelector("img").src=reader.result;
}
reader.onprogress=function(e){
    var percent= e.loaded/ e.total*100+"%";
    div.style.width=percent;
}

如:
 var myfile=document.querySelector("#myfile");
        var div =document.querySelector("div");
        myfile.onchange=function(){
            div.innerHTML="";
           var file=myfile.files;//獲取個數
          // console.log(file); 
          for(var i = 0; i < file.length;i++){
              var reader=new FileReader();
            //  console.log(reader.readAsDataURL)
            reader.readAsDataURL(file[i]);
            reader.onload=function(e){
                var img=document.createElement("img");
               // cosnole.log(img);
               img.src=e.target.result;
                div.appendChild(img);
            }
          }
        }