HTML5

知予貓發表於2020-12-23
HTML

HTML5簡單介紹

  • HTML5不是新語言，而是html語言的第五次重大修改；
  • 支援：所有的主流瀏覽器都支援H5（chrome firefox safari），特別要注意的IE9及以上支援H5（選擇性支援），但是IE8即以下不支援H5，會有相容問題；
  • 改變了使用者與文件的互動方式：多媒體（video audio canvas）
  • 增加了其他新特性：語義特性，本地儲存特性，網頁多媒體，二維三維，特效（過渡，動畫）；
  • 相對於H4;
  1. 進步 ：拋棄了一些不合理你常用的標記和屬性；
  2. 新增了一些標記和屬性————表單；
  3. 從程式碼角度而言，H5的網頁結構程式碼更簡潔；

語義標籤及相容

標籤名作用
nav導航
header頁首
footer頁尾
main文件主要內容
article文章
aside主題內容之外
  • 語義標籤的相容
  • 雖說IE9及以上的版本支援H5，但也是選擇性支援。比如語義標籤，可以識別，但是是被認為行內標籤識別的，因此需要把這些標籤轉為塊級標籤；
  • IE8及以下相容的解決方法：
  • 用JS建立標籤，且標籤設定為塊級標籤；
 <script>
        document.createElement("header");
        document.createElement("nav");
        document.createElement("main");
        document.createElement("article");
        document.createElement("aside");
        document.createElement("footer");
    </script>
  • 缺點：比較繁瑣，在工作中也不常用；
  1. 引入第三方外掛；
 <script src="js/html5shiv.min.js"></script>

表單新增的type屬性

新增的type屬性解釋說明
email提供預設的電子郵箱完整驗證，必須包含@和伺服器名稱
tel在移動端開啟數字鍵盤
url驗證輸入合法網址
number只能輸入數字（包含小數點），可以設定數字範圍，最大最小值
search提供更人性化的輸入體驗，可以一鍵刪除輸入內容
range範圍
color顏色選取（用的不多）
time時間，時分秒
date日期，年月日
datetime日期時間，除了蘋果下的safari支援，其餘均不支援
datetime-local日期時間，主流瀏覽器支援
month月份
week星期

在這裡插入圖片描述

表單種新增其他屬性

屬性說明
placeholder提示文字
autofocus自動獲取焦點
autocomplete自動完成on/off：1.必須成功提交過 2.當前新增此屬性的元素必須有name屬性
required必須輸入
pattern正規表示式
multiple可以選擇多個檔案或允許輸入多個郵箱，逗號隔開
form指定表單id，則在表單提交時，此表單元素的資料會一起提交
datalist建立選擇列表（與輸入框通過list="id值"屬性關聯），如果輸入框類型別為網址，value值必須為網址
option建立選項，value:具體值，lable:提示資訊
keygen加密
output顯示輸出資訊，只顯示，不能修改（語義性個更強，值需要設定，不能自動計算）

新增表單事件

事件名稱事件說明
oninput只要內容改變，就會觸發此事件
onkeyup鍵盤抬起時觸發
oninvalid當驗證不通過時觸發，可設定預設的提示資訊
  • 進度條：
  • progress：兩個屬性，max：最大值，value：當前進度值；
  • meter(度量器)：high(規定較高的值)，low(規定較低的值)，max(最大值)，min(最小值)，value(當前值)

新增多媒體標籤

標籤解釋說明
audio音訊
video視訊
  • 相關屬性
屬性名稱解釋說明
src檔案的路徑
controls播放器的控制皮膚
autoplay自動播放
loop迴圈
height高度（視訊）
width寬度（視訊）
poster視訊位完全下載或者使用者未點選播放時的預設畫面。預設為視訊的第一幅畫面
source解決不同瀏覽器支援不同視訊格式的問題，讓瀏覽器自動選擇
<audio src="mp3/aa.mp3" controls autoplay></audio>
    <video controls src="">
        <source src="mp3/mp4.mp4" type="video/mp4">
        <source src="mp3/mp4.flv" type="video/flv">
            當前瀏覽器不支援當前的視訊播放
    </video>
  • 注意：設定寬高時，通常指設定寬或者高，讓其自動等比縮放，或者等比例設定，否則達不到理想寬高；
  • 之前多媒體的使用
  • embed：直接插入視訊檔案，本質是呼叫本機上已經安裝的軟體，有相容性；
  • flash：安裝flash，使用前需要先學，增加使用成本，且蘋果裝置不支援；

新增類樣式操作

屬性名稱解釋說明
add為元素新增指定的樣式，一次只能新增一次
classList當前元素所有樣式列表——陣列
remove為元素移除指定類樣式
toggle為元素切換指定類樣式
<style>
        .red {
            color: red;
        }

        .green {
            color: green;
        }

        .blue {
            color: blue;
        }

        .underline {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <ul>
        <li>前端開發</li>
        <li class="blue">Java</li>
        <li>JS</li>
        <li>C++</li>
    </ul>
    <input type="button" value="為第一個li新增樣式" id="add">
    <input type="button" value="為第二個li移除樣式" id="remove">
    <input type="button" value="為第三個li元素切換樣式" id="toggle">
    <input type="button" value="判斷第四個類元素是否包含某種樣式" id="contain">
    <script>
        window.onload = function () {
            document.getElementById("add").onclick = function () {
                document.querySelector("li").classList.add("red");
                document.querySelector("li").classList.add("underline");
            };
            document.querySelector("#remove").onclick = function () {
                document.querySelector(".blue").classList.remove("blue");
            };
            document.querySelector("#toggle").onclick = function () {
                document.querySelectorAll("li")[2].classList.toggle("green");
            };
            document.querySelector("#contain").onclick = function () {
                var result = document.querySelectorAll("li")[3].classList.contains("red");
                console.log(result);
            };
        };
    </script>
</body>

自定義屬性

  • 定義：
  1. data- 開頭；
  2. data-後面必須至少有一個字元，多個單詞連續使用用-連線；
    命名建議：
  3. 都是用小寫字母（不要包含任何的大寫字母）
  4. 不要有任何特殊字元
  5. 不要純數字
  • 獲取自定義屬性的值：
  • 元素.dataset[“自定義屬性的名稱”];
  • 注意：此處獲取的名稱必須是駝峰命名法，否則獲取不到值；
<body>
    <p data-school-name="mm">密碼</p>
    <script>
        var pObj = document.querySelector("p");
        var value=pObj.dataset["schoolName"];
        console.log(value);
    </script>
</body>

介面

網路介面解釋說明
ononline網路聯通時觸發
onoffline網路斷開時觸發
全屏介面解釋說明
requestFullScreen ()開啟全屏顯示
cancelFullScreen()退出全屏顯示
fullScreenElement是否是全屏狀態
  • 注意：不同的瀏覽器需要新增不同的字首，chorme：webkit ；firebox：moz ；opera：o ；ie：ms；
<body>
    <div>
        <img src="images/banner_1.jpg" alt="">
        <input type="button" value="全屏" id="full">
    </div>
    <script>
        window.onload = function () {
            var div = document.querySelector("div");
            // 全屏操作
            document.querySelector("#full").onclick = function () {
                div.webkitRequestFullScreen();
            };
        };
    </script>
</body>

FileReader使用

  1. readAsText()：讀取文字檔案(可以使用Txt開啟的檔案)，返回文字字串，預設編碼UTF-8;
  2. readAsBinaryString():讀取任意型別的檔案，返回二進位制字串；（這個方法不是用來讀取檔案展示給使用者看的，而是儲存檔案，例如讀取檔案的內容，獲取二進位制資料，傳遞給後臺，後臺收到了資料之後，再將資料儲存）；
  3. readAsDataURL()：讀取檔案獲取一段以data開頭的字串，這段字串本質就是DataURL，DataURL是一種將檔案嵌入文件的方案，是將資源轉化為base64編碼的字串形式，並且將這些內容直接儲存在url種；---->優化網站的載入速度和執行效率；
  4. src：指定路徑（資源定位–url），src請求是外部檔案，一般來說是伺服器資源，意味著它需要向伺服器傳送請求，它佔用伺服器資源；
  5. abort()：中斷讀取；
function getFileContent() {
            // 1.獲取檔案讀取物件
            var reader = new FileReader();
            // 2.讀取檔案，獲取DataURL
            /*
            2.1 void說明沒有任何的返回值，但是讀取完檔案後，它會將讀取的結果儲存在檔案讀取物件的result中；
            2.2 需要傳遞一個引數 binary large object ：檔案（圖片或其他可以嵌入到文件的型別）；
            2.3 檔案儲存在file表單元素的files屬性中，它是一個陣列；
            */
            var file = document.querySelector("#myFile").files;
            reader.readAsDataURL(file[0]);
            reader.onload = function () {
                /*展示*/
                document.querySelector("img").src = reader.result;
            };
        }
  • 獲取資料：
    FileReader提供一個完整的事件模型，用來捕獲讀取檔案時的狀態
事件名稱解釋說明
onabort讀取檔案中斷時觸發
onerror讀取錯誤時觸發
onload讀取檔案成功時觸發
onloadend讀取完成時觸發，無論成功與否
onloadstart開始讀取時觸發
onprogress讀取檔案過程中持續觸發

拖拽介面

  • 應用於拖拽元素：
事件名稱解釋說明
ondrag整個拖拽過程中持續呼叫
ondragstart拖拽開始時呼叫
ondragleave滑鼠離開拖拽元素時呼叫
ondragend拖拽結束時呼叫
  • 應用於目標元素
事件名稱解釋說明
ondragenter當拖拽元素進入時呼叫
ondragover當停留在目標元素上時呼叫
ondrop當在目標元素上鬆開滑鼠時呼叫（瀏覽器預設阻止此事件）
ondragleave當滑鼠離開目標元素時呼叫

  • e.target可以獲取當前被拖拽的子元素；

  • 最後滑鼠在哪個元素內鬆開滑鼠，此時的e.target就是滑鼠鬆開時所在的元素

  • 通過dataTransfer實現資料儲存

  • setData(format, data)；

  • form：資料型別（text/html text/uri-list）

  • Data：資料（一般來說是字串值）

  • 通過e.dataTransfer.setData儲存的資料，只能在drop事件中獲取

地理定位介面

  • 獲取當前的地理資訊：navigator.geolocation.getCurrentPosition(success,error,option);
引數解釋說明
success獲取地理資訊成功之後的回撥
error獲取地理資訊失敗之後的回撥
option調整獲取當前地理資訊的方式
  • option:可以設定獲取資料的方式
屬性解釋說明
enableHighAccuracytrue/false:是否使用高精度
timeout設定超時時間，單位ms
maximumAge可以設定瀏覽器重新獲取地理資訊的時間間隔，單位是ms
  • position.coords.latitude 緯度
  • position.coords.longitude 經度
  • position.coords.accuracy 精度
  • position.coords.altitude 海拔高度
<script>
    var x=document.getElementById("demo");
    function getLocation()
    {
        /*能力測試*/
        if (navigator.geolocation)
        {
            /*1.獲取地理資訊成功之後的回撥
            * 2.獲取地理資訊失敗之後的回撥
            * 3.調整獲取當前地進資訊的方式*/
            //navigator.geolocation.getCurrentPosition(success,error,option);
            /*option:可以設定獲取資料的方式
            * enableHighAccuracy:true/false:是否使用高精度
            * timeout:設定超時時間，單位ms
            * maximumAge:可以設定瀏覽器重新獲取地理資訊的時間間隔，單位是ms*/
            navigator.geolocation.getCurrentPosition(showPosition,showError,{
                /*enableHighAccuracy:true,
                timeout:3000*/
            });
        }
        else{
            x.innerHTML="Geolocation is not supported by this browser.";
        }
    }
    /*成功獲取定位之後的回撥*/
    /*如果獲取地理資訊成功，會將獲取到的地理資訊傳遞給成功之後的回撥*/
    // position.coords.latitude 緯度
    // position.coords.longitude 經度
    // position.coords.accuracy 精度
    // position.coords.altitude 海拔高度
    function showPosition(position)
    {
        x.innerHTML="Latitude: " + position.coords.latitude +
                "<br />Longitude: " + position.coords.longitude;
    }
    /*獲取定位失敗之後的回撥*/
    function showError(error)
    {
        switch(error.code)
        {
            case error.PERMISSION_DENIED:
                x.innerHTML="User denied the request for Geolocation."
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML="Location information is unavailable."
                break;
            case error.TIMEOUT:
                x.innerHTML="The request to get user location timed out."
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML="An unknown error occurred."
                break;
        }
    }
    getLocation();
</script>

儲存

  • sessionStorage的使用：儲存資料到本地。儲存的容量5mb左右
  1. 這個資料本質是儲存在當前頁面的記憶體中-意味著其它頁面和瀏覽器無法獲取資料
  2. 它的生命週期為關閉當前頁面，關閉頁面，資料會自動清除
方法解釋說明
setItem(key,value)儲存資料，以鍵值對的方式儲存
getItem(key)獲取資料，通過指定名稱的key獲取對應的value值
removeItem(key)刪除資料，通過指定名稱key刪除對應的值
clear()清空所有儲存的內容
  • localStorage的使用：
  1. 儲存的內容大概20mb
  2. 不同瀏覽器不能共享資料。但是在同一個瀏覽器的不同視窗中可以共享資料
  3. 永久生效，它的資料是儲存在硬碟上，並不會隨著頁面或者瀏覽器的關閉而清除.如果想清除，必須手動清除
方法解釋說明
setItem(key,value)儲存資料，以鍵值對的方式儲存
getItem(key)獲取資料，通過指定名稱的key獲取對應的value值
removeItem(key)刪除資料，通過指定名稱key刪除對應的值
clear()清空所有儲存的內容
<input type="text" id="userName"><br> 
<input type="button" value="設定資料" id="setData">
<input type="button" value="獲取資料" id="getData">
<input type="button" value="刪除資料" id="removeData">
<script>
    /*儲存資料*/
    document.querySelector("#setData").onclick=function(){
        /*獲取使用者名稱*/
        var name=document.querySelector("#userName").value;
        /*儲存資料*/
        window.sessionStorage.setItem("userName",name);
    }
    /*獲取資料*/
    document.querySelector("#getData").onclick=function(){
        /*如果找不到對應名稱的key,那麼就會獲取null*/
        var name=window.sessionStorage.getItem("userName");
        alert(name);
    }
    /*刪除資料*/
    document.querySelector("#removeData").onclick=function(){
        /*在刪除的時候如果key值錯誤，不會報錯，但是也不會刪除資料*/
        window.sessionStorage.removeItem("userName1");
    }
</script>

應用快取

  • 概念：使用HTML5，通過建立cache manifest 檔案，可以輕鬆地建立web應用的利希納版本；
  • 優勢：
  1. 可配置需要快取的資源；
  2. 網路無連線應用仍可用；
  3. 本地讀取快取資源，提升訪問速度，增強使用者體驗；
  4. 減少請求，環節伺服器負擔；
  • 如果需要啟用應用程式快取，請在文件標籤中包含manifest屬性：
<!DOCTYPE HTML>
<!--manifest="應用程式快取清單檔案的路徑  建議檔案的副檔名是appcache,這個檔案的本質就是一個文字檔案"-->
<html manifest="demo.appcache" >
...
</html>
  • 每個指定了manifest的頁面在使用者對其訪問時都會被快取。如果未指定manifest屬性，則頁面不會被快取（除非manifest檔案中直接指定了改頁面）
CACHE MANIFEST
#上面一句程式碼必須是當前文件的第一句
#後面寫註釋

#需要快取的檔案清單列表
CACHE:
#下面就是需要快取的清單列表
../images/l1.jpg
../images/l2.jpg
# *:代表所有檔案

#配置每一次都需要重新從伺服器獲取的檔案清單列表
NETWORK:
../images/l3.jpg

#配置如果檔案無法獲取則使用指定的檔案進行替代
FALLBACK:
../images/l4.jpg ../images/banner_1.jpg
# /:代表所有檔案

多媒體

  • 常用方法：
方法名作用
load()載入
play()播放
pause()暫停
  • jQuery沒有提供對視訊播放控制元件的方式，也就是意味著如果要操作視訊播放，必須使用原生的js方法，即jQuery元素要轉化成dom元素；
  • 常用屬性：
屬性解釋說明
currentTime視訊播放的當前進度
duration視訊的總時間
paused視訊播放的狀態
  • 常用事件
事件名解釋說明
oncanplay事件在使用者可以開始播放視訊/音訊時觸發
ontimeupdate通過該事件來報告當前的播放進度
onended播放完時觸發——重置

在這裡插入圖片描述

相關文章