meta標籤的作用
- meta標籤能大大提高網站被搜索到的可能性
- 用來爲搜索引擎robots定義頁面主題
- 定義用戶瀏覽器上的cookie；它可以用於鑑別作者，設定頁面格式
- 標註內容提要和關鍵字
- 設置頁面使其可以根據你定義的時間間隔刷新
META標籤分兩大部分：
HTTP標題信息(HTTP-EQUIV)和頁面描述信息(NAME)。
name
(1)
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />1、width : 控制viewport(視口)的大小，可以指定一個值或者特殊的值，如device-width爲設備的寬度（單位爲縮放爲100%的CSS的像素）
2、height : 和width相對應，指定高度
3、initial-scale : 初始縮放比例，頁面第一次加載時的縮放比例
4、maximum-scale : 允許用戶縮放到的最大比例，範圍從0到10.0
5、minimum-scale : 允許用戶縮放到的最小比例，範圍從0到10.0
6、user-scalable : 用戶是否可以手動縮放，值可以是：①yes、 true允許用戶縮放；②no、false不允許用戶縮放
(2)
<!--用以說明生成工具-->
<meta name="Generator" content=""> (3)
<!--向搜索引擎說明你的網頁的關鍵詞-->
<meta name="Keywords" content="html,css"> (4)
<!-- 告訴搜索引擎你的站點的主要內容-->
<meta name="Description" content="nothing">
<!-- 告訴搜索引擎你的站點的製作的作者 -->
<meta name="Author" content="你的姓名">(5)
<meta name="Robots" content= "all|none|index|noindex|follow|nofollow">
(機器人嚮導)設定爲all：文件將被檢索，且頁面上的鏈接可以被查詢；
設定爲none：文件將不被檢索，且頁面上的鏈接不可以被查詢；
設定爲index：文件將被檢索；
設定爲follow：頁面上的鏈接可以被查詢；
設定爲noindex：文件將不被檢索，但頁面上的鏈接可以被查詢；
設定爲nofollow：文件將不被檢索，頁面上的鏈接可以被查詢。
http-equiv
<!--設置字符編碼和文件格式-->
<meta http-equiv="Content-Type" content="text/html";charset=utf-8">
<!--設置定時刷新-->
<meta http-equiv="Refresh" content="n;url=http://.......>
<!-- 告訴瀏覽器不要緩存頁面-->
<meta http-equiv="Pragma" content="no-cache">
<! -- //告訴瀏覽器不要緩存頁面-->
<meta http-equiv="cache-control" content="no-cache">
//告訴瀏覽器不要緩存頁面
<!--禁用瀏覽器緩存此頁面-->
<meta http-equiv="expires" content="0">
<!--設置ie的文檔兼容模式,設置IE7+的瀏覽器以IE7的兼容模式查看頁面-->
<meta http-equiv="X-UA-Compatible" content="IE=7">一個簡單的例子
<!DOCTYPE html>
<!-- HTML5 doctype 不區分大小寫 -->
<html lang="zh">
<!-- 更加標準的 lang 屬性寫法 http://zhi.hu/XyIa -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 優先使用IE最新版本和 Chrome -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<!-- 360 瀏覽器內核控制 -->
<!--
content的取值爲webkit,ie-comp,ie-stand之一，區分大小寫，分別代表用webkit內核，IE兼容內核，IE標準內核。
若頁面需默認用極速核，增加標籤：<meta name="renderer" content="webkit">
若頁面需默認用ie兼容內核，增加標籤：<meta name="renderer" content="ie-comp">
若頁面需默認用ie標準內核，增加標籤：<meta name="renderer" content="ie-stand">
-->
<!-- width=device-width 會導致 iPhone 5 添加到主屏後以 WebAPP 全屏模式打開頁面時出現黑邊 http://bigc.at/ios-webapp-viewport-meta.orz -->
<meta name ="viewport" content ="initial-scale=1.0, maximum-scale=3, minimum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-title" content="標題"> <!-- 添加到主屏時的標題 -->
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否啓用 WebAPP 全屏模式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 狀態條顏色 -->
<meta name="format-detection" content="telephone=no" /> <!-- 屏蔽數字自動識別爲電話號碼 -->
<!-- favicon 圖標 -->
<link type="image/x-icon" rel="icon" href="http://static.example.com/favicon.ico"/>
<link type="image/x-icon" rel="shortcut icon" href="http://static.example.com/favicon.ico"/>
<link type="image/x-icon" rel="bookmark" href="http://static.example.com/favicon.ico"/>
<!-- iOS 圖標 begin -->
<!--默認 57x57 像素-->
<link rel="apple-touch-icon-precomposed" href="http://wanke.etao.com/assets/img/icon/57/apple-touch-icon-57x57-precomposed.png" />
<!--iPad 1 72x72 像素-->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://wanke.etao.com/assets/img/icon/72/apple-touch-icon-72x72-precomposed.png" />
<!--iPhone 4 114x114 像素-->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://wanke.etao.com/assets/img/icon/114/apple-touch-icon-114x114-precomposed.png" />
<!-- iOS 圖標 end -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁貼顏色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁貼圖標 -->
<!-- SEO 優化 -->
<meta name="description" content="" />
<!-- 頁面描述 -->
<meta name="keywords" content=""/> <!-- 頁面關鍵詞 -->
<title>頁面標題</title>
<!-- iOS 應用啓動界面設置 begin -->
<!-- iPad Landscape – 1024 x 748 -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />
<!-- iPad Portrait – 768 x 1004 -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />
<!-- iPhone/iPod Touch Portrait – 320 x 480 (standard resolution) -->
<link rel="apple-touch-startup-image" href="img/splash-screen-320x480.png" />
<!-- iPhone/iPod Touch Portrait – 640 x 960 pixels (high-resolution) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />
<!-- iOS 應用啓動界面設置 end -->
</head> 以上是META標籤的一些基本用法，其中最重要的就是：Keywords和Description的設定。
爲什麼呢？道理很簡單，這兩個語句可以讓搜索引擎能準確的發現你，吸引更多的人訪問你的站點!根據現在流行搜索引擎(Google，Lycos，AltaVista等)的工作原理，搜索引擎先派機器人自動在WWW上搜索，當發現新的網站時，便於檢索頁面中的Keywords和Description，並將其加入到自己的數據庫，然後再根據關鍵詞的密度將網站排序。
由此看來，我們必須記住添加Keywords和Description的META標籤，並儘可能寫好關鍵字和簡介。否則，後果就會是：
● 如果你的頁面中根本沒有Keywords和Description的META標籤，那麼機器人是無法將你的站點加入數據庫，網友也就不可能搜索到你的站點。
● 如果你的關鍵字選的不好，關鍵字的密度不高，被排列在幾十甚至幾百萬個站點的後面被點擊的可能性也是非常小的。
寫好Keywords(關鍵字)要注意以下幾點：
● 不要用常見詞彙。例如www、homepage、net、web等。
● 不要用形容詞，副詞。例如最好的，最大的等。
● 不要用籠統的詞彙，要儘量精確。例如“愛立信手機”，改用“T28SC”會更好。
尋找合適關鍵詞的技巧是：到Google、Lycos、Alta等著名搜索引擎，搜索與
你的網站內容相仿的網站，查看排名前十位的網站的META關鍵字，將它們用在你的網站上，效果可想而知了。
★小竅門
爲了提高搜索點擊率，這裏還有一些“捷徑”可以幫得到你：
● 爲了增加關鍵詞的密度，將關鍵字隱藏在頁面裏(將文字顏色定義成與背景顏色一樣)。
● 在圖像的ALT註釋語句中加入關鍵字。如：<IMG SRC="xxx.gif" Alt="Keywords">
● 利用HTML的註釋語句，在頁面代碼里加入大量關鍵字。用法： <!-- 這裏插入關鍵字 -->
