head 標籤裡有什麼？

樂亦慄發表於2019-03-20

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">
複製程式碼

當然還有很多其他的作用：

  1. 比如用於 SEO，主要給搜尋引擎看的：
<link rel="canonical" href="...">
複製程式碼

在網站中常有多個 url 指向同一個頁面的情況，上述標籤告知搜尋引擎頁面的主 url 是什麼，以便搜尋引擎保留主要頁面而去除其他重複頁面。

  1. 提供 rss 訂閱的：
<link rel="alternate" type="application/rss+xml" title="RSS" href="...">
複製程式碼

上述標籤除搜尋引擎可以看懂以外，也能被很多瀏覽器外掛識別。

  1. 表示頁面 icon 的：
<link rel="icon" href="https://xxx.png">
複製程式碼

多數瀏覽器會讀取這個 link 的資源並展示在頁面上。

  1. 對頁面提供預處理的：
<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 標籤裡都有什麼，遇到沒見過的就去搜尋一下，熟悉起來會很快。

我這邊看過的網站有：「淘寶網」、「阿里巴巴」、「京東」、「網易嚴選」、「起點中文網」等。

（完）

相關文章