所謂元信息，是指描述自身的信息，元信息類標簽，就是 HTML 用于描述文檔自身的一類標簽，它們通常出現在 head 標簽中，一般都不會在頁面被顯示出來（與此相對，其它標簽，如語義類標簽，描述的是業務）。
元信息多數情況下是給瀏覽器、搜索引擎等機器閱讀的，有時候這些信息會在頁面之外顯示給用戶，有時候則不會。
1.head
是作為盛放其它語義類標簽的容器使用。
head 標簽規定了自身必須是 html 標簽中的第一個標簽，它的內容必須包含一個 title，并且最多只能包含一個 base。如果文檔作為 iframe，或者有其他方式指定了文檔標題時，可以允許不包含 title 標簽。
title 標簽
title 標簽表示文檔的標題，我們的語義類標簽中也有一組表示標題的標簽：h1-h6。
heading 和 title 兩個英文單詞意義區分十分微妙，實際使用中，兩者確實有一定區別。
在 HTML 標準中，特意討論了這個問題。
我們思考一下，假設有一個介紹蜜蜂跳舞求偶儀式的科普頁面，我們試著把以下兩個文字分別對應到 title 和 h1。
蜜蜂求偶儀式舞蹈
舞蹈
在聽 / 看正確答案前，你不妨先想想，自己的答案是什么呢？
為什么？
好了，思考之后，我們來看看正確答案。
正確答案是“蜜蜂求偶儀式舞蹈”放入 title，“舞蹈”放入 h1。我來講一講為什么要這樣放呢？這主要是考慮到 title 作為元信息，可能會被用在瀏覽器收藏夾、微信推送卡片、微博等各種場景，這時侯往往是上下文缺失的，所以 title 應該是完整地概括整個網頁內容的。
而 h1 則僅僅用于頁面展示，它可以默認具有上下文，并且有鏈接輔助，所以可以簡寫，即便無法概括全文，也不會有很大的影響。
base 標簽
base 標簽實際上是個歷史遺留標簽。它的作用是給頁面上所有的 URL 相對地址提供一個基礎。base 標簽最多只有一個，它改變全局的鏈接地址，它是一個非常危險的標簽，容易造成跟 JavaScript 的配合問題，所以在實際開發中，我比較建議你使用 JavaScript 來代替 base 標簽。
meta 標簽
meta 標簽是一組鍵值對，它是一種通用的元信息表示標簽。
在 head 中可以出現任意多個 meta 標簽。
一般的 meta 標簽由 name 和 content 兩個屬性來定義。
name 表示元信息的名，content 則用于表示元信息的值。它基本用法是下面這樣的，你也可以自己動手嘗試一下：
<meta name=application-name content="lsForums">
這個標簽表示頁面所在的 web-application，名為 IsForums。
這里的 name 是一種比較自由的約定，HTTP 標準規定了一些 name 作為大家使用的共識，也鼓勵大家發明自己的 name 來使用。
除了基本用法，meta 標簽還有一些變體，主要用于簡化書寫方式或者聲明自動化行為。下面我就挑幾種重點的內容來分別講解一下。
具有 charset 屬性的 meta
從 HTML5 開始，為了簡化寫法，meta 標簽新增了 charset 屬性。添加了 charset 屬性的 meta 標簽無需再有 name 和 content。
<meta charset="UTF-8" >
charset 型 meta 標簽非常關鍵，它描述了 HTML 文檔自身的編碼形式。因此，我建議這個標簽放在 head 的第一個。
<html>
<head>
<meta charset="UTF-8">
……
這樣，瀏覽器讀到這個標簽之前，處理的所有字符都是 ASCII 字符，眾所周知，ASCII 字符是 UTF-8 和絕大多數字符編碼的子集，所以，在讀到 meta 之前，瀏覽器把文檔理解多數編碼格式都不會出錯，這樣可以最大限度地保證不出現亂碼。
一般情況下，HTTP 服務端會通過 http 頭來指定正確的編碼方式，但是有些特殊的情況如使用 file 協議打開一個 HTML 文件，則沒有 http 頭，這種時候，charset meta 就非常重要了。
具有 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。
這類 meta 的 name 屬性為 viewport，它的 content 是一個復雜結構，是用逗號分隔的鍵值對，鍵值對的格式是 key=value。
例如：
<meta name="viewport" content="width=500, initial-scale=1">
這里只指定了兩個屬性，寬度和縮放，實際上 viewport 能控制的更多，它能表示的全部屬性如下：
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 的顏色）。
