標籤：
相信在html5之前，很少人會關注html頁面上head裡標籤元素的定義和應用情境，可能記得住的只有"title"、"keyword"和"description"這些meta在逐漸瞭解使用html新標準後，特別是移動頁面的開發普及，可以看到html中這一塊內容越來越重要為大家所認識，初次見到這些標籤基本是摸不著頭腦，今天就來梳理這些標籤的定義(以html5標準展開)；
先來一個頁面概括，head標籤不分排序先後：
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>Title</title>
<meta content="keyword" name="keywords">
<meta content="description" name="description">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="author" content="author,email address">
<meta name="robots" content="index,follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="format-detection" content="telephone=no,email=no" />
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" />
<meta name="HandheldFriendly" content="true">
<meta name="screen-orientation" content="portrait">
<meat name="x5-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="browsermode" content="application">
<meta name="x5-page-mode" content="app">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/ico" href="/favicon.ico" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
......
</heda><bady>some content</bady></html>
最近收集有這些head標籤，其實另外還有許多，要麼是沒想起來，要麼是我也不知道具體什麼含義==，不過一般網頁上也就這麼多，很多網站是去自訂一些內容的，如這樣的：
額，這些就不去理會吧，採用合適的標籤，達到預設的目的就行了，個人感覺這裡還是不要放很多吧，畢竟這些設定需要瀏覽器去解析執行的，還是會消耗點資源的；下面就逐個展開一下；
<meta charset="UTF-8">：設定網頁字元編碼，常用的有utf-8和gb2312；
<title>Title</title>：頁面title，不解釋；
<meta content="keyword" name="keywords">：keyword關鍵詞，以逗號區分開，不解釋；
<meta content="description" name="description">：description描述不解釋；
<meta name="renderer" content="webkit">：優先使用chrome核心渲染頁面；
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">：優先使用最新版ie和chrome瀏覽器；
<meta http-equiv="Cache-Control" content="no-siteapp" />：通過手機百毒開啟網頁時，百毒可能會對你的網頁進行轉碼，只展現頁面內容，頭底部會被替換並且一般會加點廣告==尿性不改；
<meta name="author" content="author,email address">：定義頁面作者，這個很少見人用貌似，當然也有很多人不認識，之前一個項目交付給老闆後他看到這段不認識說我們在他們網站放木馬==論多讀書多識字的重要性；
<meta name="robots" content="index,follow">：定義網頁搜尋引擎索引方式，robotterms 是一組使用英文逗號「,」分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow；
<meta name="viewport" content="width=device-width, initial-scale=1.0">：這個應用的就比較多了，為行動裝置設定，viewport也可作為寬度單位，一些參數設定，width viewport 寬度(數值/device-width)，height viewport 高度(數值/device-height)，initial-scale 初始縮放比例，user-scalable 是否允許使用者縮放(yes/no)，一般移動網頁上都是設定裝置寬度，預設不可縮放的；
<meta name="apple-mobile-web-app-capable" content="yes" />：有個apple，沒錯，這是蘋果裝置轉用的，這個是是否啟用 WebApp 全螢幕模式；蘋果的裝置可以說單成一家，有很多特定的設定，有興趣的小夥伴可以到官方文檔說明查看詳細，來戳傳送門
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />：設定狀態列的背景顏色，只有在 "apple-mobile-web-app-capable" content="yes" 時生效；
<meta name="format-detection" content="telephone=no,email=no" />：不自動識別頁面中的 電話和郵箱，就是點擊數字或郵箱樣的字元不會做其他動作；
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" />：又是大蘋果，沒錯這個是設定ios表徵圖的，並且可以設定多個尺寸的，蘋果可以設定啟動頁面，有興趣繼續戳官網文檔；
<meta name="HandheldFriendly" content="true">：恩，如果你單詞量多一些，可以看出來這個是什麼意思，友好最佳化手持功能，貌似是針對不認識viewport的裝置(蘋果都成街機了，誰閑的沒事用塞班看網頁？)，反正我沒用過，所以可以認為沒什麼卵用；
<meta name="screen-orientation" content="portrait">：uc強制豎屏；
<meta name="x5-orientation" content="portrait">：QQ強制豎屏；
<meta name="full-screen" content="yes">：UC強制全屏；
<meta name="x5-fullscreen" content="true">:QQ強制全屏
<meta name="browsermode" content="application">:UC應用模式
<meta name="x5-page-mode" content="app">:QQ應用模式;
<link rel="icon" type="image/ico" href="/favicon.ico" />：網頁ico表徵圖設定；
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />:rss訂閱；
......
看一下內容還是不少的，而且很多是為移動端設定的，pc端相對簡潔了很多，果然多裝置多瀏覽器的維護成本就是高啊，所以在許多討論情境中我一直反對pc和行動裝置使用一個頁面，也就是適應所有裝置的頁面==，雖然有些前端架構是支援這個的，感覺還沒有分開設計方便省力；ok今天先寫到這裡吧，查漏補缺，有新的發現繼續更；
meta 標籤大全
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
