Meta

<meta>标签用于表示那些不能由其他HTML标签（<base>、<link>、<script>、<style>、<title>)提供的任何元数据信息。

属性

1、content

必须属性

定义与http-equiv或name属性相关的元信息

<meta name="keywords" content="HTML">

2、http-equiv

可选属性

用于把content属性关联到HTTP头部

取值：

• content-type

• expires(有效期) 用于设置网页到期的时间。一旦网页过期，必须到服务器重新传输。

  <meta http-equiv="expires" content="31 Dec 2008">

• refresh(刷新) 自动刷新并指向新页面

  ＜meta http-equiv="Refresh" content="3；URL=http://www.duniang.com/"＞  //3指的是延迟三秒自动刷新到新网址

• set-cookie
  设置发送的cookie的信息

3、name

可选属性

将content属性关联到一个名称

• author 文档的作者
• description 页面内容的缩略而精准的描述
• keywords 关键词
• viewport 视口
• generator
• revised
• other

4、scheme

可选属性

定义用于翻译content属性值的格式

5、charset

可选属性

定义文档的编码格式

<meta charset="utf-8">

---

常见用法：

1、浏览器的优先渲染模式

<meta http-equiv="X-UA-Compatible" content="IE=7">  

以上代码告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面。

<meta http-equiv="X-UA-Compatible" content="IE=8">  

以上代码告诉IE浏览器，IE8/9都会以IE8引擎来渲染页面。

<meta http-equiv="X-UA-Compatible" content="IE=edge">  

以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。

<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">  
<meta http-equiv="X-UA-Compatible" content="IE=7,9">  
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

以上代码IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame.

2、页面相关

描述：

<meta name="description" content="描述不能超过150个字符">

关键字：

<meta name="keywords" content="key1,key2,key3,..">

作者

<meta name="author" content="name,email,...">

与搜索引擎相关

/*index允许引擎将页面编入索引
follow允许引擎跟踪页面上的链接*/
<meta name="robots" content="index,follow> 

3、为移动设备添加viewport

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

4、iOS设备相关

<meta name="apple-moblie-web-app-title" content="度娘">  //ios设备使用Safari将网页添加到主屏幕时，默认的名称。
<meta name="apple-moblie-web-app-status-bar-style" content="black">  //iOS设备的状态栏样式，有三个取值black，default，black-translucent
<meta name="apple-moblie-web-app-capable" content="yes">  //表示是否删除工具栏和菜单栏，默认为不删除no

5、页面数字和email

<meta name="format-detection" content="telephone=no,email=no"> //忽略页面上的电话和邮件地址，不将它们转换为可以拨打电话和发送邮件的链接

6、显示方向orientation

<meta name="screen-orientation" content="portrait"> //UC浏览器强制竖屏
<meta name="x5-orientation" content="portrait">  //QQ强制竖屏

7、全屏显示

<meta name="full-screen" content="true">  //UC强制全屏
<meta name="x5-fullscreen" content="true">  //QQ强制全屏

8、应用模式

<meta name="browsermode" content="application">  //UC应用模式
<meta name="x5-page-mode" content="app">  //QQ应用模式

9、其他

<meta name="msapplication-tap-highlight" content="no"> //windows phone 点击无高光
<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">  //微软的老式浏览器