你所不知道的 Meta 标签的实现

作者 johansen 日期 2016-11-20
你所不知道的 Meta 标签的实现

meta也可以做到自动刷新page …

前段时间,看了一些技术文章关于缓存相关的,其中涉及到关于meta 标签 对于缓存的设置。
进而了解到关于meta标签的  一些比较有用的实现。

首先介绍一下meta的http-equiv属性,http-equiv属性为名称/值对,它指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对,通过设置该属性来改变服务器与用户代理。

定义方法:
<meta http-equiv="参数" content="具体的描述">

了解了相关语法结构,接下来我们介绍几个与它相关的键值对。

1.key : X-UA-Compatible

说明:用于告知浏览器以何种版本来渲染页面。

举例: <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面

2.key : cache-control

说明:指定请求和响应遵循的缓存机制,下面介绍几种用法:

  • no-cache: 发送请求给服务器,与服务器确认该资源是否被更改,如果未被更改,则使用缓存。
  • no-store: 不允许缓存,每次都要去服务器上,下载完整的响应。
  • public : 如果响应被标记为public,即使有关联的 HTTP 认证,甚至响应状态码无法正常缓存,响应也可以被缓存。大多数情况下,public不是必须的,因为明确的缓存信息(例如max-age)已表示 响应可以被缓存。
  • private : 只为单个用户缓存,因此不允许任何中继进行缓存。(比如说CDN就不允许缓存private的响应)
  • maxage : 表示当前请求开始,该响应在多久内能被缓存和重用,而不去服务器重新请求。例如:max-age=60表示响应可以再缓存和重用 60 秒。
  • no-siteapp : 避免wap页被百度自动转码

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

tip: 关于缓存相关的知识点

3.key : expires

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

举例:
<meta http-equiv="expires" content="Saturday 1 October 2016 01:00 GMT" />

4.key : fresh

说明:网页将在设定的时间内,自动刷新或转向设定的网址。使用 <meta http-equiv="refresh">标记进行重定向可能会降低您的搜索引擎排名。

举例:

  1. <meta http-equiv="refresh" content="5"> //当前页面5s后刷新
  2. <meta http-equiv="refresh" content="2; url='/'"> //可以作为404页面跳转
  3. <meta http-equiv="refresh" content="0; url='http://www.babytree.com/'"> //自动跳转到宝宝树首页

总结:

关于meta标签的用处还有很多,由于篇幅的原因这里就不一一介绍,送资源给大家参考吧:

  1. 缓存
  2. 更多的meta功能