meta标签详解
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)
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://.......>
Pragma" content="no-cache">
<! -- //告诉浏览器不要缓存页面-->
<meta http-equiv="cache-control" content="no-cache">
//告诉浏览器不要缓存页面
<meta http-equiv="expires" content="0">
<meta http-equiv="X-UA-Compatible" content="IE=7">一个简单的例子
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<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" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="format-detection" content="telephone=no" />
<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"/>
<link rel="apple-touch-icon-precomposed" href="http://wanke.etao.com/assets/img/icon/57/apple-touch-icon-57x57-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://wanke.etao.com/assets/img/icon/72/apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://wanke.etao.com/assets/img/icon/114/apple-touch-icon-114x114-precomposed.png" />
<meta name="msapplication-TileColor" content="#000"/>
<meta name="msapplication-TileImage" content="icon.png"/>
<meta name="description" content="" />
<meta name="keywords" content=""/>
<title>页面标题title>
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />
<link rel="apple-touch-startup-image" href="img/splash-screen-320x480.png" />
<link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />
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注释语句中加入关键字。如：
● 利用HTML的注释语句，在页面代码里加入大量关键字。用法：