|
前言
对于一名前端工程师来说，meta标签是再熟悉不过了。初学前端时，写的最多的就是下面的这句了：
<meta?charset="UTF-8" />
但是大多数前端er对meta的认识基本上就止步于此了，不要小看它，小标签却能实现大功能。这篇文章就来带着大家一起重新认识下常常被我们忽略的?meta?标签吧
什么是?meta
-
meta?是?html?语言?head?区的一个辅助性标签，位于文档的头部，不包含任何内容，其属性定义了与文档相关联的名称/值对。
-
meta?元素可提供相关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
-
meta标签共有两个属性，它们分别是?http-equiv?属性和?name?属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
几乎所有的网页里，我们可以看到类似下面这段的?html?代码：
<head>
??<meta?http-equiv="content-Type"?content="text/html;?charset=gb2312"?/>
</head>
也许你认为这些代码可有可无。其实如果你能够用好?meta?标签，会给你带来意想不到的效果，例如加入关键字会自动被大型搜索网站自动搜集；可以设定页面格式及刷新等等。
meta?中的?name?属性
name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
meta?标签的?name?属性?语法格式?:
<meta?name="参数"?content="具体的参数值"/>
其中?name?属性主要有以下几种参数：
keywords(关键词)
keywords 用来告诉搜索引擎你网页的关键字是什么。
<meta?name?="keywords"?content="公众号,前端开发爱好者,前端技术分享,视频教程资源,前端学习"/>
description(网站内容的描述)
description 用来告诉搜索引擎你的网站主要内容。
<meta?name="description"?content="前端开发爱好者是一个分享前端技术资源的公众号"/>
viewport(移动端的窗口)
大多数前端工程师都会称之为视口,这个属性常用于设计移动端网页,可以让开发者来控制网页的大小和缩放
<meta?name="viewport"?content="width=device-width,?initial-scale=1"/>
robots(定义搜索引擎爬虫的索引方式)
robots 用来告诉爬虫哪些页面需要索引，哪些页面不需要索引
<meta?name="robots"?content="none"/>
content 具体参数如下：
-
none: 搜索引擎将忽略此网页，等价于 noindex，nofollow。
-
noindex: 搜索引擎不索引此网页。
-
nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
-
all: 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于 index，follow。
-
index: 搜索引擎索引此网页。
-
follow: 搜索引擎继续通过此网页的链接索引搜索其它的网页。
author(作者)
用于标注网页作者
<meta?name="author"?content="前端开发爱好者.xy"/>
generator(网页制作软件)
用于标明网页是什么软件做的
<meta?name="generator"?content="Vscode"/>
copyright(版权)
用于标注版权信息
//?表示是?xy?个人版权
<meta?name="copyright"?content="xy"/>
revisit-after(搜索引擎爬虫重访时间)
如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。如果重访时间过短，爬虫将按它们定义的默认时间来访问
<meta?name="revisit-after"?content="30?days"?/>
meta?中的?http-equiv?属性
http-equiv?顾名思义，相当于?http?的文件头作用。
它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为?content，content?中的内容其实就是各个参数的变量值。
meta?标签的?http-equiv?属性语法格式是：
<meta?http-equiv="参数"?content="参数变量值"/>
其中?http-equiv?属性主要有以下几种参数：
content-Type（显示字符集的设定）
用于设定网页字符集，便于浏览器解析与渲染页面
//旧的HTML，不推荐
<meta?http-equiv="content-Type"?content="text/html;charset=utf-8"/>
//HTML5设定网页字符集的方式，推荐使用UTF-8
<meta?charset="utf-8"/>
Expires（期限）
用于设定网页的到期时间，过期后网页必须到服务器上重新传输。必须使用 GMT 的时间格式。
<meta?http-equiv="expires"?content="Sunday?26?October?2016?01:00?GMT"?/>
Pragma(cache 模式）
禁止浏览器从本地计算机的缓存中访问页面内容,这样设定，访问者将无法脱机浏览。
<meta?http-equiv="Pragma"?content="no-cache"/>
Refresh（刷新）
网页将在设定的时间内，自动刷新并调向设定的网址
//?2s?刷新跳转到百度
<meta?http-equiv="refresh"?content="2；URL=https://www.baidu.com/"/>
Set-Cookie(cookie 设定）
如果网页过期，那么这个网页存在本地的 cookies 也会被自动删除
<meta?http-equiv="Set-Cookie"?content="cookievalue=xxx;?expires=Friday,12-Jan-2001?18:18:18?GMT;?path=/"/>
Window-target（显示窗口的设定）
强制页面在当前窗口以独立页面显示
<meta?http-equiv="Window-target"?content="_top"/>
content-Language（显示语言的设定）
<meta?http-equiv="Content-Language"?content="zh-cn"?/>
imagetoolbar(图片工具栏)
指定是否显示图片工具栏，当为 false 代表不显示，当为 true 代表显示。
<meta?http-equiv="imagetoolbar"?content="false"?/>
meta 动画效果
说到动画，大多数人肯定会想到?css3?动画以及使用?js，canvas?等实现动画，如果我告诉你，meta?也可以实现动画效果，你信吗 ？？？
使用meta标签，我们还可以在进入网页或者离开网页的一刹那实现动画效果，我们只要在页面的 html 代码中的<head></head>；标签之间添加如下代码就可以了：
<meta?http-equiv="Page-Enter"?content="revealTrans(duration=5.0,transition=20)"/>
一旦上述代码被加到一个网页中后，我们再进出页面时就会看到一些特殊效果，但我们要注意的是所加网页不能是一个Frame页
网页特效的http-equiv属性值，分别有Page-Enter、Page-Exit、Site-Enter、Site-Exit四大类型，如以下代码所示：
<meta?http-equiv="Page-Enter"?content="进入时的过渡效果"?/>
<meta?http-equiv="Page-Exit"??content="退出时的过渡效果"?/>
<meta?http-equiv="Site-Enter"?content="进入时的过渡效果"?/>
<meta?http-equiv="Site-Exit"??content="退出时的过渡效果"?/>
content属性值:
24种过度效果：
用法举例：
<meta?http-equiv="Page-Enter"?content="blendTrans(Duration=1.0)"?/>
以上设置的是网页进入(Page-Enter)时的过渡效果，所以，就是淡入过渡效果进入网页。
<meta?http-equiv="Page-Enter"?content="revealtrans(duration=2，transition=0"/>
这段代码中transition=0，表示以矩形收缩的过渡效果进入网页，duration=2，则表示过渡持续时间为 2 秒钟；
再比如，如果使用矩形扩张过渡效果，则只需要设置transition=1即可，因为数字 1 表示的就是矩形扩张过渡效果，代码如下:
<meta?http-equiv="Page-Enter"?content="revealtrans(duration=2，transition=1"/>
还可以使用圆形收缩过渡效果，对应的数字是 2，代码如下：
<meta?http-equiv="Page-Enter"?content="revealtrans(duration=2，transition=2"/>
以此类推，想要设置什么过渡效果就设置相对应的数值即可。
?
|