HTML Meta标签

Posted 2020-06-13

Meta标签用于存储web页面上的信息。本质上讲,它是信息数据。他帮助浏览器和搜索引擎更好地知道、理解页面内容。

 

Web开发者，通过Mata标签设置页面描述、作者或关键字等等。然而，许多meta标签功能,我们大多数人可能不知道。本文为大家整理了5个你可能从未知道的HTNL Meta标签功能。

 

 

1、控制浏览器缓存

 

当我们访问网页，本地缓存可以让我们提高访问该页面的速度。有时候，你可能会发现，你再次访问的页面没有得到更新，这是因为浏览器显示缓存页面。如果，你想这种事情不再发生，通过使用Meta标签禁用浏览器缓存，可以解决。代码如下：

 

 

以上代码在主流浏览器上都可以使用。可以使用更多的值和规范禁用缓存：

 

 

你也可以设置一个截止日期，以确保浏览器将显示来自服务器的文件，而且是最新内容，而不是缓存中的。

 

 

上面的代码意思是，指定的日期和时间文件过期时间。

 

2、设置cookie

 

和缓存相似，cookies你在浏览器访问过的网站的一小块数据存储信息。现在很多网站都会使用cookie，最典型的例子，就是，我们在很多网站上看到不断变换的广告。如果你在百度上搜索了某商品，那么他就会被存储下来，一般来说都会存储1-7天，也有可能更长。

 

设置cookie，你可以使用下面的代码：

 

 

name=data 是cookie名称，由设置的值决定。反之，expired表示cookie到期后删除的时间。如果把过期时间设置为空，你关掉浏览器，cookie就会被清空。

 

举个例子，我想把cookie过期时间设置为2015年1月31日：

 

 

3、刷新网页

 

你可以设置一段时间后对页面进行刷新操作。meta http-equiv="refresh"可以指定浏览器延迟一段时间自动刷新页面。下面的meta-tag指定浏览器每5秒自动刷新一次。

 

 

下图为效果：

 

 

4、重定向

 

我们可以使用refresh meta标签对页面进行重定向。下面的例子将在5秒后访问example.com

 

 

我们可以看下动画效果：

 

 

如果是要立即生效，可以设计为0，如下：

 

 

5、网页转换

 

你可以使用meta-tag如PPT一样转换页面，转换语法如下：

 

 

注意：这 只适合老IE浏览器。page-enter 、page-exit 是微软专有的meta标签规范。你可以使用duration设置时间。Transition由0-23的数字/整数组成。相反，meta http-equiv="page-enter" content="blendTrans(duration=sec)" 是另外的非转换类型值。