微信群发布网

当前位置:首页 > 微信群 >交友 >
meta标签的用法说明_最全微信文章素材库!

meta标签的用法说明_最全微信文章素材库!

meta标签的用法说明_最全微信文章素材库!

微群网微信群发布网分享

详情介绍

meta标签的用法说明

发布人:群推广 / 发布时间:2019-07-31 01:57:00    热度:814

meta标签keywords 和description以前都是我们网页优化的时候经常用到的。所以,一提到meta,我们就想到这两个了,但是最近项目中用到了许多新的,没想到这个小小的标签有这么多用处。

meta标签keywords 和description以前都是我们网页优化的时候经常用到的。所以,一提到meta,我们就想到这两个了,但是最近项目中用到了许多新的,没想到这个小小的标签有这么多用处。
<meta content="no" name="apple-mobile-web-app-capable">
删除默认的苹果工具栏和菜单栏。
需要显示工具栏和菜单栏时,不需要添加,默认值为no,即正常显示。如果content设置为yes,Web应用会以全屏模式运行,可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。
apple-mobile-web-app-status-bar-style 作用是控制状态栏显示样式 
具体效果如下: 
 

status-bar-style:black 


 

默认样式

format-detection —— 格式检测,用来检测html里的一些格式,主要有以下几个设置: 
- meta name=”format-detection” content=”telephone=no” 
- meta name=”format-detection” content=”email=no” 
- meta name=”format-detection” content=”adress=no”

或者直接写成: 
meta name=”format-detection” content=”telephone=no,email=no,adress=no”
telephone 
主要作用是是否设置自动将你的数字转化为拨号连接 
telephone=no 禁止把数字转化为拨号链接 
telephone=yes 开启把数字转化为拨号链接,默认开启
email 
告诉设备不识别邮箱,点击之后不自动发送 
email=no 禁止作为邮箱地址 
email=yes 开启把文字默认为邮箱地址,默认情况开启
adress 
adress=no 禁止跳转至地图 
adress=yes 开启点击地址直接跳转至地图的功能, 默认开启
 

如果需要设置HTML的过期时间,可以在meta中设置
expires 属性值 --expires用于网页缓存过期时间
expires出现在http-equiv属性中,使用content属性表示页面缓存的过期时间。一旦过期就必须从服务器上重新加载.

一、加长缓存期,减少从服务器请求:
时间必须使用GMT格式. 如果你想要一个GMT时间,可以用javascript的函数toGMTString()来生成。
document.write(new Date().toGMTString())

PHP也可以用string gmdate ( string $format [, int $timestamp ] )函数得到GMT。

回到HTML的expires设置,如下:

<meta http-equiv="expires" content="Sunday 26 October 2020 03:00 GMT" />

二、禁止缓存:

如果不想缓存,这样:
 <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
 <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> 
 <META HTTP-EQUIV="Expires" CONTENT="0">
其中的<META HTTP-EQUIV="Expires" CONTENT="0"> 可以设置为-1,如
<META HTTP-EQUIV="Expires" CONTENT="-1"> 
HTTP 1.1   引入了 Cache-Control 响应头参数以给站长们更多控制网站内容的权力,同时弥补了 Expires的局限
Cache-Control 的参数包括:
max-age=[单位:秒 seconds] — 设置缓存最大的有效时间. 类似于 Expires, 但是这个参数定义的是时间大小(比如:60)而不是确定的时间点.单位是[秒 seconds].
s-maxage=[单位:秒 seconds] — 类似于 max-age, 但是它只用于公享缓存 (e.g., proxy) .
public — 响应会被缓存,并且在多用户间共享。正常情况, 如果要求 HTTP 认证,响应会自动设置为 private.
private — 响应只能够作为私有的缓存(e.g., 在一个浏览器中),不能再用户间共享。
no-cache — 响应不会被缓存,而是实时向服务器端请求资源。这一点很有用,这对保证HTTP 认证能够严格地禁止缓存以保证安全性很有用(这是指页面与public结合使用的情况下).既没有牺牲缓存的效率,又能保证安全。
no-store — 在任何条件下,响应都不会被缓存,并且不会被写入到客户端的磁盘里,这也是基于安全考虑的某些敏感的响应才会使用这个。
must-revalidate — 响应在特定条件下会被重用,以满足接下来的请求,但是它必须到服务器端去验证它是不是仍然是最新的。
proxy-revalidate — 类似于 must-revalidate,但不适用于代理缓存.
在自适应网页设计中,我们使用meta标签来告诉浏览器网页的自适应规则。如:

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
这个meta,user-scalable=yes 是声明网页可以缩小放大。

通用搜索引擎对自适应识别校验代码

<meta http-equiv="Cache-Control" content="no-transform" /> <meta http-equiv="Cache-Control" content="no-siteapp" />
这两个meta,no-siteapp和no-transform,是告诉搜索引擎不要把网页转码。

自适应网站设计对百度友好的关键

其实,使用上面两个meta声明,百度就能识别自适应网页了。

不过,为了对百度更友好,让百度更方便识别校验,我们要再添加一个meta标签。

方法也很简单,只要在上面viewport标签下面再添加一个applicable-device标签就行:

<meta name="applicable-device" content="pc,mobile">
这个meta标签,表示页面同时适合在移动设备和PC上进行浏览。

什么是Viewport?
手机浏览器会把页面放入到一个虚拟的“视口”(viewpoint)中,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域大,也可能比浏览器的可视区域小。通常这个虚拟的“视口”(viewport)比屏幕宽,会把网页挤到一个很小的窗口。
如果不显示地设置viewport,那么浏览器就会把width默认设置为980。但后果是浏览器出现横向滚动条,因为浏览器可视区域的宽度比默认的viewport的宽度小。
然后浏览器引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放。

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
meta viewport 的6个属性:
width : 设置viewport 的宽度,默认视口宽度
height: 设置viewport 的高度
initial-scale : 设置页面的初始缩放值
minimum-scale :允许用户的最小缩放值
maximum-scale:允许用户的最大缩放值
user-scalable: 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许
 

微信群发布网