开发者学堂课程【HTML 基础入门学习:meta 标签中的 http-equiv 属性】学习笔记与课程紧密联系,让用户快速学习知识
课程地址:https://developer.aliyun.com/learning/course/465/detail/5718
meta 标签中的 http-equiv 属性
内容介绍
一、回顾
二、http-equiv 属性常见的值
三、举例
四、渲染
五、总结
一、回顾
上一节讲述了 meta 和当前文档关联的一些信息必须有名称、值一对的属性来出现,要指明这个值关联到什么名称。
名称由三个常见的:http-equiv、name、scheme,和必须的值 content。
三个名称三选一决定这个值是什么关系。
本节课讲述 http-equiv 和 http 头部相关
二、http-equiv 属性常见的值
1. content-type 内容类型
2. expires 过期时间
比如指定2015年12月30日过期,那么缓存到2015年12月30日之前都是可以的,过了这个时间就失效了要重新去请求。但是过期后页面也是可以访问的。
3.refresh 页面刷新
4.set-cookie 设定 cookie
用得相对比较少,因为更多的对 cookie 读取、更新一般更多的是在js层面去做cookie 的操作。
5.X-UA-Compatible
针对ie,设置浏览器优先使用什么模式来渲染页面 //其他浏览器对这个属性无效。
比如用 ie 浏览器看页面会发现其实手动可以改用 ie8 模式也可以 ie7 模式。用 ie10浏览器看会发现也可以用 ie9 看。
所以这就是开发者想让用户看到 ie 几的模式,不让用户自己修改,或者加载进去尽量都用统一模式,这时候就要用这个属性来指定浏览器优先使用什么模式来渲染页面,即使你的浏览器是 ie10 或 ie11.
三、举例
1. <!DOCTYPE html><html>
<head>
<title
>
</title>
</head>
<body>
</body>
</html>
//写入:欢迎来到攻城课堂~
保存会出现乱码,因为没有指明字符集,meta 可以指明字符集。
比如在中国会有中文,在韩国会有韩文,html 没有指明字符集的时候,浏览器在渲染的时候不知道是什么文,所以需要指明字符集。
//故引入代码:
<meta http-equiv="Content-Type" content="texthtml; charset=utf-8">
//保存显示中文,这就是字符集的作用。
//引入代码:
<meta http-equiv="Refresh" content="5;url=http://www.baidu.com"/>
//5秒后跳转到百度。
这个值内相当于有两个参数,如果 content 里有不同值的时候使用;隔开。
注意此处的单位是秒。
刷新5秒后会跳转到百度,说明有作用。
2.其他例子
<meta http-equiv="X-UA-Compatible" content="ie=7">
ie 浏览器都会用 ie7 来渲染
不管是 ie 几浏览器,打开都是 ie7 模式。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
四、渲染
ie 会用最高版本渲染
比如不同的 ie 浏览器版本不一样,那么就依据每一个不同版本的最高版本,比如小明的是 ie8 浏览器,那就用 ie8 渲染。小亮是 ie10 的版本,那么就用 ie10 渲染。
<meta http-equiv="X-UA-
Compatible"content="IE=Edge,chrome=1 ">
ie会用最高版本渲染,如果安装了 gcf (google chrome frame) 可以使用 chrome 渲染
当今众多网站都在使用这一个,因为有些用户安装 chrome 浏览器应该会自带安装google chrome frame,所以在 ie 上看到也可以。
如果没有安装 gcf 那就用ie最高版本,如果安装了 gcf,那么就用 chrome 内核来渲染。
五、总结
http-equiv 属性用的最多的是 content-type 和 X-UA-Compatible
content-type 是必须掌握的,因为大多一开始都是做中文相关的开发,故必须要指明内容类型。
X-UA-Compatible 刚开始可不用考虑,但如果去大公司实习,做一些大公司面向用户更广的产品,而且用户群体使用 ie 浏览器更多的时候一定要是用这个属性。