HTML5學習總結_HTML5教程

DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> HTML5學習總結

HTML5學習總結

編輯：HTML5教程

一、HTML5概念

HTML5並不僅僅只是做為HTML標記語言的一個最新版本，更重要的是它制定了Web應用開發的一系列標准，成為第一個將Web做為應用開發平台的HTML語言。

HTML5定義了一系列新元素，如新語義標簽、智能表單、多媒體標簽等，可以幫助開發者創建富互聯網應用，同時有令人眼花缭亂的css 3，還提供了一些Javascript API，如地理定位、重力感應、硬件訪問等，可以在浏覽器內實現類原生應用，制作webApp，甚至結合Canvas我們可開發網頁版游戲。

我們日常討論的H5其實指的是一個泛稱，它是由HTML5 + CSS3 + Javascript等技術組合而成的一個應用開發平台。

HTML5絕大部分新增部分都有浏覽器兼容性問題，特別注意的是，並不是所有的html5都是IE9就兼容的，有一些屬性是需要IE10，等更高級的浏覽器才能兼容，而html5更多運用在移動端方面，因為移動端搭載的浏覽器比較高級。

二、HTML5新增部分簡介

1.新增的結構標簽

（1）header（頭部）（2）nav（導航）（3）section（主體）（4）aside（側邊欄）（5）article （內容）（6）footer（底部）

作用：與div一樣，只是增加了語義性，便於SEO優化。

拓展：SEO優化可以提升網站在搜索引擎中的排名，在前端實際應用中，我們會更多的去運用語義化標簽，同時針對一些特殊的字符，我們運用權重高的標簽去包裹網站logo。

兼容性解決：

（1）利用document.creatElement()去創建html5的新標簽，同時設置成塊元素（相對麻煩）

<!--[if lt IE 9]> 
<script type="text/javascript">
    var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
    var i= e.length;
    while (i--){
        document.createElement(e[i])
    }  
</script>
<![endif]-->

（2）借助於第三方的JS框架 =>html5shiv.min.js （推薦）配合IE的hack實現最佳兼容

<!--[if lt IE 9]> 
    <script src="js/html5shiv.min.js"></script>
<![endif]-->

2.新增的智能表單

2.1 input表單新增了type屬性值：

type="email" 限制用戶輸入必須為Email類型
type="url" 限制用戶輸入必須為URL類型
type="date" 自動生成一個日期控件
type="time" 同上
type="month" 同上
type="week" 同上
type="number" 限制用戶輸入必須為數字類型
type="range" 產生一個滑動條的表單
type="search" 產生一個搜索意義的表單
type="color" 生成一個顏色選擇表單

智能表單在移動端用的比較多，它會調取手機自身的控件。

2.2 表單智能驗證

required => 驗證表單是否為空，必須配合form表單來使用
pattern => 自定義驗證表單規則，匹配正則
invalid => 驗證失敗的時候觸發的事件
dom.setCustomValidity() => 自定義彈出的內容參數：string 自定義的內容

2.3 表單新屬性

placeholder => 占位文本，體驗更加
autofocus => 自動獲取焦點 dom.focus（）
autocomplete => 提交一次後下次自動補全注意：必須提交一次之後，同時必須要有name屬性
multiple => 配合file控件實現多選
form => 配合form表單的id值實現關聯，在任意位置都可以被提交，但是不建議這麼寫

2.4 智能表單過濾（datalist）

類似於搜索提示，輸入一個內容會提示相關聯的匹配的提示。它是利用表單的list =“datalist的id值”與datalist這個標簽取得聯系實現的。

2.5 video和audio標簽

HTML5中新添了video標簽來實現視頻的播放而不是借助於flash技術

屬性：

autoplay =>視頻默認加載完成後播放
controls =>播放的控件
loop =>控制播放循環
poster =>在視頻沒有播放時的預覽圖片

API：

play() => 播放
pause() => 暫停
load() => 加載

支持的視頻格式：

video標簽支持3種視頻格式：Ogg、MPEG4、WebM，並且各個主流浏覽器的支持格式也不一樣，如果需要處理兼容性，我們需要借助於source標簽來解決（目前僅mp4格式得到完全兼容）。

audio的用法和video一樣。

3.js獲取元素的新方式

（1）document.querySelector('selector') 通過類似CSS選擇器獲取元素，符合匹配條件的第1個元素。可以傳入復合選擇器（如：.box li, .box > li input[type=’button’]）等

（2）document.querySelectorAll('selector') 通過CSS選擇器獲取元素，以類數組形式存在。可以傳入復合選擇器（如：.box li, .box > li input[type=’button’]）等

4.js操作類名的新方式

Node.classList.add('class') 添加class
Node.classList.remove('class') 移除class
Node.classList.toggle('class') 切換class，有則移除，無則添加
Node.classList.contains('class') 檢測是否存在class

5.js自定義屬性

在H5中，我們使用data-=""的格式來自定義屬性，可以通過dataset[屬性名]來獲取到我們的自定義屬性的屬性值，如果屬性名是類似於-的形式，則我們需要使用駝峰命名的形式來獲取屬性值。

在jQuery中我們使用data()方法來獲取標簽的data屬性的屬性值。

6.網絡狀態

window.navigator.onLine:檢測用戶的網絡狀態，鏈接網絡時返回true，網絡斷開時返回false。

window.addEventListener("online",function(){}):網絡鏈接從斷開到連接時觸發。

window.addEventListener("offline",function(){}):網絡鏈接從連接到斷開時觸發。

7.地理定位

在HTML規范中，增加了獲取用戶地理信息的API，這樣使得我們可以基於用戶位置開發互聯網應用，即基於位置服務 (Location Base Service)

7.1 獲取地理位置的方式

IP地址
GPS（Global Positioning System，全球定位系統）
Wi-Fi
手機信號
用戶自定義數據

浏覽器會自動以最優方式去獲取用戶地理信息。

7.2 API詳解

navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options)//獲取當前位置的地理信息。

navigator.geolocation.watchPosition(successCallback,errorCallback,options)//重復獲取當前位置的地理信息。

(1)當成功獲取地理信息後，會調用succssCallback，並返回一個包含位置信息的對象position。

獲取緯度：position.coords.latitude

獲取經度：position.coords.longitude

(2)當獲取地理信息失敗後，會調用errorCallback，並返回錯誤信息error

(3)可選參數 options 對象可以調整位置信息數據收集方式:timeout 超時設置，單位為ms

8.web存儲

8.1 特性

設置、讀取方便
容量較大，sessionStorage約5M、localStorage約20M
只能存儲字符串，可以將對象JSON.stringify() 編碼後存儲

8.2 window.sessionStorage

生命周期為浏覽器窗口
不能在多窗口下數據共享，但通過跳轉可以

8.3 window.localStorage

永久生效，除非手動刪除
可以多窗口共享

8.4 方法詳解

setItem(key,value)//設置存儲內容
getItem(key) //獲取存儲內容
removeItem(key) //刪除key值的存儲內容
claer() //清除所有存儲內容
key(n) //以索引值來獲取存儲內容

8.5 sessionStorage,localStorage和cookie的區別

區別：

cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie在浏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。cookie數據還有路徑（path）的概念，可以限制cookie只屬於某個路徑下。存儲大小限制也不同，cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。數據有效期不同，sessionStorage：僅在當前浏覽器窗口關閉前有效，自然也就不可能持久保持；localStorage：始終有效，窗口或浏覽器關閉也一直保存，因此用作持久數據；cookie只在設置的cookie過期時間之前一直有效，即使窗口或浏覽器關閉。作用域不同，sessionStorage不在不同的浏覽器窗口中共享，即使是同一個頁面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

差異性：

相同點：都是存儲數據，存儲在web端，並且都是同源

不同點：

cookie 只有4K 小並且每一次請求都會帶上cookie 體驗不好，浪費帶寬
session和local直接存儲在本地，請求不會攜帶，並且容量比cookie要大的多
session 是臨時會話，當窗口被關閉的時候就清除掉，而 local永久存在，cookie有過期時間
cookie 和local都可以支持多窗口共享，而session不支持多窗口共享但是都支持a鏈接跳轉的新窗口

9. 全屏顯示

requestFullScreen()//開啟全屏顯示

cancelFullScreen()//退出全屏顯示

10. 文件讀取

通過FileReader對象能夠實現對本地存儲文件的讀取，可以使用 File 對象來指定所要讀取的文件或數據。其中File對象可以是來自用戶在一個 <input\>元素上選擇文件後返回的FileList 對象，也可以來自由拖放操作生成的DataTransfer。

10.1 FlieList對象

由於HTML5中我們可以通過為表單元素添加multiple屬性，因此我們通過<input\>上傳文件後得到的是一個FileList對象（偽數組形式）。

10.2 FileReader對象

HTML5新增內建對象，可以讀取本地文件內容。

通過 new FileReader()實例化一個對象。

使用.readAsDataURL()方法來讀取文件，文件讀取結果放在result屬性中。

11. 拖拽元素

通過設置元素的draggables屬性為true來實現，img和a元素默認可以拖拽。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            margin: 100px auto;
            border-radius: 5px;
            box-shadow: 0 0 2px 2px #000;
        }
        .box img{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <input type="file">
    <button>點擊我進行讀取文件</button>
    <div class="box"></div>
    <script type="text/javascript">    
    // 獲取元素
    var file = document.querySelector('input[type=file]');
    var btn = document.querySelector('button');
    var box = document.querySelector('.box');
    // 給按鈕注冊點擊事件
    btn.addEventListener('click', function (argument) {
        // 獲取file對象裡面的值
        var data = file.files[0];
        var type = data.type;
        // 創建一個讀取文件的對象
        var fr = new FileReader();
        // 讀取data數據 這是一個異步操作
        fr.readAsDataURL(data);
        // 當讀取完成以事件的形式通知
        fr.addEventListener('load',function (argument) {
            // 文件讀取完畢之後，存放在fr對象下面的result屬性裡面
            var result = fr.result;                    
            // 判斷type類型裡面包不包含image/
            if(type.indexOf('image/') -1){
                // 創建一個img標簽
                var img = document.createElement('img');
                img.src = result;
                // 清空box裡面的標簽
                box.innerHTML = '';
                box.appendChild(img);
            }else if(type.indexOf('video/') -1){
                var video = document.createElement('video');
                video.src = result;
                // 設置video默認播放
                video.setAttribute('autoplay','autoplay');
                // 清空box裡面的標簽
                box.innerHTML = '';
                box.appendChild(video);
            }else{
                alert('請上傳正確的格式');
            }
        })
    })
    </script>
</body>
</html>

事件監聽：

1、拖拽元素

ondrag 應用於拖拽元素，整個拖拽過程都會調用
ondragstart 應用於拖拽元素，當拖拽開始時調用
ondragleave 應用於拖拽元素，當鼠標離開拖拽元素時調用
ondragend 應用於拖拽元素，當拖拽結束時調用

2、目標元素

ondragenter 應用於目標元素，當拖拽元素進入時調用
ondragover 應用於目標元素，當停留在目標元素上時調用
ondrop 應用於目標元素，當在目標元素上松開鼠標時調用
ondragleave 應用於目標元素，當鼠標離開目標元素時調用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .info{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            border-radius: 5px;
            box-shadow: 0 0 2px 2px;
            margin: 10px auto;
        }
    </style>
</head>
<body>
    <!-- 給元素添加draggable=true就可以實現元素的拖拽 -->
    <div draggable='true' class="box"></div>
    <div class="info"></div>

    <script type="text/javascript">
    var box = document.querySelector('.box');
    var info = document.querySelector('.info');
    var body = document.body;
    // 拖拽開始
    box.addEventListener('dragstart', function (argument) {
        this.style.backgroundColor = 'green';
    })
    // 拖拽結束
    box.addEventListener('dragend', function (argument) {
        this.style.backgroundColor = 'red';
    })
    //拖拽中 ,會在拖拽的時候持續觸發
    /*box.addEventListener('drag',function (argument) {
        console.log('丫的，快撒手');
    })*/
    // 當拖拽元素進入到當前目標元素的時候觸發
    info.addEventListener('dragenter',function(){
        //console.log('喲，您老來了！！');
        info.style.boxShadow = '0 0 2px 5px red';
    })

    // 當拖拽元素離開目標元素的時候觸發
    info.addEventListener('dragleave',function(){
        //console.log('下次再來！！');
        info.style.boxShadow = '0 0 2px 2px';
    })
    // 當拖拽元素在目標上面的時候連續觸發
    info.addEventListener('dragover', function (event) {
        //console.log('一直在外面，沒好意思進去');
        // 阻止默認行為
        event.preventDefault();
    })

    // 當拖拽元素進入到當前目標元素的時候松開鼠標觸發（把東西扔進來觸發）
    // 這是事件要想觸發 一定在要dragover的時候阻止掉默認事件
    info.addEventListener('drop',function(event){
        //console.log('快請進，快請進');
        // 阻止事件冒泡
        event.stopPropagation();
        this.appendChild(box);     
    })

    // 當拖拽元素在目標上面的時候連續觸發
    body.addEventListener('dragover', function (event) {
        //console.log('一直在外面，沒好意思進去');
        // 阻止默認行為
        event.preventDefault();
    })

    body.addEventListener('drop',function(){
        console.log(1)
        this.appendChild(box);
    })
    </script>
</body>
</html>