meta標籤的定義
後設資料（metadata）是關於資料的資訊。
標籤提供關於 HTML 文件的後設資料。後設資料不會顯示在頁面上，但是對於機器是可讀的。
典型的情況是，meta 元素被用於規定頁面的描述、關鍵詞、文件的作者、最後修改時間以及其他後設資料。
標籤始終位於 head 元素中。
後設資料可用於瀏覽器（如何顯示內容或重新載入頁面），搜尋引擎（關鍵詞），或其他 web 服務。
其實對上面的概念簡單總結下就是：<meta> 標籤提供關於 HTML 文件的後設資料。它不會顯示在頁面上，但是對於機器是可讀的。可用於瀏覽器（如何顯示內容或重新載入頁面），搜尋引擎（關鍵詞），或其他 web 服務。
meta的作用
meta裡的資料是供機器解讀的，告訴機器該如何解析這個頁面，還有一個用途是可以新增伺服器傳送到瀏覽器的http頭部內容，例如我們為頁面中新增如下meta標籤：
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">
複製程式碼那麼瀏覽器的頭部就會包括這些:
charset:iso-8859-1
expires:31 Dec 2008
複製程式碼當然，只有瀏覽器可以接受這些附加的頭部欄位，並能以適當的方式使用它們時，這些欄位才有意義。
meta的必需屬性和可選屬性
必需屬性content
meta的必需屬性是content，當然並不是說meta標籤裡一定要有content，而是當有http-equiv或name屬性的時候，一定要有content屬性對其進行說明。例如：
<meta name="keywords" content="HTML,ASP,PHP,SQL">
這裡面content裡的屬性就是對keywords進行的說明，所以呢也可以理解成一個鍵值對吧，就是{keywords:"HTML,ASP,PHP,SQL"}。
可選屬性
在W3school中，對於meta的可選屬性說到了三個，分別是http-equiv、name和scheme。考慮到scheme不是很常用，所以就只說下前兩個屬性吧。
http-equiv
http-equiv屬性是新增http頭部內容，對一些自定義的，或者需要額外新增的http頭部內容，需要傳送到瀏覽器中，我們就可以是使用這個屬性。在上面的meta作用中也有簡單的說明，那麼現在再舉個例子。例如我們不想使用js來重定向，用http頭部內容控制，那麼就可以這樣控制：
<meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />
複製程式碼在頁面中加入這個後，5秒鐘後就會跳轉到指定頁面啦，
name
第二個可選屬性是name，這個屬性是供瀏覽器進行解析，對於一些瀏覽器相容性問題，name屬性是最常用的，當然有個前提就是瀏覽器能夠解析你寫進去的name屬性才可以，不然就是沒有意義的。還是舉個例子吧:
<meta name="renderer" content="webkit">
複製程式碼這個meta標籤的意思就是告訴瀏覽器，用webkit核心進行解析，當然前提是瀏覽器有webkit核心才可以，不然就是沒有意義的啦。當然看到這個你可能會有疑問，這個renderer是從哪裡冒出來的，我要怎麼知道呢？這個就是在對應的瀏覽器的開發文件裡就會有表明的。
常用meta標籤大總結
charset
charset是宣告文件使用的字元編碼，解決亂碼問題主要用的就是它，值得一提的是，這個charset一定要寫第一行，不然就可能會產生亂碼了。
charset有兩種寫法
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
複製程式碼兩個都是等效的。
百度禁止轉碼
百度會自動對網頁進行轉碼，這個標籤是禁止百度的自動轉碼
<meta http-equiv="Cache-Control" content="no-siteapp" />
複製程式碼SEO 優化部分
<!-- 頁面標題<title>標籤(head 頭部必須) -->
<title>your title</title>
<!-- 頁面關鍵詞 keywords -->
<meta name="keywords" content="your keywords">
<!-- 頁面描述內容 description -->
<meta name="description" content="your description">
<!-- 定義網頁作者 author -->
<meta name="author" content="author,email address">
<!-- 定義網頁搜尋引擎索引方式，robotterms 是一組使用英文逗號「,」分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。 -->
<meta name="robots" content="index,follow">
複製程式碼viewport
viewport主要是影響移動端頁面佈局的，例如：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
複製程式碼content 引數：
- width viewport 寬度(數值/device-width)
- height viewport 高度(數值/device-height)
- initial-scale 初始縮放比例
- maximum-scale 最大縮放比例
- minimum-scale 最小縮放比例
- user-scalable 是否允許使用者縮放(yes/no)
各瀏覽器平臺
Microsoft Internet Explorer
<!-- 優先使用最新的ie版本 -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- 是否開啟cleartype顯示效果 -->
<meta http-equiv="cleartype" content="on">
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
<!-- Pinned Site -->
<!-- IE 10 / Windows 8 -->
<meta name="msapplication-TileImage" content="pinned-tile-144.png">
<meta name="msapplication-TileColor" content="#009900">
<!-- IE 11 / Windows 9.1 -->
<meta name="msapplication-config" content="ieconfig.xml">
複製程式碼Google Chrome
<!-- 優先使用最新的chrome版本 -->
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<!-- 禁止自動翻譯 -->
<meta name="google" value="notranslate">
複製程式碼360瀏覽器
<!-- 選擇使用的瀏覽器解析核心 -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">
複製程式碼UC手機瀏覽器
<!-- 將螢幕鎖定在特定的方向 -->
<meta name="screen-orientation" content="landscape/portrait">
<!-- 全屏顯示頁面 -->
<meta name="full-screen" content="yes">
<!-- 強制圖片顯示，即使是"text mode" -->
<meta name="imagemode" content="force">
<!-- 應用模式，預設將全屏，禁止長按選單，禁止手勢，標準排版，強制圖片顯示。 -->
<meta name="browsermode" content="application">
<!-- 禁止夜間模式顯示 -->
<meta name="nightmode" content="disable">
<!-- 使用適屏模式顯示 -->
<meta name="layoutmode" content="fitscreen">
<!-- 當頁面有太多文字時禁止縮放 -->
<meta name="wap-font-scale" content="no">
複製程式碼QQ手機瀏覽器
<!-- 鎖定螢幕在特定方向 -->
<meta name="x5-orientation" content="landscape/portrait">
<!-- 全屏顯示 -->
<meta name="x5-fullscreen" content="true">
<!-- 頁面將以應用模式顯示 -->
<meta name="x5-page-mode" content="app">
複製程式碼Apple iOS
<!-- Smart App Banner -->
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
<!-- 禁止自動探測並格式化手機號碼 -->
<meta name="format-detection" content="telephone=no">
<!-- Add to Home Screen新增到主屏 -->
<!-- 是否啟用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 設定狀態列的背景顏色,只有在 “apple-mobile-web-app-capable” content=”yes” 時生效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 新增到主屏後的標題 -->
<meta name="apple-mobile-web-app-title" content="App Title">
複製程式碼Google Android
<meta name="theme-color" content="#E64545">
<!-- 新增到主屏 -->
<meta name="mobile-web-app-capable" content="yes">
<!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->
複製程式碼App Links
<!-- iOS -->
<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="App Links">
<!-- Android -->
<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="App Links">
<meta property="al:android:package" content="org.applinks">
<!-- Web Fallback -->
<meta property="al:web:url" content="http://applinks.org/documentation">
<!-- More info: http://applinks.org/documentation/ -->
複製程式碼最後——移動端常用的meta
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 刪除蘋果預設的工具欄和選單欄 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 設定蘋果工具欄顏色 -->
<meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略頁面中的數字識別為電話，忽略email識別 -->
<!-- 啟用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用相容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對手持裝置優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
<meta name="MobileOptimized" content="320">
<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 點選無高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 適應移動端end -->
複製程式碼