meta標籤提供關於HTML文檔的元數據。元數據不會顯示在頁面上,可是對於機器是可讀的,它能夠用於瀏覽器(顯示內容/從新加載頁面),搜索引擎(關鍵字),或者其餘web服務。css
<!-- 頁面描述 -->
<meta name="description" content="頁面描述,控制在150字之內" />html
<!-- 頁面關鍵詞 -->
<meta name="keywords" content="關鍵字列表" />
用於準確描述頁面內容的表明性詞彙/短語,供搜索引擎搜索,標記不超過874個字符ios
<!-- 做者信息 -->
<meta name="author" content="basecss, i@basecss.net" />web
<!-- 頁面圖標 -->
<link rel="shortcut icon" type="image/icon" href="icon.ico" />chrome
<!-- 聲明文檔字符編碼 -->
<meta charset="utf-8">api
<!-- IE 兼容性設置 :用最新模式渲染,優先使用 chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />瀏覽器
<!-- 瀏覽器內核控制 -->
國內瀏覽器不少都是雙內核(webkit和Trident),webkit內核高速瀏覽,IE內核兼容網頁和舊版網站。而添加meta標籤的網站能夠控制瀏覽器選擇何種內核渲染。
<meta name="renderer" content="webkit|ie-comp|ie-stand">緩存
<!-- 內容語言 -->
<meta http-equiv="content-language" content="zh-CN" />服務器
<!—頁面刷新 -->
<meta http-equiv="refresh" content="10" />cookie
<!—定時自動跳轉 -->
<meta http-equiv="refresh" content="3; URL=http://www.baidu.com" />
數字表明多少秒後自動刷新,url是倒計時結束後打開的頁面
<!-- 編碼設置-->
<meta charset=「」UTF-8「」 />
<meta http-equiv="content-type" content="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 緩存信息 -->
<meta http-equiv="expires" content="GMT 格式時間" />
<!-- 禁止緩存 -->
<meta http-equiv="pragma" content="no-cache" />
<!-- 添加 cookie -->
<meta http-equiv="set-cookie" content="cookieName=cookieValue;expires=GMT 格式時間;path=/" />
<!-- 頁面加載動畫 -->
<meta http-equiv="page-enter" content="blandtrans(duration=0.5)" />
<!-- 頁面退出動畫 -->
<meta http-equiv="page-exit" content="revealtrans(duration=0.5,transtion=1)" />
<!-- ******************************
transtion 能夠取0-23的整數,分別表示:
0.盒狀收縮; 1.盒狀展開; 2.圓形收縮; 3.圓形展開; 4.向上擦除;
5.向下擦除; 6.向左擦除; 7.向右擦除; 8.垂直百葉窗; 9.水平百葉窗;
10.縱向棋盤; 11.橫向棋盤; 12.溶解; 13.左右向中間收縮; 14.中間向左右展開;
15.上下向中間收縮; 16.中間向上下展開; 17.階梯向左下; 18.階梯向左上;
19.階梯向右下; 20.階梯向右上; 21.水平隨機線; 22.垂直隨機線; 23.隨機;
******************************* -->
<!-- 緩存控制 -->
<meta http-equiv="Cache-control" content="max-age=5" />
<!-- ******************************
public: 容許任何人緩存此頁;
private: 不容許緩存服務器緩存此頁;
no-cache: 相應不能被緩存;
no-stroe: 請求相應都不能被緩存;
max-age: 最大生存週期(秒);
min-fresh: 客戶端願意接受的最小緩存時長,緩存時間超過該值會要求向服務器查新;
max-stale: 接受超過緩存時限但不超過該值的數據;
******************************* -->
<!-- 設置搜索引擎抓取間隔 -->
<meta name="visit-after" content="10 days">
<!-- ********搜索引擎抓取設置
<meta name="robots" content="index" /><!--容許搜索引擎抓取此頁-->
<meta name="robots" content="noindex" /><!--不容許搜索引擎抓取此頁-->
<meta name="robots" content="follow" /><!--容許搜索引擎抓取子頁面-->
<meta name="robots" content="nofollow" /><!--容許搜索引擎抓取子頁面-->
<meta name="robots" content="none" /><!--不容許抓取此頁和子頁面-->
<meta name="robots" content="all" /><!--容許抓取此頁和子頁面-->
******************************* -->
<!-- 爲移動設備設置 viewport -->
<meta name="viewport" content="width=device-width,initial-scale=1, minium-scale=1, user-scalable=no" />
優化移動瀏覽器的顯示。
** 若是不是響應式網站,不要使用initial-scale或者禁用縮放
** 大部分4.7-5寸設備的viewport寬設爲360px;5.5寸設備設爲400px;iphone6設爲375px;ipone6 plus設爲414px
** width=device-width` 會致使 iPhone 5 添加到主屏後以 WebApp 全屏模式打開頁面時出現黑邊
** 不少人使用initial-scale=1到非響應式網站上,這會讓網站以100%寬度渲染,用戶須要手動移動頁面或者縮放。若是和initial-scale=1同時使用user-scalable=no或maximum-scale=1,則用戶將不能放大/縮小網頁來看到所有的內容。
1. width:寬度(數值 / device-width)(範圍從200 到10,000,默認爲980 像素)
2. height:高度(數值 / device-height)(範圍從223 到10,000)
3. initial-scale:初始的縮放比例 (範圍從>0 到10)
4. minimum-scale:容許用戶縮放到的最小比例
5. maximum-scale:容許用戶縮放到的最大比例
6. user-scalable:用戶是否能夠手動縮 (no,yes)
<!-- iOS 移動設備添加主屏幕標題設置 -->
添加到主屏後的標題
<meta name="apple-mobile-web-app-title" content="My App" />
<!-- 是否啓用全屏模式 -->
啓用webapp全屏模式,假裝APP,離線應用
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 全屏時狀態欄顏色設置 -->
只有開啓webapp全屏模式時才生效
<meta name="apple-mobile-web-status-bar-style" content="black-translucent" />
- default
- black
- black-translucent
<!-- 禁用電話號碼自動識別 -->
<meta name="format-detection" content="telephone=no" />
<!-- 禁用郵箱自動識別 -->
<meta name="format-detection" content="email=no" />
<!-- 忽略頁面的數字爲電話,忽略email識別 -->
<meta name="format-detection" content="telephone=no, email=no"/>
<!-- 添加智能 App 廣告條 Smart App Banner(iOS 6+ Safari), 默認禁用 -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" />
<!-- 關閉ios鍵盤首字母自動大寫 -->
<input type=」text」 autocapitalize=」off」 />
/* *************啓動畫面************* */
<!-- iPad 豎屏 768 x 1004(標準分辨率) -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" />
<!-- iPad 豎屏 1536x2008(Retina) -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" />
<!-- iPad 橫屏 1024x748(標準分辨率) -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" />
<!-- iPad 橫屏 2048x1496(Retina) -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" />
<!-- iPhone/iPod Touch 豎屏 320x480 (標準分辨率) -->
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" />
<!-- iPhone/iPod Touch 豎屏 640x960 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" />
<!-- iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" />
/* *************ios圖標************* */
<!-- 非視網膜 iPhone 低於 iOS 7 -->
<link rel="apple-touch-icon" href="icon57.png" sizes="57x57" />
<!-- 非視網膜 iPad 低於 iOS 7 -->
<link rel="apple-touch-icon" href="icon72.png" sizes="72x72" />
<!-- 非視網膜 iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon76.png" sizes="76x76" />
<!-- 視網膜 iPhone 低於 iOS 7 -->
<link rel="apple-touch-icon" href="icon114.png" sizes="114x114" />
<!-- 視網膜 iPhone iOS 7 -->
<link rel="apple-touch-icon" href="icon120.png" sizes="120x120" />
<!-- 視網膜 iPad 低於 iOS 7 -->
<link rel="apple-touch-icon" href="icon144.png" sizes="144x144" />
<!-- 視網膜 iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon152.png" sizes="152x152" />
<!-- Windows 8 磁貼顏色 -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁貼圖標 -->
<meta name="msapplication-TileImage" content="icon.png"/>
<!-- Android 啓動圖標 -->
<link rel="shortcut icon" sizes="128x128" href="icon.png" />
<!-- 添加 RSS 訂閱 -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
<!-- 添加 favicon icon -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />