本文转载自http://ziren.org/html-css/html-meta-http-equiv.html

meta http-equiv 把 content 属性关联到 HTTP 头部。

1、Content-Type和Content-Language (显示字符集的设定)

说明:设定页面使用的字符集,用以说明主页制作所使用的文字已经语言,浏览器会根据此来调用相应的字符集显示page内容。

用法:

view sourceprint
1.<meta http-equiv="content-type" content="text/html; charset=utf-8" />
2.<meta http-equiv="content-language" content="zh-CN" />

注意:该META标签定义了HTML页面所使用的字符集为utf-8,就是国标汉字码。如果将其中的“charset=utf-8”替换成“BIG5”,则该页面所用的字符集就是繁体中文Big5码。

  • Content-Type的Content还可以是:text/xml等文档类型;Charset选项:ISO-8859-1(英文)、BIG5、UTF-8、SHIFT-Jis、Euc等字符集;
  • Content-Language的Content还可以是:EN、FR等语言代码。

2、Refresh (自动刷新页面)

说明:让网页多长时间(秒)刷新自己,或在多长时间后让网页自动链接到其它网页。

用法:

view sourceprint
1.<meta http-equiv="Refresh" content="30" />
2.<meta http-equiv="Refresh" content="5; url=http://ziren.org/" />

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

3、Expires (期限)

说明:指定网页在缓存中的过期时间,一旦网页过期,必须到服务器上重新调阅。

用法:

view sourceprint
1.<meta http-equiv="Expires" content="0" />
2.<meta http-equiv="Expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />

注意:必须使用GMT的时间格式,或直接设为0(数字表示多少时间后过期)。

4、Pragma (cach模式)

说明:禁止浏览器从本地机的缓存中调阅页面内容。

用法:

view sourceprint
1.<meta http-equiv="Pragma" content="No-cach" />

注意:网页不保存在缓存中,每次访问都刷新页面。这样设定,访问者将无法脱机浏览。

5、Set-Cookie (cookie设定)

说明:浏览器访问某个页面时会将它存在缓存中,下次再次访问时就可从缓存中读取,以提高速度。当你希望访问者每次都刷新你广告的图标,或每次都 刷新你的计数器,就要禁用缓存了。通常HTML文件没有必要禁用缓存,对于ASP等页面,就可以使用禁用缓存,因为每次看到的页面都是在服务器动态生成 的,缓存就失去意义。如果网页过期,那么存盘的cookie将被删除。

用法:

view sourceprint
1.<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Wednesday,21-Oct-98 16:14:21 GMT; path=/" />

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

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

用法:

view sourceprint
1.<meta http-equiv="Widow-target" content="_top" />

注意:这个属性是用来防止别人在框架里调用你的页面。Content选项:_blank、_top、_self、_parent。

7、Content-Script-Type (脚本相关)

说明:这是近来W3C的规范,指明页面中脚本的类型。

用法:

view sourceprint
1.<meta http-equiv="content-script-type" content="text/javascript" />

IE浏览器下:

  • Page-Enter、Page-Exit 页面进入和离开是的特效
  • Site-Enter、Site-Exit 站点进入和离开是的特效

用法:

view sourceprint
1.<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.5)" />
2.<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.5)" />
3.<meta http-equiv="Site-Enter" content="blendTrans(Duration=0.5)" />
4.<meta http-equiv="Site-Exit" content="blendTrans(Duration=0.5)" />

注意:blendTrans是动态滤镜的一种,产生渐隐效果。

另一种动态滤镜RevealTrans也可以用于页面进入与退出效果:

view sourceprint
1.<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)" />
2.<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)" />
3.<meta http-equiv="Site-Enter" content="revealTrans(duration=x, transition=y)" />
4.<meta http-equiv="Site-Exit" content="revealTrans(duration=x, transition=y)" />

  • Duration 表示滤镜特效的持续时间(单位:秒)
  • Transition 滤镜类型。表示使用哪种特效,取值为0-23。

其取值意思如下表所示:

0 盒状收缩 12 随意溶解
1 盒状放射 13 从左右两端向中间展开
2 圆形收缩 14 从中间向左右两端展开
3 圆形放射 15 从上下两端向中间展开
4 由下往上 16 从中间向上下两端展开
5 由上往下 17 从右上角向左下角展开
6 从左至右 18 从右下角向左上角展开
7 从右至左 19 从左上角向右下角展开
8 垂直百叶窗 20 从左下角向右上角展开
9 水平百叶窗 21 水平线状展开
10 水平格状百叶窗 22 垂直线状展开
11 垂直格状百叶窗 23 随机产生一种过渡方式

当我们点击网页上的链接时,浏览器页面就会转到链接指向的新的页面,我们想在页面转换时加上过渡效果。
打开这个页面的原代码,在<head>与</head>插入代码:

view sourceprint
1.<meta http-equiv="Page-Exit" content="revealTrans(Duration=3,Transition=5)">

这样这个过渡效果就完成了,很简单吧。现在我们来测试一下效果如何,打开这个页面,然后点击页面上的链接,页面在转到下一个页面的过程中,我们看到页面是从上到下慢慢的转换到第二个页面的。

8、关键词、描述

说明:META也常用来描述网页,以供某些搜索站台机器人的使用。大家知道,搜索站台分为两大类,一类为完全人工登录,比如Yahoo;另一类 为机器人搜索,以机器人搜索的搜索站台会包含更多的内容。机器人会搜索网页META标签中所设置的描述关键字,把它们加入到搜索数据库中,用来索引你的网 页。而这个标签很少有人注意到。在格式中,Content列出了你所设置的关键字,这其中的内容可以自行设置,其间用逗号相隔。这里有个技巧,你可以重复 某一个单词,这样可以提高自己网站的排行位置

用法:

view sourceprint
1.<meta name="keywords" content="这里是关键词" />
2.<meta name="description" content="这里是描述" />

9、控制页面缓冲

说明:META可以设置网页到期的时间,也就是说,当你在Internet Explorer 4.0浏览器中设置浏览网页时首先查看本地缓冲里的页面,那么当浏览某一网页,而本地缓冲又有时,那么浏览器会自动浏览缓冲区里的页面,直到META中设 置的时间到期,这时候,浏览器才会去取得新页面

用法:

view sourceprint
1.<meta http-equiv="expires" content="TUE,11.NOV  1998  00:00  GMT" />
2.<meta http-equiv="pragma" content="no-cache" />

设置浏览器为不缓存当前网页

view sourceprint
1.<meta http-equiv="cache-control" content="no-cache" />

设置浏览器为不缓存当前网页

view sourceprint
1.<meta http-equiv="expires" content="0" />

设置网页过期,0表示永不过期或设置-1。

html meta标签之http-equiv(转)相关推荐

  1. HTML meta标签总结与属性使用介绍

    转载自: https://segmentfault.com/a/1190000004279791 之前学习前端中,对meta标签的了解仅仅只是这一句. <meta charset="U ...

  2. meta标签使用手册

    目录 一.meta标签的含义 二.meta使用说明 1. charset 2. http-equiv (1). content-security-policy (2). content-type (3 ...

  3. SEO优化之meta标签

    2019独角兽企业重金招聘Python工程师标准>>> meta的标签的使用是我在前端学习中曾经困惑过一段时间的问题.一方面不是很了解meta标签的用途,另一方面是对于meta标签里 ...

  4. 【建站系列教程】7、SEO优化之meta标签【最后一篇】

    [建站系列教程]7.SEO优化之meta标签[进阶] 写在前面:大家好,我是热爱编程的小泽. [建站系列教程]是我的亲身建站经历写给广大建站同胞们的教学博客. 喜欢的话点个赞吧~ 评论区欢迎交流讨论~ ...

  5. jekyll 博客对搜索引擎的SEO提升方法--head中的meta标签和Jekyll SEO Tag

    我用GitHub Pages搭建了jekyll的博客后,想要提升自己博客的SEO,尤其是对搜索引擎:百度.谷歌. head中的meta标签 说道提升SEO,必然要提到HTML中的head标签中的met ...

  6. HTML meta标签总结

    HTML meta标签总结,HTML5 head meta属性整理-前端开发博客 http://caibaojian.com/mobile-meta.html 转载于:https://www.cnbl ...

  7. html5 meta标签属性整理

    html5 meta标签属性整理 前言:不知道有没有人觉得,html的meta标签描述的头部信息特别多,有针对的SEO的头部信息,也有针对移动设备的头部信息,今日特地在网上搜集资料自己稍微对其整理一下 ...

  8. 移动平台的meta标签-----神奇的功效

    对于桌面平台web布局中大家对meta标签再熟悉不过了,它永远位于 head 元素内部,对做SEO的朋友一定对meta有种特殊的感情吧,今天我们就来说说移动平台的meta标签,在移动平台meta标签究 ...

  9. 给html5标签设置手机号码格式化,meta标签name=format-detection属性写法及用法

    meta标签中name="format-detection"属性作用是在手机端浏览html网页时,用于识别电话号码.电子邮箱和地图位置的格式! 用法格式: 将代码添加到网页的 和之 ...

  10. Asp.net 后台添加CSS、JS、Meta标签

    下面是从Asp.net 后台添加CSS.JS.Meta标签的写法,我们这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.U ...

最新文章

  1. python class 属性是什么_python class 的属性
  2. Base64编码原理与应用
  3. Plupload+easyui+springmvc实现批量上传
  4. std::make_shared<T>/std::make_unique<T>与std::shared_ptr<T>/std::unique_ptr<T>的区别与联系
  5. 向上取整函数_向上取整函数ROUNDUP在BOM表里面的实际应用
  6. 【C++基础学习】C++引用参数与指针参数
  7. 设计软件哪里找?图片素材哪里找?
  8. qq2013 sp1 去广告方法及代码
  9. 数据分析工具具备什么功能
  10. 解决pre-commit hook failed (add --no-verify to bypass)的问题
  11. Mac下开机启动rc.common不生效的问题
  12. suse 11 mysql_SUSE11SP3X86_64安装配置mysql-8.0.11(亲测可用,软件均为官网下载)
  13. Visual Studio 2019 离线注册方法记录
  14. 华为数字化转型的钻石模型
  15. 软件工程:PG.SE.PL.PM角色定义
  16. 安全生产知识竞赛试题库及答案
  17. eclipse、android studio快速输入System.out.println();
  18. Android android_id, deviceId, oaid的区别
  19. 你想不到,韩国女团最喜欢的英文单词是这些
  20. 广度优先搜索、宽度优先搜索,《学点算法吧,Python》

热门文章

  1. 网页音乐制作器(网页钢琴)-- MusicMaker
  2. 重置Wordpress 的管理员密码
  3. 碎碎念情境记忆法——最适合程序员的背单词方法
  4. 03_Snaker流程demo
  5. 智能化酒糟池测温技术方案
  6. lync2013持久聊天服务器如何修复,部署企业版lync2013之四:持久聊天
  7. conversational recommender system论文笔记;推荐系统(recommender system)+对话系统(dialogue system)
  8. 网站速度和性能测试工具
  9. 大数据面试题汇总(含数仓)
  10. 用微信公众号写博客就是玩,要动真格的还是得WordPress!