每一個 HTML 文檔中，都有一個不可或缺的標簽： ，它作為一個容器，主要包含了用於描述 HTML 文檔自身信息（元數據）的標簽，這些標簽一般不會在頁面中被顯示出來，大多情況下是給瀏覽器和搜索引擎看的。 ...
head 標簽里有什麼？
每一個 HTML 文檔中，都有一個不可或缺的標簽：<head> ，它作為一個容器，主要包含了用於描述 HTML 文檔自身信息（元數據）的標簽，這些標簽一般不會在頁面中被顯示出來，大多情況下是給瀏覽器和搜索引擎看的。
可以用在 <head> 裡面的標簽有： <title> , <base> , <link> , <style> , <meta> , <script> , <noscript> 。
元信息標簽介紹
<title>
定義文檔的標題，顯示在瀏覽器的標題欄或標簽頁上，一般會完整地概括整個網頁的內容。
<base>
給頁面上所有相對 URL 的提供一個基礎。一份文檔中只能有一個 <base> 標簽。
目前我只觀察到「淘寶網」使用了這個標簽。
<link>
規定外部資源與當前文檔的關係，常於鏈接樣式表，如下所示：
<link rel="stylesheet" href="xxx.css" type="text/css">當然還有很多其他的作用：
- 比如用於 SEO，主要給搜索引擎看的：
<link rel="canonical" href="...">在網站中常有多個 url 指向同一個頁面的情況，上述標簽告知搜索引擎頁面的主 url 是什麼，以便搜索引擎保留主要頁面而去除其他重覆頁面。
- 提供 rss 訂閱的：
<link rel="alternate" type="application/rss+xml" title="RSS" href="...">上述標簽除搜索引擎可以看懂以外，也能被很多瀏覽器插件識別。
- 表示頁面 icon 的：
<link rel="icon" href="https://xxx.png">多數瀏覽器會讀取這個 link 的資源並展示在頁面上。
- 對頁面提供預處理的：
<link rel="dns-prefetch" href="//xxx.com">提前對一個功能變數名稱做 dns 查詢。強制對功能變數名稱進行預讀取在有的情況下很有用,。
比如, 在網站的主頁上，強制在整個網站上對頻繁引用的功能變數名稱做預解析處理，即使它們不在主頁本身上使用。雖然主頁的性能可能不受影響，但是會提高站點整體性能。
<style>
包含文檔的樣式信息。
<meta>
一種通用的元數據信息表示標簽，一般以鍵值對出現，如：<meta name="xxx" content="yyy">
charset 屬性
<meta charset="UTF-8">從 HTML5 開始，上述寫法被推薦使用，用於聲明當前文檔所使用的字元編碼，推薦放在 <head> 中的第一位。
http-equiv屬性
<meta http-equiv="content-type" content="text/html; charset=UTF-8">在 HTML4 中，上述代碼用於聲明字元集，但是現在已不被推薦。
除了 content-type ，還有其他幾個值：
content-language （已過時）、set-cookie （已過時）、default-style 、refresh 、content-security-policy
因為不常用，所以就不一一介紹了，也挺容易理解，感興趣可以點擊 這裡 瞭解。
name 屬性
其實 標簽可以被自由定義，只要讀取和寫入的雙方約定好 name 和 content 的格式就可以了。來看一個例子：
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">上面這種用法並不在 HTML 標準中，但是卻移動端開發的事實標準。這裡來解釋一下 content 中的內容：
- width ：頁面寬度，可以是一個正整數；也可以一個字元串 "device-width" ，表示跟設備寬度相等。
- height ：頁面高度，可以是一個正整數；也可以一個字元串 "device-height" ，表示跟設備高度相等。
- initial-scale ：初始縮放比例。
- minimum-scale ： 最小縮放比例。
- maximum-scale ： 最大縮放比例。
- user-scalable ：是否允許用戶縮放。
name 屬性的值除了可以是 viewport 之外，還有相當多的值：
application-name 、author 、description 、generator 、keywords 、referrer 、robots 等。
同樣的，就不一一介紹了，感興趣可以點擊 這裡 瞭解。
<script>
用於嵌入或引用可執行腳本。來看幾個 script 標簽常見的全局屬性：
async
使瀏覽器使用另一個線程下載腳本，這時不會阻塞頁面渲染。當腳本下載完成後，瀏覽器會暫停渲染，執行腳本，執行完畢後繼續渲染頁面。
async 無法保證腳本的執行順序，哪個腳本先下載結束就會先執行。
defer
同樣會使瀏覽器並行下載腳本，但是下載完畢不會立即執行，而是會等到 DOM 載入完成後（即剛剛讀取完
</html>標簽）再執行腳本。defer 可以保證腳本的執行順序就是它們在頁面上出現的順序。
src
定義引用外部腳本的地址，指定此屬性的 script 標簽內不應再有嵌入的腳本。如果腳本文件使用了非英語字元，還應該註明字元的編碼。如：
<script charset="utf-8" src="https://www.example.com/script.js"></script>type
預設值是 text/javascript
想瞭解更多關於 <script> 標簽的詳細內容可以點擊 這裡 。
<noscript>
如果頁面上的腳本類型不受支持或者當前在瀏覽器中關閉了腳本，則在此中定義腳本未被執行時的替代內容。
總結
本文到這裡就結束了，其實關於 link 和 meta 標簽還有很多沒有介紹到，很多相關標簽都是有特殊的需求，只有在特定情況下才會使用，比如移動端開發就會用許多在 PC 上並不需要的標簽。
當然平時使用也主要是看需求，就拿我目前來說，只是些許用到過一些與 viewport 和 SEO 相關的標簽。
鑒於此我推薦一個不錯的學習方法，就是去各大網站查看它們的 head 標簽里都有什麼，遇到沒見過的就去搜索一下，熟悉起來會很快。
我這邊看過的網站有：「淘寶網」、「阿裡巴巴」、「京東」、「網易嚴選」、「起點中文網」等。
（完）
