html頭部放什麼東西
- 青灯夜游原創
- 2021-12-14 12:06:173611瀏覽
html頭部需要放：1、title標籤，設定文件標題；2、多個meta標籤，設定編碼方式、網站描述和Viewport；3、link標籤，設定網頁標題的小圖示和引入樣式檔；4、script標籤，引進腳本檔。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
這是我在面試時遇到的問題，平常習慣用外掛！加上Tab生成html5結構的我，除了說放css和js外竟然想不起來還要放什麼，這個問題看起來很簡單，卻很容易被我們忽略，所以寫篇文章總結一下，HTML head （頭部）裡面該放什麼？
必要的title
title是必要的，但是如果沒有加，瀏覽器也會自動幫你加上。
<head> <title>web</title> </head>
Encoding（編碼方式）
編碼方式的規格是放在head的最前面，如果不指定，瀏覽器也會根據伺服器的header進行判定，但是不一定準確。
<head> <meta charset="UTF-8"> <title>web</title> </head>
Description（網站描述）
之前沒有註意到這個，就是對你的網站描述，搜尋引擎會看到，在SEO裡面應該很常用
<meta name="description" content="这里是对网站的描述">
Viewport
這個就很常見了，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:使用者是否可以手動縮放。
Favicon
這個是網頁標題左邊的小圖標，指定他的路徑，如果沒有指定，瀏覽器會在根目錄下尋找
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
css
透過link標籤鏈入樣式檔案
<link rel="stylesheet" href="css/test.css">
javascript(重點）
#透過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影片教學》
以上是html頭部放什麼東西的詳細內容。更多資訊請關注PHP中文網其他相關文章！