溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了html頭部需要放什么，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
html頭部需要放：1、title標簽，設置文檔標題；2、多個meta標簽，設置編碼方式、網站描述和Viewport；3、link標簽，設置網頁標題的小圖標和引入樣式文件；4、script標簽，引入腳本文件。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
title是必要的，但是如果沒有加，瀏覽器也會自動幫你加上。
<head> <title>web</title> </head>
編碼方式的規范是放在head的最前面，如果不指定，瀏覽器也會根據服務器的header進行判定，但是不一定準確。
<head> <meta charset="UTF-8"> <title>web</title> </head>
之前沒有注意到這個，就是對你的網站描述，搜索引擎會看到，在SEO里面應該很常用
<meta name="description" content="這里是對網站的描述">
這個就很常見了，viewport一般是做移動端適配，將頁面放在一個虛擬的窗口中-viewport中，如果網頁沒有用viewport就會出現我們在手機瀏覽器打開時很小，而且還可以移動縮放，low爆了，viewport就是讓網頁開發者通過其大小,動態的設置其網頁內容中控件元素的大小,從而使得在瀏覽器上實現和web網頁中相同的效果(比例縮小)。，用來更好支持響應式網站。
<meta name="viewport" content="width=device-width, initial-scale=1">
width:控制viewport的大小，一般情況下指定為device-width(單位為縮放為100%的CSS像素),也可以指定一個固定的值例如600.
height:和width相應,指定高度。
initial-scal:初始縮放比例,頁面第一次load的時候的縮放比例。
maximum-scale:允許用戶縮放到的最大比例。
minimum-scale:允許用戶縮放到的最小比例。
user-scalable:用戶是否可以手動縮放。
這個是網頁標題左邊的小圖標，指定他的路徑，如果沒有指定，瀏覽器會在根目錄下尋找
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
通過link標簽鏈入樣式文件
<link rel="stylesheet" href="css/test.css">
通過script標簽鏈入腳本文件
<script src="js/test.js"></script>
這里我們討論幾個點
1 js文件放在head里面和放在body里面的區別
首先放在head里面，script 標簽如果沒加上 async屬性的話，會 block 住瀏覽器，就是要下載完這個js文件才會進行下一步操作，如果文件很小還好，如果是比較大的，就會有阻塞的效果，影響用戶體驗。
瀏覽器解析網頁時是一行行解析的，就是說解析到head里面的js文件時就會停下來，而我們的Dom結構是在head下面的body標簽里面，就是說我們得等js文件下載完成才能看到body的內容，那我們選擇放在body底部的話，瀏覽器就會優先加載dom，解析到body底部的js時才去下載，但是在下載之前我們已經能看到body的內容，瀏覽體驗就會好一點，
那有人會問，放在body頭部和底部有什么區別呢？其實放在body頭部的話就和放在head里面一樣的啦
2 js文件放在head里面避免弊端
有兩個屬性可以解決js文件同步下載的問題： defer和async
defer：
如果一個script加了defer屬性，即使放在head里面，它也會在html頁面解析完畢之后再去執行，也就是類似于把這個script放在了頁面底部。
<script defer src="test.js"></script>
async：
對于async，這個是html5中新增的屬性，它的作用是能夠異步的加載和執行腳本，不因為加載腳本而阻塞頁面的加載。一旦加載到就會立刻執行。有 async，加載和渲染后續文檔元素的過程將和 script.js 的加載與執行并行進行（異步）。但是很有可能不是按照原本的順序來執行的。如果js前后有依賴性，用async，就很有可能出錯。
<script async src="test.js"></script>
3 最好把js文件放在哪
現在瀏覽器做了一些優化，即使把js放在head里面也不會有大問題，所以我們可以將必要的js放在head里面，比較大的js放在body的底部，但是最簡單最好方法就是放在body底部，W3C是將js放在head里面；
感謝你能夠認真閱讀完這篇文章，希望小編分享的“html頭部需要放什么”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
