[前端] 網站中常用的meta頭
1、Meta標籤的name屬性語法格式是：＜meta name="引數" content="引數值"＞
其中name屬性主要有以下幾種引數：
A、Keywords(關鍵字)
含義：keywords用來告訴搜尋引擎你網頁的關鍵字是什麼。
舉例：
<meta name="keywords" content="網站關鍵字,技術網站,個人網站" />
B、description(網站內容描述)
含義：description用來告訴搜尋引擎你的網站主要內容。
舉例：
<meta name="description" content="網站描述" />
C、robots(機器人嚮導)
含義：robots用來告訴搜尋機器人哪些頁面需要索引，哪些頁面不需要索引。
content的引數有all,none,index,noindex,follow,nofollow。預設是all。
舉例：
<meta name="robots" content="機器人嚮導" />
D、author(作者)
含義：標註網頁的作者或者官網網址
舉例：
<meta name="author" content="張三" />
2、http-equiv屬性
http-equiv顧名思義，相當於http的檔案頭作用，它可以向瀏覽器傳回一些有用的資訊，以幫助正確和精確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個引數的變數值。
meat標籤的http-equiv屬性語法格式是：＜meta http-equiv=”引數” content=”引數值”＞ ；其中http-equiv屬性主要有以下幾種引數：
A、Expires(期限)
說明：可以用於設定網頁的到期時間。一旦網頁過期，必須到伺服器上重新傳輸。
用法：
<meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT"/>
注意：必須使用GMT的時間格式。
B、Pragma(cache模式)
說明：禁止瀏覽器從本地計算機的快取中訪問頁面內容。
用法：
<meta http-equiv=
注意：這樣設定，訪問者將無法離線瀏覽。
C、Refresh(重新整理)
說明：自動重新整理並指向新頁面。
用法：
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com"/>
注意：其中的2是指停留2秒鐘後自動重新整理到URL網址。
D、Set-Cookie(cookie設定)
說明：如果網頁過期，那麼存檔的cookie將被刪除。
用法：
<meta http-equiv="set-cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT; path=/"/>
注意：必須使用GMT的時間格式。
E、Window-target(顯示視窗的設定)
說明：強制頁面在當前視窗以獨立頁面顯示。
用法：
<meta http-equiv="window-target" content="_top"/>
注意：用來防止別人在框架裡呼叫自己的頁面。
F、content-Type(顯示字符集的設定)
說明：設定頁面使用的字符集。
用法：
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
3、移動站meta
A、禁止縮放
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;" />
B、忽略數字被識別為電話號碼
<meta name="format-detection" content="telephone=no" />
C、忽略數字被識別為郵箱
<meta name="format-detection" content="email=no" />
D、強制UC瀏覽器豎屏顯示
<meta name="screen-orientation" content="portrait">
E、強制UC瀏覽器全屏顯示
<meta name="full-screen" content="yes">
F、UC瀏覽器應用模式
<meta name="browsermode" content="application">
G、強制QQ瀏覽器豎屏顯示
<meta name="x5-orientation" content="portrait">
H、強制QQ瀏覽器全屏顯示
<meta name="x5-fullscreen" content="true">
I、QQ瀏覽器應用模式
<meta name="x5-page-mode" content="app">
J、針對一些不識別viewport的瀏覽器，如黑莓
<meta name="HandheldFriendly" content="true">
K、針對微軟的老式瀏覽器
<meta name="MobileOptimized" content="320">
L、隱藏狀態列/設定狀態列顏色
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
M、safari瀏覽器，新增到主屏介面顯示的標題
<meta name="apple-mobile-web-app-title" content="應用標題">
N、隱藏狀態列/設定狀態列顏色2
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
預設值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。
O、離線應用（開啟快取）
<meta name="apple-mobile-web-app-capable" content="yes" />
P、新增到主屏應用的圖示
<link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png" />
Q、啟動圖片
<link rel="apple-touch-startup-image" href="milanoo_startup.png" />
R、iphone打電話，meta頭把telephone="yes" 即可
<a href="18256771872">18256771872</a>
S、android機打電話
<a href="tel:18256771872">18256771872</a>
T、優先使用IE最新片和chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 關於X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
U、相容核心
<meta name="renderer" content="webkit|ie-comp|ie-stand">
謝謝關注~
