head 標簽

首先我們先來了解一下 head 標簽，head 標簽本身并不攜帶任何信息，它主要是作為盛放其它語義類標簽的容器使用。

head 標簽規定了自身必須是 html 標簽中的第一個標簽，它的內容必須包含一個 title，并且最多只能包含一個 base。如果文檔作為 iframe，或者有其他方式指定了文檔標題時，可以允許不包含 title 標簽。

title 標簽

你還記得嗎，我們的語義類標簽中也有一組表示標題的標簽：h1-h6。

heading 和 title 兩個英文單詞意義區分十分微妙，在中文中更是找不到對應的詞匯來區分。但是實際使用中，兩者確實有一定區別。

在 HTML 標準中，特意討論了這個問題。我們思考一下，假設有一個介紹蜜蜂跳舞求偶儀式的科普頁面，我們試著把以下兩個文字分別對應到 title 和 h1。

• 蜜蜂求偶儀式舞蹈
• 舞蹈

在聽 / 看正確答案前，你不妨先想想，自己的答案是什么呢？為什么？

好了，思考之后，我們來看看正確答案。正確答案是“蜜蜂求偶儀式舞蹈”放入 title，“舞蹈”放入 h1。

我來講一講為什么要這樣放呢？這主要是考慮到 title 作為元信息，可能會被用在瀏覽器收藏夾、微信推送卡片、微博等各種場景，這時侯往往是上下文缺失的，所以 title 應該是完整地概括整個網頁內容的。

而 h1 則僅僅用于頁面展示，它可以默認具有上下文，并且有鏈接輔助，所以可以簡寫，即便無法概括全文，也不會有很大的影響。

base 標簽

base 標簽實際上是個歷史遺留標簽。它的作用是給頁面上所有的 URL 相對地址提供一個基礎。

base 標簽最多只有一個（若有多個就使用第一個），它改變全局的鏈接地址，它是一個非常危險的標簽，容易造成跟 JavaScript 的配合問題，所以在實際開發中，我比較建議你使用 JavaScript 來代替 base 標簽。

meta 標簽

在 head 中可以出現任意多個 meta 標簽。一般的 meta 標簽由 name 和 content 兩個屬性來定義。name 表示元信息的名，content 則用于表示元信息的值。

具有 http-equiv 屬性的 meta

具有 http-equiv 屬性的 meta 標簽，表示執行一個命令，這樣的 meta 標簽可以不需要 name 屬性了。

例如，下面一段代碼，相當于添加了 content-type 這個 http 頭，并且指定了 http 編碼方式。

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

除了 content-type，還有以下幾種命令：

• content-language 指定內容的語言；
• default-style 指定默認樣式表；
• refresh 刷新；
• set-cookie 模擬 http 頭 set-cookie，設置 cookie；
• x-ua-compatible 模擬 http 頭 x-ua-compatible，聲明 ua 兼容性；
• content-security-policy 模擬 http 頭 content-security-policy，聲明內容安全策略。

name 為 viewport 的 meta

實際上，meta 標簽可以被自由定義，只要寫入和讀取的雙方約定好 name 和 content 的格式就可以了。

我們來介紹一個 meta 類型，它沒有在 HTML 標準中定義，卻是移動端開發的事實標準：它就是 name 為 viewport 的 meta。

orz viewport 竟然是自定義的

這類 meta 的 name 屬性為 viewport，它的 content 是一個復雜結構，是用逗號分隔的鍵值對，鍵值對的格式是 key=value。

它能表示的全部屬性如下：

• width：頁面寬度，可以取值具體的數字，也可以是 device-width，表示跟設備寬度相等。
• height：頁面高度，可以取值具體的數字，也可以是 device-height，表示跟設備高度相等。
• initial-scale：初始縮放比例。
• minimum-scale：最小縮放比例。
• maximum-scale：最大縮放比例。
• user-scalable：是否允許用戶縮放。

對于已經做好了移動端適配的網頁，應該把用戶縮放功能禁止掉，寬度設為設備寬度，一個標準的 meta 如下：

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

其它預定義的 meta

在 HTML 標準中，還定義了一批 meta 標簽的 name，可以視為一種有約定的 meta，我在這里列出來，你可以簡單了解一下。

application-name：如果頁面是 Web application，用這個標簽表示應用名稱。

• author: 頁面作者。
• description：頁面描述，這個屬性可能被用于搜索引擎或者其它場合。
• generator: 生成頁面所使用的工具，主要用于可視化編輯器，如果是手寫 HTML 的網頁，不需要加這個 meta。
• keywords: 頁面關鍵字，對于 SEO 場景非常關鍵。
• referrer: 跳轉策略，是一種安全考量。
• theme-color: 頁面風格顏色，實際并不會影響頁面，但是瀏覽器可能據此調整頁面之外的 UI（如窗口邊框或者 tab 的顏色）。

others