Meta标签中的http-equiv属性

http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。

<meta http-equiv="参数" content="参数变量值" />

X-UA-Compatible(IE专有)

览器市场份额的激烈竞争,给网页设计开发人员带来了兼容性设计的麻烦。单单 IE 浏览器就有好几个主流版本,IE6、IE7、IE8 等等。当然使用诸如 IETester,多版本 IE 共存解决方案之类的第三方集成工具,可以方便代码调试。但我们总需要找寻一种更为省时省力的方法。

X-UA-Compatible 是针对 IE 版本的一个特殊文件头标记,用于为 IE 指定不同的页面渲染模式。由于当下 IE6 和 IE7 使用率依然较高,综合考虑,启用 IE 版本的 X-UA-Compatible 兼容模式显得相当重要。

各种兼容模式代码示例如下:

像是使用了 Windows Internet Explorer 7 的 Quirks 模式,这与 Windows Internet Explorer 5 显示内容的方式很相似。

无论页面是否包含 <!DOCTYPE> 指令,均使用 Windows Internet Explorer 7 的标准渲染模式。

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

开启 IE8 的标准渲染模式,但由于本身 X-UA-Compatible 文件头仅支持 IE8 以上版本,因此等同于冗余代码。

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

Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容。

这实际上破坏了“锁定”模式,等于没有设置这个属性。

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

EmulateIE7 模式通知 Windows Internet Explorer 使用 <!DOCTYPE> 指令确定如何呈现内容。标准模式指令以Windows Internet Explorer 7 标准模式显示,而 Quirks 模式指令以 IE5 模式显示。与 IE7 模式不同,EmulateIE7 模式遵循 <!DOCTYPE> 指令。对于多数网站来说,它是首选的兼容性模式。

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

Expires(期限)

说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。

<meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT">  

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

Pragma(cache模式)

说明:是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出

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

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

清除缓存(再访问这个网站要重新下载!)

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

Refresh(刷新)

说明:自动刷新并指向新页面。

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

注意:其中的2是指停留2秒钟后自动刷新到URL网址。

Set-Cookie(cookie设定)

说明:如果网页过期,那么存盘的cookie将被删除。

<meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT; path=/">  

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

Window-target(显示窗口的设定)

说明:强制页面在当前窗口以独立页面显示。

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

注意:用来防止别人在框架里调用自己的页面。

content-Type(显示字符集的设定)

说明:设定页面使用的字符集。

<meta http-equiv="content-Type" content="text/html; charset=gb2312">  

Pics-label(网页等级评定)

<meta http-equiv="Pics-label" contect="">  

说明:在IE的internet选项中有一项内容设置,可以防止浏览一些受限制的网站,而网站的限制级别就是通过meta属性来设置的。

Page_Enter、Page_Exit

设定进入页面时的特殊效果

<meta http-equiv="Page-Enter"    contect="revealTrans(duration=1.0,transtion=12)">  

设定离开页面时的特殊效果

<meta http-equiv="Page-Exit"    contect="revealTrans(duration=1.0,transtion=12)">    

Duration的值为网页动态过渡的时间,单位为秒。  
Transition是过渡方式,它的值为0到23,分别对应24种过渡方式。如下表:  
0 盒状收缩

1 盒状放射  
2 圆形收缩

3 圆形放射  
4 由下往上

5 由上往下  
6 从左至右

7 从右至左  
8 垂直百叶窗

9 水平百叶窗  
10 水平格状百叶窗

11 垂直格状百叶窗  
12 随意溶解

13 从左右两端向中间展开  
14 从中间向左右两端展开

15 从上下两端向中间展开  
16 从中间向上下两端展开

17 从右上角向左下角展开  
18 从右下角向左上角展开

19 从左上角向右下角展开  
20 从左下角向右上角展开

21 水平线状展开  
22 垂直线状展开

23 随机产生一种过渡方式

keywords 关键字

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />  

给搜索引擎用的

description 页面描述

<meta http-equiv="description" content="This is my page" />  

给搜索引擎用的

时间: 2024-08-27 09:29:03

Meta标签中的http-equiv属性的相关文章

浅析网页meta标签中X-UA-Compatible属性的使用

今天有一个做开发的朋友突然问你知道很多网站上面加入的X-UA-Compatible属性的意义么?其实这个在以前还专门花了一点时间来验证我自己的想法,结果也确实如自己所预想的那样,八九不离十,当然有一点点的偏差.我做的项目中也并不是每个项目中都使用该属性.那么我们首先来看看几个知名站点,他们也使用了这个 上面时淘宝的,下面是百度的. 都可以发现在head中又一个meta,里面有一个X-UA-Compatible的属性,而且确实非常多的网站中在使用.当然也有很多网站是在开发的时候不管三七二十一给加上

Meta标签中的apple-mobile-web-app属性及含义

一.Meta标签中的apple-mobile-web-app-capable属性及含义 这meta的作用就是删除默认的苹果工具栏和菜单栏. content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示. 二.Meta标签中的apple-mobile-web-app-status-bar-style属性及含义 “apple-mobile-web-app-status-bar-style”作用是控制状态栏显示样式 (默认样) 具体效果如下: st

Meta标签中的属性及含义

一.Meta标签中的format-detection属性及含义 format-detection翻译成中文的意思是“格式检测”,顾名思义,它是用来检测html里的一些格式的,那关于meta的format-detection属性主要是有以下几个设置: meta name="format-detection" content="telephone=no" meta name="format-detection" content="email

Meta标签中的format-detection属性及含义(转)

一.Meta标签中的format-detection属性及含义 意为:格式检测 或许你会有这样的经历:当你在制作手机端的页面中,点击了没有加任何链接的格式的数字时,这时手机会进行自动拔号提示操作! 禁止这一提示方法: 加入meta标签,如:<meta name="format-detection" content="telephone=no"> 同理,还会有以下相关操作: 1.禁止跳转邮箱:<meta name="format-detec

meta标签中的http-equiv属性使用介绍(转载)

meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等! meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能. 1.name属性 name属性主

关于meta标签中的http-equiv属性使用介绍

meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等! meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能. 1.name属性 name属性主

meta标签中的http-equiv属性使用介绍

meta是html语言head区的一个辅助性标签;meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言等等 meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果, meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等! meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属

HTML Meta标签中的viewport属性含义及设置

http://blog.hexu.org/archives/1947.shtml 随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择.然而,每一款手机有不同的分辨率,不同屏幕大小,如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢?学习html5 viewport的使用能帮你做到这一点……viewport 语法介绍: 1 2 3 4 5 6 7 8 9 10 11 12 <!--

Meta标签中的viewport属性及含义

Viewport DEMO 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> 这段代码的意思是,让viewport的宽度等于物理设备上的真实分辨率,不允许用户缩放.一都

.NET 在meta标签中使用表达式设置页面的关键字

在aspx文件中 给meta标签的属性复制是不能直接使用 表达式的 错误的写法: <meta name="keywords" content="<%=newsType.Nt_KeyWords %>"/> 无法解析 正确的写法: <meta name="keywords" content=<%="\"" +newsType.Nt_KeyWords %>"/> &