所謂元信息，是指描述自身的信息，元信息類標(biāo)簽，就是 HTML 用于描述文檔自身的一類標(biāo)簽，它們通常出現(xiàn)在 head 標(biāo)簽中，一般都不會(huì)在頁(yè)面被顯示出來(lái)（與此相對(duì)，其它標(biāo)簽，如語(yǔ)義類標(biāo)簽，描述的是業(yè)務(wù)）。
元信息多數(shù)情況下是給瀏覽器、搜索引擎等機(jī)器閱讀的，有時(shí)候這些信息會(huì)在頁(yè)面之外顯示給用戶，有時(shí)候則不會(huì)。
1.head
是作為盛放其它語(yǔ)義類標(biāo)簽的容器使用。
head 標(biāo)簽規(guī)定了自身必須是 html 標(biāo)簽中的第一個(gè)標(biāo)簽，它的內(nèi)容必須包含一個(gè) title，并且最多只能包含一個(gè) base。如果文檔作為 iframe，或者有其他方式指定了文檔標(biāo)題時(shí)，可以允許不包含 title 標(biāo)簽。
title 標(biāo)簽
title 標(biāo)簽表示文檔的標(biāo)題，我們的語(yǔ)義類標(biāo)簽中也有一組表示標(biāo)題的標(biāo)簽：h1-h6。
heading 和 title 兩個(gè)英文單詞意義區(qū)分十分微妙，實(shí)際使用中，兩者確實(shí)有一定區(qū)別。
在 HTML 標(biāo)準(zhǔn)中，特意討論了這個(gè)問題。
我們思考一下，假設(shè)有一個(gè)介紹蜜蜂跳舞求偶儀式的科普頁(yè)面，我們?cè)囍岩韵聝蓚€(gè)文字分別對(duì)應(yīng)到 title 和 h1。
蜜蜂求偶儀式舞蹈
舞蹈
在聽 / 看正確答案前，你不妨先想想，自己的答案是什么呢？
為什么？
好了，思考之后，我們來(lái)看看正確答案。
正確答案是“蜜蜂求偶儀式舞蹈”放入 title，“舞蹈”放入 h1。我來(lái)講一講為什么要這樣放呢？這主要是考慮到 title 作為元信息，可能會(huì)被用在瀏覽器收藏夾、微信推送卡片、微博等各種場(chǎng)景，這時(shí)侯往往是上下文缺失的，所以 title 應(yīng)該是完整地概括整個(gè)網(wǎng)頁(yè)內(nèi)容的。
而 h1 則僅僅用于頁(yè)面展示，它可以默認(rèn)具有上下文，并且有鏈接輔助，所以可以簡(jiǎn)寫，即便無(wú)法概括全文，也不會(huì)有很大的影響。
base 標(biāo)簽
base 標(biāo)簽實(shí)際上是個(gè)歷史遺留標(biāo)簽。它的作用是給頁(yè)面上所有的 URL 相對(duì)地址提供一個(gè)基礎(chǔ)。base 標(biāo)簽最多只有一個(gè)，它改變?nèi)值逆溄拥刂?，它是一個(gè)非常危險(xiǎn)的標(biāo)簽，容易造成跟 JavaScript 的配合問題，所以在實(shí)際開發(fā)中，我比較建議你使用 JavaScript 來(lái)代替 base 標(biāo)簽。
meta 標(biāo)簽
meta 標(biāo)簽是一組鍵值對(duì)，它是一種通用的元信息表示標(biāo)簽。
在 head 中可以出現(xiàn)任意多個(gè) meta 標(biāo)簽。
一般的 meta 標(biāo)簽由 name 和 content 兩個(gè)屬性來(lái)定義。
name 表示元信息的名，content 則用于表示元信息的值。它基本用法是下面這樣的，你也可以自己動(dòng)手嘗試一下：
<meta name=application-name content="lsForums">
這個(gè)標(biāo)簽表示頁(yè)面所在的 web-application，名為 IsForums。
這里的 name 是一種比較自由的約定，HTTP 標(biāo)準(zhǔn)規(guī)定了一些 name 作為大家使用的共識(shí)，也鼓勵(lì)大家發(fā)明自己的 name 來(lái)使用。
除了基本用法，meta 標(biāo)簽還有一些變體，主要用于簡(jiǎn)化書寫方式或者聲明自動(dòng)化行為。下面我就挑幾種重點(diǎn)的內(nèi)容來(lái)分別講解一下。
具有 charset 屬性的 meta
從 HTML5 開始，為了簡(jiǎn)化寫法，meta 標(biāo)簽新增了 charset 屬性。添加了 charset 屬性的 meta 標(biāo)簽無(wú)需再有 name 和 content。
<meta charset="UTF-8" >
charset 型 meta 標(biāo)簽非常關(guān)鍵，它描述了 HTML 文檔自身的編碼形式。因此，我建議這個(gè)標(biāo)簽放在 head 的第一個(gè)。
<html>
<head>
<meta charset="UTF-8">
……
這樣，瀏覽器讀到這個(gè)標(biāo)簽之前，處理的所有字符都是 ASCII 字符，眾所周知，ASCII 字符是 UTF-8 和絕大多數(shù)字符編碼的子集，所以，在讀到 meta 之前，瀏覽器把文檔理解多數(shù)編碼格式都不會(huì)出錯(cuò)，這樣可以最大限度地保證不出現(xiàn)亂碼。
一般情況下，HTTP 服務(wù)端會(huì)通過 http 頭來(lái)指定正確的編碼方式，但是有些特殊的情況如使用 file 協(xié)議打開一個(gè) HTML 文件，則沒有 http 頭，這種時(shí)候，charset meta 就非常重要了。
具有 http-equiv 屬性的 meta
具有 http-equiv 屬性的 meta 標(biāo)簽，表示執(zhí)行一個(gè)命令，這樣的 meta 標(biāo)簽可以不需要 name 屬性了。例如，下面一段代碼，相當(dāng)于添加了 content-type 這個(gè) http 頭，并且指定了 http 編碼方式。
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
除了 content-type，還有以下幾種命令：
content-language 指定內(nèi)容的語(yǔ)言；
default-style 指定默認(rèn)樣式表；
refresh 刷新；
set-cookie 模擬 http 頭 set-cookie，設(shè)置 cookie；
x-ua-compatible 模擬 http 頭 x-ua-compatible，聲明 ua 兼容性；
content-security-policy 模擬 http 頭 content-security-policy，聲明內(nèi)容安全策略。
name 為 viewport 的 meta
實(shí)際上，meta 標(biāo)簽可以被自由定義，只要寫入和讀取的雙方約定好 name 和 content 的格式就可以了。
我們來(lái)介紹一個(gè) meta 類型，它沒有在 HTML 標(biāo)準(zhǔn)中定義，卻是移動(dòng)端開發(fā)的事實(shí)標(biāo)準(zhǔn)：它就是 name 為 viewport 的 meta。
這類 meta 的 name 屬性為 viewport，它的 content 是一個(gè)復(fù)雜結(jié)構(gòu)，是用逗號(hào)分隔的鍵值對(duì)，鍵值對(duì)的格式是 key=value。
例如：
<meta name="viewport" content="width=500, initial-scale=1">
這里只指定了兩個(gè)屬性，寬度和縮放，實(shí)際上 viewport 能控制的更多，它能表示的全部屬性如下：
width：頁(yè)面寬度，可以取值具體的數(shù)字，也可以是 device-width，表示跟設(shè)備寬度相等。
height：頁(yè)面高度，可以取值具體的數(shù)字，也可以是 device-height，表示跟設(shè)備高度相等。
initial-scale：初始縮放比例。
minimum-scale：最小縮放比例。
maximum-scale：最大縮放比例。
user-scalable：是否允許用戶縮放。
對(duì)于已經(jīng)做好了移動(dòng)端適配的網(wǎng)頁(yè)，應(yīng)該把用戶縮放功能禁止掉，寬度設(shè)為設(shè)備寬度，一個(gè)標(biāo)準(zhǔn)的 meta 如下：
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
其它預(yù)定義的 meta
在 HTML 標(biāo)準(zhǔn)中，還定義了一批 meta 標(biāo)簽的 name，可以視為一種有約定的 meta，我在這里列出來(lái)，你可以簡(jiǎn)單了解一下。
application-name：如果頁(yè)面是 Web application，用這個(gè)標(biāo)簽表示應(yīng)用名稱。
author: 頁(yè)面作者。
description：頁(yè)面描述，這個(gè)屬性可能被用于搜索引擎或者其它場(chǎng)合。
generator: 生成頁(yè)面所使用的工具，主要用于可視化編輯器，如果是手寫 HTML 的網(wǎng)頁(yè)，不需要加這個(gè) meta。
keywords: 頁(yè)面關(guān)鍵字，對(duì)于 SEO 場(chǎng)景非常關(guān)鍵。
referrer: 跳轉(zhuǎn)策略，是一種安全考量。
theme-color: 頁(yè)面風(fēng)格顏色，實(shí)際并不會(huì)影響頁(yè)面，但是瀏覽器可能據(jù)此調(diào)整頁(yè)面之外的 UI（如窗口邊框或者 tab 的顏色）。
