自學前端開始，我對meta標簽接觸不多，主要把精力都集中在能顯示出來的標簽上，比如span、button、h1等等。有時候去查看一些知名網站的源碼，發現head標簽里有一大摞的meta。 今天就來學習一下meta的用處，看看有些啥屬性。 一、定義及作用 meta，即元數據（Metadata）是數據的 ...
自學前端開始，我對meta標簽接觸不多，主要把精力都集中在能顯示出來的標簽上，比如span、button、h1等等。有時候去查看一些知名網站的源碼，發現head標簽里有一大摞的meta。
今天就來學習一下meta的用處，看看有些啥屬性。
一、定義及作用
meta，即元數據（Metadata）是數據的數據信息。
該標簽提供了 HTML 文檔的元數據。元數據不會顯示在客戶端，但是會被瀏覽器解析。
通常用於指定網頁的描述，關鍵詞，文件的最後修改時間，作者及其他元數據。
元數據可以被使用瀏覽器（如何顯示內容或重新載入頁面），搜索引擎（關鍵詞），或其他 Web 服務調用。
二、屬性
| charset(htm5新增) | 定義文檔的字元編碼 |
| content | 定義與 http-equiv 或 name 屬性相關的元信息。 |
| http-equiv | http響應頭 |
| name | 屬性名稱 |
| scheme (htm5廢棄) | 翻譯 content 屬性的值的方案 |
1、charset
HTML5新增的屬性，定義當前頁面的字元編碼
新寫法：
<meta charset="UTF-8">
老寫法：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
HTML5中優先用新寫法
2、name屬性
a、keywords，當前網頁的關鍵字，便於搜索引擎識別，提高搜索準確性
<meta name="keywords" content="cdn，網路加速，運營商">
b、description，對當前網頁的簡單描述，如果用百度搜索的話，在搜索結果的每個標題下麵會顯示description的內容，方便用戶快速定位
<meta name="description" content="本公司專註提供CDN網路加速，同時也提供雲計算服務">
c、viewport，這個meta有點複雜，主要用在移動網頁中，需要單獨寫一篇文章，這裡暫時略過
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
d、robots，搜索引擎爬蟲的索引方式
<meta name="robots" content="none">
content的取值有all、none、index、noindex、follow、nofollow，預設是all，具體的說明如表格所示：
| all | 文檔可以被索引，文檔中的鏈接可以被查詢 |
| none | 文檔不能被索引，同時文檔中的鏈接不能被查詢 |
| index | 文檔可以被索引 |
| noindex | 文檔不能被索引，但是文檔中的鏈接可以被查詢 |
| follow | 文檔中的鏈接可以被查詢 |
| nofollow | 文檔可以被索引，但是文檔中的鏈接不能被查詢 |
e、author，文檔的作者
<meta name="author" content="liuhw，[email protected]">
f、copyright，文檔的版權說明
<meta name="copyright" content="liuhw">
g、revisit-after，搜索引擎爬蟲重訪的時間間隔，如果你的網站不經常更新，那可以把這個時間設置的稍長一些，能略微的減輕伺服器的壓力，節省帶寬資源
<meta name="revisit-after" content="5 days" >
h、renderer，雙核瀏覽器的渲染方式，指定預設用哪個瀏覽器內核來渲染，例如360瀏覽器：
<meta name="renderer" content="webkit"> //預設webkit內核 <meta name="renderer" content="ie-comp"> //預設IE相容模式 <meta name="renderer" content="ie-stand"> //預設IE標準模式
3、http-equiv
模擬http里的頭，回傳給伺服器一些信息
a、expires，網頁的到期時間，過期之後，需要重新訪問伺服器
<meta http-equiv="expires" content="Sunday 26 October 2018 01:00 GMT" />
b、pragma(相容http1.0，1.1)，cache-control(http1.1新增)，設置緩存方式，建議用cache-control，該屬性的content具體參考http里的cache-control
<meta http-equiv="cache-control" content="no-cache">
c、refresh，自動刷新並跳轉到content中聲明的url
<meta http-equiv="refresh" content="5；URL=http://www.liuhw.club/"> //5秒後跳轉向我自己的功能變數名稱
d、set-cookie，添加cookie
<meta http-equiv="set-cookie" content="TOKEN_KEY=81BBF72619795017B6AC214AE705F1F8; Domain=10.1.100.111; Path=/">
e、content-Type，文檔的字元編碼，同charset，建議使用charset
<meta http-equiv="content-type" content="text/html;charset=gb2312">
f、x-ua-compatible，告訴瀏覽器用哪個版本來渲染文檔
<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染當前頁面
總結一下，上面只是列出了一些常用的屬性，沒有列出來的等需要用到的時候再查文檔
