01經常使用 總結

meta標籤提供關於HTML文檔的元數據。元數據不會顯示在頁面上，可是對於機器是可讀的，它能夠用於瀏覽器(顯示內容/從新加載頁面)，搜索引擎（關鍵字），或者其餘web服務。

1、頁面設置

<!-- 頁面描述 -->
<meta name="description" content="頁面描述，控制在150字之內" />

<!-- 頁面關鍵詞 -->
<meta name="keywords" content="關鍵字列表" />
用於準確描述頁面內容的表明性詞彙/短語，供搜索引擎搜索，標記不超過874個字符

<!-- 做者信息 -->
<meta name="author" content="basecss, i@basecss.net" />

<!-- 頁面圖標 -->
<link rel="shortcut icon" type="image/icon" href="icon.ico" />

<!-- 聲明文檔字符編碼 -->
<meta charset="utf-8">

<!-- 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">

 

2、http信息設置

<!-- 內容語言 -->
<meta http-equiv="content-language" content="zh-CN" />

<!—頁面刷新 -->
<meta http-equiv="refresh" content="10" />

<!—定時自動跳轉 -->
<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: 接受超過緩存時限但不超過該值的數據;
******************************* -->

 

3、搜索引擎相關

<!-- 設置搜索引擎抓取間隔 -->

<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" /><!--容許抓取此頁和子頁面-->

******************************* -->

 

4、移動端相關

<!-- 爲移動設備設置 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" />

 

5、ios相關

<!-- 關閉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" />

 

6、其餘

<!-- 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" />