常用meta标签

meta是html语言head区的一个辅助性标签。也许你认为这些代码可有可无。其实如果你能够用好meta标签，会给你带来意想不到的效果，meta标签的作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等！ 

meta标签的组成：meta标签共有两个属性，它们分别是name和http-equiv属性。

SEO优化

A、Keywords(关键字)　 

说明：keywords用来告诉搜索引擎你网页的关键字是什么。 

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

B、description(网站内容描述) 

说明：description用来告诉搜索引擎你的网站主要内容。 

<meta name="description" content="免费的web技术教程" />

C、robots(机器人向导) 

说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。 

<meta name="robots" content="none"> 

信息参数为all：文件将被检索，且页面上的链接可以被查询； 默认是all。
信息参数为none：文件将不被检索，且页面上的链接不可以被查询； 
信息参数为index：文件将被检索； 
信息参数为follow：页面上的链接可以被查询； 
信息参数为noindex：文件将不被检索，但页面上的链接可以被查询； 
信息参数为nofollow：文件将被检索，但页面上的链接不可以被查询；

D、author(作者) 

说明：标注网页的作者 

<meta name="author" content="梁涛,tylzl_1986@163.com"> 

 

 移动端设备

A、viewport  能优化移动浏览器的显示。

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素） 
height：高度（数值 / device-height）（范围从223 到10,000） 
initial-scale：初始的缩放比例 （范围从>0 到10） 
minimum-scale：允许用户缩放到的最小比例 
maximum-scale：允许用户缩放到的最大比例 
user-scalable：用户是否可以手动缩 (no,yes)

其他

<!-- 启用 WebApp 全屏模式-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。-->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- 忽略数字自动识别为电话号码-->
<meta content="telephone=no" name="format-detection" />
<!-- 忽略识别邮箱-->
<meta content="email=no" name="format-detection" />
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

网页相关

 A、申明编码

<meta charset='utf-8' />   <!--charset是HTML5中的新属性，替换了下面的方法--> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

GB2312时，代表说明网站是采用的编码是简体中文； 
BIG5时，代表说明网站是采用的编码是繁体中文； 
ISO-8859-1时，代表说明网站是采用的编码是英文； 
UTF-8时，代表世界通用的语言编码； 

B、优先使用 IE 最新版本和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 关于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

C、浏览器内核控制

由于众所周知的原因，国内的主流浏览器都是双核浏览器。浏览器默认内核的指定只需在head标签中添加一行代码即可。

<meta name="renderer" content="webkit|ie-comp|ie-stand">

若页面需默认用极速核，"webkit"
若页面需默认用ie兼容内核，"ie-comp"
若页面需默认用ie标准内核，"ie-stand"

内核	Webkit	IE兼容	IE标准
内核版本	Chrome 45	IE6/7	IE9/IE10/IE11(取决于用户的IE)
HTML5支持	YES	NO	YES
ActiveX控件支持	NO	YES	YES

 

D、Expires(期限) 
说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。 

<meta http-equiv="expires" content="Fri,12Jan200118:18:18GMT"> 

注意：必须使用GMT的时间格式。

E、Pragma(cache模式) 

说明：禁止浏览器从本地计算机的缓存中访问页面内容。 

<meta http-equiv="Pragma" content="no-cache"> 

注意：这样设定，访问者将无法脱机浏览。 

F、Refresh(刷新) 
说明：自动刷新并指向新页面。 

<meta http-equiv="Refresh" content="2;URL=http://www.jb51.net">

注意：其中的2是指停留2秒钟后自动刷新到URL网址。不写url表示刷新当前页面。 

G、Set-Cookie(cookie设定) 
说明：如果网页过期，那么存盘的cookie将被删除。 必须使用GMT的时间格式。 

<meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/"> 

H、Window-target(显示窗口的设定) 
说明：强制页面在当前窗口以独立页面显示。 用来防止别人在框架里调用自己的页面。 

<meta http-equiv="Window-target" content="_top"> 

I、content-Language（显示语言的设定） 

<meta http-equiv="Content-Language" content="zh-cn"/> 

J、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消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。