Meta标签是HTML语言中HEAD区的一个辅助性标签，它位于HTML文档头部的<head>标记 和<title>标记之间，它提供用户不可见的信息。
meta标签有如下的作用：
1.搜索引擎优化（SEO）
2.定义页面使用语言
3.自动刷新并指向新的页面
4.实现网页转换时的动态效果
5.控制页面缓冲
6.网页定级评价
7.控制网页显示的窗口
META标签有两个重要的属性：http-eqquiv属性(HTTP标题信息)和name属性(页面描述信息)。
name属性
name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
meta标签的name属性语法格式是：
<meta name="参数"content="具体的参数值">
name属性主要有一下几种参数：
A、 keywords（关键字）
说明：keywords用来告诉搜索引擎你网页的关键字是什么,某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类
<meta name="keywords" content="SEO优化,SEO优化教程,网站优化,搜索引擎优化教程">
B、description(网站内容描述)
说明：description用来告诉搜索引擎你的网站主要内容
<meta name="description" content="学习研究搜索引擎优化网提供专业的SEO优化教程。" >
C、robots(机器人向导)
说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all。
<meta name="robots" content="none">
D、 author(作者)
说明：标注网页的作者
<meta name="author" content="root,root@xxxx.com">
E、renderer(渲染)
说明：告诉浏览器你的渲染模式,指定浏览器默认内核，content的取值为webkit,ie-comp,ie-stand之一，区分大小写，分别代表用webkit内核，IE兼容内核，IE标准内核。
<meta name="renderer" content="webkit">
F、viewport(视图模式)
有六个属性：
1.width：控制 viewport 的大小，为一个正整数，或字符串"width-device"为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）
2.height：和 width 相对应，指定视窗的高度，这个属性并不重要，很少使用
3.initial-scale：初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。
4.maximum-scale：最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，如果你将这个值设置为“2.0”，那么这个页面与target size相比，最多能放大2倍。
5.user-scalable ：是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许，如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。所有的缩放值都必须在0.01–10的范围之内。
G、copyright(版权)
说明：标注版权
<meta name="copyright" content="本网站版权归CSDN所有">
http-equiv属性
http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
meta标签的http-equiv属性语法格式是：
<meta http-equiv="参数"content="参数变量值">
A、Expires(期限)
说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。注意：必须使用GMT的时间格式。
<meta http-equiv="expires"content="Fri,01Jan201618:18:18GMT">
B、Pragma(cache模式)
说明：禁止浏览器从本地计算机的缓存中访问页面内容。注意：这样设定，访问者将无法脱机浏览。
<meta http-equiv="Pragma" content="no-cache">
C、Refresh(刷新)
说明：自动刷新并指向新页面。注意：其中的2是指停留2秒钟后自动刷新到URL网址。
<meta http-equiv="Refresh" content="2;URL=http://www.jb51.net">
D、Set-Cookie(cookie设定)
说明：如果网页过期，那么存盘的cookie将被删除。注意：必须使用GMT的时间格式。
<meta http-equiv="Set-Cookie"content="cookievalue=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">
E、Window-target(显示窗口的设定)
说明：强制页面在当前窗口以独立页面显示。注意：用来防止别人在框架里调用自己的页面。
<meta http-equiv="Window-target" content="_blank">
F、content-Type(显示字符集的设定)
设定页面使用的字符集。meta标签的charset的信息参数如GB2312时，代表说明网站是采用的编码是简体中文；meta标签的charset的信息参数如ISO-8859-1时，代表说明网站是采用的编码是英文；meta标签的charset的信息参数如UTF-8时，代表世界通用的语言编码；
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
G、content-Language（显示语言的设定）
<meta http-equiv="Content-Language" content="zh-cn"/>
H、Cache-Control
Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。
请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached
响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。
各个消息中的指令含义如下
Public:指示响应可被任何缓存区缓存
Private:指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效
no-cache指示请求或响应消息不能缓存
no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应
min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应
max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。
meta用法
<!DOCTYPE html> H5标准声明，使用 HTML5 doctype，不区分大小写
<head lang=”en”> 标准的 lang 属性写法
<meta charset=’utf-8′> 声明文档使用的字符编码
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> 优先使用 IE 最新版本和 Chrome
<meta name=”description” content=”不超过150个字符”/> 页面描述
<meta name=”keywords” content=””/> 页面关键词
<meta name=”author” content=”name, email@gmail.com”/> 网页作者
<meta name=”robots” content=”index,follow”/> 搜索引擎抓取
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 为移动设备添加 viewport
<meta name=”apple-mobile-web-app-title” content=”标题”> iOS 设备 begin
<meta name=”apple-mobile-web-app-capable” content=”yes”/> 添加到主屏后的标题（iOS 6 新增）
是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”format-detection” content=”telphone=no, email=no”/> 设置苹果工具栏颜色
<meta name=”renderer” content=”webkit”> 启用360浏览器的极速模式(webkit)
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”> 避免IE使用兼容模式
<meta http-equiv=”Cache-Control” content=”no-siteapp” /> 不让百度转码
<meta name=”HandheldFriendly” content=”true”> 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
<meta name=”MobileOptimized” content=”320″> 微软的老式浏览器
<meta name=”screen-orientation” content=”portrait”> uc强制竖屏
<meta name=”x5-orientation” content=”portrait”> QQ强制竖屏
<meta name=”full-screen” content=”yes”> UC强制全屏
<meta name=”x5-fullscreen” content=”true”> QQ强制全屏
<meta name=”browsermode” content=”application”> UC应用模式
<meta name=”x5-page-mode” content=”app”> QQ应用模式
<meta name=”msapplication-tap-highlight” content=”no”> windows phone 点击无高光
设置页面不缓存
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>
网友评论