meta标签的详细属性用法

meta标签是网页的一个重要标签，他用来描述网页重要信息，优化SEO搜索蜘蛛，定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等！

meta的属性只有两种：name和http-equiv

一、name属性的作用是用来描述网页的信息，与content属性配套使用，content中写有关这个网站的信息以及各种关键词

name属性常见使用的有三种，keywords、description、renderer

1.keywords被用来写入网站的关键词：

<meta name="keywords" content="B站，动漫，新番"/>

 

2.description被用来写入网站描述：

<meta name="description" content="B站能带给大家很多快乐，是视频弹幕网站"/>

 

3.renderer则是告诉网站使用何种模式来渲染网站，国内的主流浏览器都是双核浏览器：基于Webkit的内核用于常用网站的高速浏览，基于IE的内核主要用于部分网银、政府、办公系统等网站的正常使用。Content的内容则是webkit、ie-comp、ie-stand三者之一：

另外，在这里讲解一下网页渲染的概念：

网页渲染经过四个过程：

（1）接受服务器的html文件生成dom

（2）加载并解析样式，生成cssdom

（3）根据上面的dom和cssdom来生成一个渲染树，除去一些不可见的元素，例如head的元素和display：none的元素之外，这个渲染树描述了dom的结构

（4）为每一个渲染元素进行布局定位

（5）把布局显示在浏览器上

 

<meta name="renderer" content="webkit"/>   调用双核浏览器的极速模式

<meta name="renderer" content="ie-comp"/>  调用ie兼容模式

<meta name="renderer" content="ie-stand"/>   调用ie标准模式

我们优先调用极速模式渲染主要网站，少量的网站再用兼容模式渲染

 

二、http-equiv属性主要完成的作用有四个：定时刷新页面，规定文档字符编码，指定文件的兼容模式

1.refresh

<meta http-equiv="refresh" content="300"/>（一般refresh建议要慎重使用，因为这样刷新页面将不受用户的控制，降低用户体验）

2.content-type

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

3.X-UA-Compatible（X-UA-compatible标头没有大小写之分。然而除了title元素及其他的meta元素之外，它必须出现在网页header节其它元素之前的位置）

<meta http-equiv="X-UA-Compatible" content="IE-edge"/>(针对旧版本的浏览器设计的网页有时候无法正常解析编译，需要使用meta标签以及<!DOCTYPE>文档声明来告诉浏览器应该如何使用旧有标准来编译这个网页)

一般来讲，最佳的兼容模式是<meta http-equiv="X-UA-Compatible" content="IE-edge，chrome=1"/>，其中IE-edge表示使用IE的最高级模式来渲染网页，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。简单的说，就是什么版本 IE 就用什么版本的标准模式渲染。添加”chrome=1“将允许站点在使用了谷歌浏览器内嵌框架（ChromeFrame）的客户端渲染，对于没有使用的，则没有任何影响。

*X-UA-Compatible的其他属性值：

内容属性值在接收到异于先前叙述的数值时是具有弹性的。这能使你对于IE如何显示你的网页更有操控性。举例来说，你可以设定内容属性值为IE=7.5。当你这样做的时候，IE尝试将这个值转换为version vector并选择最接近的结果。在这个例子中，IE会将其设定为IE7 mode。下面的范例显示该模式设定为其他值的状况。

<meta http-equiv="X-UA-Compatible" content="IE=4"> <!-- IE5 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=7.5"> <!-- IE7 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=100"> <!-- IE8 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=a"> <!-- IE5 mode --> 

<!-- This header mimics Internet Explorer 7 and uses
<!DOCTYPE> to determine how to display the Web page -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

注意: 前面的范例显示单独的内容值。实际上IE只会执行网页中第一个X-UA-Compatible标头。

你也可以使用内容属性来指定复数的文件兼容性模式，这能帮助确保你的网页在未来的浏览器版本都能一致的显示。欲设定复数的文件模式，请设定内容属性以判别你想使用的模式。使用分号来分开各个模式。

如果一个特定版本的IE支持所要求的兼容性模式多于一种，将採用列于标头内容属性中最高的可用模式。你可以使用这个特性来排除特定的兼容性模式，虽然并不推荐这样做。举例来说，下列标头即会排除IE7 mode。

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

 

与X-UA-Compatible属性相关的文章链接：http://www.cnblogs.com/menyiin/p/6527339.html