HTML meta標籤總結與屬性使用介紹

以前學習前端中，對meta標籤的瞭解僅僅只是這一句。

<meta charset="UTF-8">

可是打開任意的網站，其head標籤內都有一列的meta標籤。好比我博客的。

可是本身卻很不熟悉，因而把meta標籤加入了寒假學習計劃的最前方。

簡介

在查閱w3school中，第一句話中的「元數據」就讓我開始了Google之旅。而後很順利的在英文版的w3school找到了想要的結果。（中文w3school說的是元信息，Google和百度都沒有相關的詞條。但元數據在Google就有詳細解釋。因此這兒採用英文版W3school的解釋。）

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

不難看出，其中的關鍵是metadata，中文名叫元數據，是用於描述數據的數據。它不會顯示在頁面上，可是機器卻能夠識別。這麼一來meta標籤的做用方式就很好理解了。

用處

Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services

這句話對meta標籤用處的介紹，簡潔明瞭。
翻譯過來就是：meta經常使用於定義頁面的說明，關鍵字，最後修改日期，和其它的元數據。這些元數據將服務於瀏覽器（如何佈局或重載頁面），搜索引擎和其它網絡服務。

組成

meta標籤共有兩個屬性，分別是http-equiv屬性和name屬性。

1. name屬性

name屬性主要用於描述網頁，好比網頁的關鍵詞，敘述等。與之對應的屬性值爲content，content中的內容是對name填入類型的具體描述，便於搜索引擎抓取。
meta標籤中name屬性語法格式是：

<meta name="參數" content="具體的描述">。

其中name屬性共有如下幾種參數。(A-C爲經常使用屬性)

A. keywords(關鍵字)

說明：用於告訴搜索引擎，你網頁的關鍵字。
舉例：

<meta name="keywords" content="Lxxyx,博客，文科生，前端">

B. description(網站內容的描述)

說明：用於告訴搜索引擎，你網站的主要內容。
舉例：

<meta name="description" content="文科生，熱愛前端與編程。目前大二，這是個人前端博客">

C. viewport(移動端的窗口)

說明：這個概念較爲複雜，具體的會在下篇博文中講述。
這個屬性經常使用於設計移動端網頁。在用bootstrap,AmazeUI等框架時候都有用過viewport。

舉例（經常使用範例）：

<meta name="viewport" content="width=device-width, initial-scale=1">

D. robots(定義搜索引擎爬蟲的索引方式)

說明：robots用來告訴爬蟲哪些頁面須要索引，哪些頁面不須要索引。
content的參數有all,none,index,noindex,follow,nofollow。默認是all。

舉例：

<meta name="robots" content="none">

具體參數以下：

1.none : 搜索引擎將忽略此網頁，等價於noindex，nofollow。
2.noindex : 搜索引擎不索引此網頁。
3.nofollow: 搜索引擎不繼續經過此網頁的連接索引搜索其它的網頁。
4.all : 搜索引擎將索引此網頁與繼續經過此網頁的連接索引，等價於index，follow。
5.index : 搜索引擎索引此網頁。
6.follow : 搜索引擎繼續經過此網頁的連接索引搜索其它的網頁。

E. author(做者)

說明：用於標註網頁做者
舉例：

<meta name="author" content="Lxxyx,841380530@qq.com">

F. generator(網頁製做軟件)

說明：用於標明網頁是什麼軟件作的
舉例: (不知道能不能這樣寫)：

<meta name="generator" content="Sublime Text3">

G. copyright(版權)

說明：用於標註版權信息
舉例：

<meta name="copyright" content="Lxxyx"> //表明該網站爲Lxxyx我的版權全部。

H. revisit-after(搜索引擎爬蟲重訪時間)

說明：若是頁面不是常常更新，爲了減輕搜索引擎爬蟲對服務器帶來的壓力，能夠設置一個爬蟲的重訪時間。若是重訪時間太短，爬蟲將按它們定義的默認時間來訪問。
舉例：

<meta name="revisit-after" content="7 days" >

I. renderer(雙核瀏覽器渲染方式)

說明：renderer是爲雙核瀏覽器準備的，用於指定雙核瀏覽器默認以何種方式渲染頁面。好比說360瀏覽器。
舉例：

<meta name="renderer" content="webkit"> //默認webkit內核
<meta name="renderer" content="ie-comp"> //默認IE兼容模式
<meta name="renderer" content="ie-stand"> //默認IE標準模式

2. http-equiv屬性

介紹以前，先說個小插曲。看文檔和博客關於http-equiv的介紹時，有這麼一句。

http-equiv顧名思義，至關於http的文件頭做用。

一開始看到這句話的時候，我是迷糊的。由於我看各種技術名詞，都會習慣性的去記住它的英文全稱。equiv的全稱是"equivalent"，意思是相等，至關於。而後我腦子裏出現了大大的迷惑：「HTTP相等？」

後來還準備去Segmentfault提問來着。結果在寫問題的時候，忽然反應出equivalent還有至關於的意思。意思就是至關於http的做用。至於文件頭是哪兒出來的，估計是從其做用來分析的。我認爲顧名思義並不能得出"至關於http的文件頭做用"這個論斷。

這個我所認爲的http-equiv意思的簡介。
至關於HTTP的做用，好比說定義些HTTP參數啥的。

meta標籤中http-equiv屬性語法格式是：

<meta http-equiv="參數" content="具體的描述">

其中http-equiv屬性主要有如下幾種參數：

A. content-Type(設定網頁字符集)(推薦使用HTML5的方式)

說明：用於設定網頁字符集，便於瀏覽器解析與渲染頁面
舉例：

<meta http-equiv="content-Type" content="text/html;charset=utf-8">  //舊的HTML，不推薦

<meta charset="utf-8"> //HTML5設定網頁字符集的方式，推薦使用UTF-8

B. X-UA-Compatible(瀏覽器採起何種版本渲染當前頁面)

說明：用於告知瀏覽器以何種版原本渲染頁面。（通常都設置爲最新模式，在各大框架中這個設置也很常見。）
舉例：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染當前頁面

C. cache-control(指定請求和響應遵循的緩存機制)

用法1.

說明：指導瀏覽器如何緩存某個響應以及緩存多長時間。這一段內容我在網上找了好久，但都沒有找到滿意的。
最後終於在Google Developers中發現了我想要的答案。

舉例:

<meta http-equiv="cache-control" content="no-cache">

共有如下幾種用法：

1. no-cache: 先發送請求，與服務器確認該資源是否被更改，若是未被更改，則使用緩存。

2. no-store: 不容許緩存，每次都要去服務器上，下載完整的響應。（安全措施）

3. public : 緩存全部響應，但並不是必須。由於max-age也能夠作到相同效果

4. private : 只爲單個用戶緩存，所以不容許任何中繼進行緩存。（好比說CDN就不容許緩存private的響應）

5. maxage : 表示當前請求開始，該響應在多久內能被緩存和重用，而不去服務器從新請求。例如：max-age=60表示響應能夠再緩存和重用 60 秒。

參考連接：HTTP緩存

用法2.(禁止百度自動轉碼)

說明：用於禁止當前頁面在移動端瀏覽時，被百度自動轉碼。雖然百度的本意是好的，可是轉碼效果不少時候卻不盡人意。因此能夠在head中加入例子中的那句話，就能夠避免百度自動轉碼了。
舉例：

<meta http-equiv="Cache-Control" content="no-siteapp" />

D. expires(網頁到期時間)

說明:用於設定網頁的到期時間，過時後網頁必須到服務器上從新傳輸。
舉例：

<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />

E. refresh(自動刷新並指向某頁面)

說明：網頁將在設定的時間內，自動刷新並調向設定的網址。
舉例:

<meta http-equiv="refresh" content="2；URL=http://www.lxxyx.win/"> //意思是2秒後跳轉向個人博客

F. Set-Cookie(cookie設定)

說明：若是網頁過時。那麼這個網頁存在本地的cookies也會被自動刪除。

<meta http-equiv="Set-Cookie" content="name, date"> //格式

<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> //具體範例

最後

暫時總結的就這麼多了，meta標籤的自定義屬性實在太多了。因此只去找了經常使用的一些，還有像Window-target這樣已經基本被廢棄的屬性，我也沒有添加。
一開始覺得一兩個小時就能學習完畢，結果沒想到居然花了五六個小時，各處查資料，推敲文字。敲擊文字的時候，也感受本身學習了很是多。好比基本的SEO，HTTP協議的再次理解等。

由於經驗尚淺，因此若是有出錯的地方，但願各位能幫忙指正。
最後附上本人博客地址和原文連接，但願能與各位多多交流。

Lxxyx的前端樂園
寒假前端學習(1)——HTML meta標籤總結