HTML5的經常使用知識點 | 8月更文挑戰

這是我參與8月更文挑戰的第10天，活動詳情查看：8月更文挑戰css

enmmm，昨天寫的HTTP協議的文章沒有推薦上首頁，感受可能不算在挑戰內，不敢繼續寫了，今天寫個HTML5的吧……html

1、Doctype的做用

Doctype是html5標準網頁的聲明，且必須聲明在html文檔的第一行，來告知瀏覽器的解析器是用什麼文檔標準解析這個文檔，不一樣的渲染模式會影響到瀏覽器對於css代碼甚至js腳本的解析html5

有兩種模式：json

一、怪異模式：瀏覽器用自帶的模式解析頁面,若是html第一行沒寫Doctype就是默認怪異模式瀏覽器

二、標準模式：瀏覽器用標準的W3C模式解析頁面，按頁面中的html和css渲染緩存

2、HTML、XML、XHTML的區別

一、HTML：超文本標記語言markdown

二、XML：可擴展標記語言，用於存儲數據和結構，可擴展，和json相似，可是更輕量級，更高效網絡

三、XHTML：可擴展超文本標記語言，基於HTML和XML異步

3、經常使用的meta標籤

簡介：meta標籤由name和content兩個屬性定義，用來描述頁面的屬性，例如網頁描述，關鍵詞，頁面刷新，比例等async

一、charset表示頁面編碼

<meta charset='UTF-8'>
複製代碼

二、http-equiv表示文檔開頭的做用，能夠設置http緩存過時的時間

<meta http-equiv='expires' content='Sat,23 Jun 2099 18:00:00'>
複製代碼

三、viewport用來設置手機端的大小和比例

<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1' >
複製代碼

4、src和href的區別

一、src指向外部資源的位置，在請求時會把請求的地址下載下來，例如js文件或者img圖片等；而且此時瀏覽器會暫停執行頁面中其餘內容，直到src請求結束後再執行編譯

二、href指向網絡所在資源，例如cdn地址，可是瀏覽器會並行加載請求的地址，不會暫停執行頁面的其餘內容。

5、data-屬性你知道嗎

<div id='handlerList'>
    <ul>
        <li data-idx='1'>點擊1</li>
        <li data-idx='2' data-name='d2'>點擊2</li>
    </ul>
<div>
//js：
$("#handlerList li").click(function() {
    let idx = $(this)[0].dataset.idx;
    if(idx === 1) {
        ……
    }
})
複製代碼

表示html的數據屬性，能夠把數據存在html元素中。我以爲主要在jq中用的比較多，循環展現後經過不一樣的data-屬性來判斷作一些操做。

6、script標籤中的defer和async的做用和區別

一、defer：表示腳本在文檔解析後執行，異步加載後不會當即執行，而是等文檔解析後再執行

二、async：異步加載腳本，相比defer是async會在腳本解析後當即執行，因此這個屬性下js加載順序是亂的，每一個script不能存在關聯，不然會引發報錯

好啦，先寫這麼多，想要互讚的就讚我，我會贊回去，謝謝~