什麼HTML的頭部？
HTML頭部是包含在head元素裏面的內容。不像body元素的內容會顯示在瀏覽器中，head裏面的內容不會在瀏覽器中顯示，它的作用是包含一些頁面的元數據。下面這些標籤可用在head部分：link,meta,script,style和title
雖然head中的內容並不會渲染顯示，但是卻起着至關重要的作用，從head這個命名就足以看出它對整個文檔的意義。以下是head標籤的作用：
-
設定網站的樣式
-
加載和運行腳本
-
爲搜索引擎提供關鍵字，文檔描述，幫助做SEO
-
設定viewport，告訴設備如何進行渲染
head的標籤
-
title標籤
title是一個封閉標籤，在head中是成對出現。也就是title…title。在打開一個網頁時，網頁的上方的文字就是title部分。
title部分是對整個文檔意思的總結，也是seo最重要的設置部分
-
link的標籤
外部資源鏈接，除了常用的加載外部CSS的文件以外也有其他用途。
加載外部css
<link href="styles.css" rel="stylesheet" type="text/css" />其中三個屬性依次是：
- href：資源的地址，全稱是 Hypertext Reference 。
- rel：是用來描述該資源與文檔之間的關係
- type：用來描述資源的MIME類型。
除此三個以外，CSS資源鏈接還支持更多的屬性。
例如：
media：添加一個媒體查詢，是該CSS文件作用於特定的設備上
<link href="styles-a.css" rel="stylesheet" media="print" />
<link href="styles-b.css" rel="stylesheet" media="screen and (min-width: 600px)" />
設定icon
<link rel="icon" href="favicon.ico" />
多語言支持
rel="alternate"結合hreflang屬性可以幫助搜索引擎爲用戶提供適合其語言的網址。
style標籤
文檔的CSS。與通過link來加載CSS文件最大的區別在於style標籤中的樣式不容易多個頁面之間複用，並且無法利用客戶端的緩存，動態性很好。
以下是簡單的例子：
<style type="text/css">
body {
color:red;
}
</style>
script標籤
<!-- HTML4 and (x)HTML -->
<script type="text/javascript" src="javascript.js">
<!-- HTML5 -->
<script src="javascript.js"></script>
腳本也可以不從外部引入
<script>console.log('Hello!')</script>
以下是script的屬性元素
-
async：表示應該立即下載腳本，但不應該妨礙頁面中的其他操作，比如下載其他資源或等待加載其他腳本。只對外部腳本文件有效。
-
type：可以看成是language的替代屬性 ，一般會將 type 設置爲 type=“text/javascript” 。
-
defer： 可以讓瀏覽器對當前腳本進行異步加載。
-
src：表示包含要執行代碼的外部文件。
charset，language等屬性已經有很少的人在用，甚至被棄用。
meta標籤
head包含的頁面的元數據(描述數據的數據)，所有head中的元數據都是不會直接渲染的，比如標題，樣式等等。meta可以包含的信息種類更加豐富。
根據用途進行以下分類：
-
設置charset
設置頁面字符編碼，如：
<meta charset="utf-8">實際請求頁面的時候響應頭如果有content-type字段，它裏面的charset會覆蓋當前meta標籤中的值。如：content-type：text/html；charset=utf-8
-
設置viewport
viewport是一個虛擬的窗口，用戶通過它來查看頁面內容。viewport的寬度可以被認爲設置，並且允許縮放。
以下的例子是將viewport的寬度設置爲設備寬度，初始縮放比爲：1
<meta name="viewport" content="width=device-width, initial-scale=1"> -
開啓IE edge模式
如果頁面需要支持老版本IE，請加上：
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>它會讓IE瀏覽器使用盡量高版本的模式對頁面進行解析，在一定程度上減少兼容性以及提高性能的問題
小結
標籤中的內容我們一般不會關注太多，很多東西還停留在過去對其基本的認識上。但是隨着 W3C 不斷提出對客戶端及搜索引擎更加友好的標準和特性，加之瀏覽器也在不斷地提供支持，開發者應該更多地瞭解和應用它們，爲用戶帶來更好的體驗。