HTML中的<meta/>标签还能这么玩???【居然能搞动画】

简介: HTML中的<meta/>标签还能这么玩???【居然能搞动画】

前言

对于一名前端工程师来说,meta标签是再熟悉不过了。初学前端时,写的最多的就是下面的这句了👨🏻‍💻:

<meta charset="UTF-8" />

但是大多数前端ermeta的认识基本上就止步于此了,不要小看它,小标签却能实现大功能。这篇文章就来带着大家一起重新认识下常常被我们忽略的 meta 标签吧💪

什么是 meta

  • metahtml 语言 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属性主要用于描述网页,与之对应的属性值为contentcontent中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

meta 标签的 name 属性 语法格式 :

<meta name="参数" content="具体的参数值"/>

其中 name 属性主要有以下几种参数:

keywords(关键词)

keywords 用来告诉搜索引擎你网页的关键字是什么。

<meta name ="keywords" content="公众号,前端开发爱好者,前端技术分享,视频教程资源,前端学习"/>

description(网站内容的描述)

description 用来告诉搜索引擎你的网站主要内容

<meta name="description" content="前端开发爱好者是一个分享前端技术资源的公众号"/>

viewport(移动端的窗口)

大多数前端工程师都会称之为视口,这个属性常用于设计移动端网页,可以让开发者来控制网页的大小缩放

  • meta viewport 的 6 个属性:
  • width :设置 viewport 的宽度,默认视口宽度
  • height:设置 viewport 的高度
  • initial-scale:设置页面的初始缩放值
  • minimum-scale:允许用户的最小缩放值
  • maximum-scale:允许用户的最大缩放值
  • user-scalable:是否允许用户进行缩放,值为"no""yes", no 代表不允许,yes 代表允许
<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 的文件头作用。

它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为 contentcontent 中的内容其实就是各个参数的变量值。

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-EnterPage-ExitSite-EnterSite-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属性值:

  • blendTrans(Duration=秒数):如果用在进入页面时是淡入过渡效果;如果用在退出页面时是淡出过渡效果,但只能设置过渡持续时间,单位是秒
  • revealtrans(duration=过渡持续时间的秒数,transition=过渡效果的类型):duration:设置过渡持续时间(以秒为单位),transition 设置使用哪一类型的过渡效果,它有 24 种类型的过渡效果。

24种过度效果:

  • transition 的取值是 0—23,数字从 0 开始到 23 结束,一种是 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"/>

以此类推,想要设置什么过渡效果就设置相对应的数值即可。

相关文章
|
1月前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
54 5
|
14天前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
18天前
|
前端开发 JavaScript
Canvas三维变化背景动画HTML源码
Canvas三维变化背景动画HTML源码
22 5
|
14天前
|
存储 移动开发 前端开发
|
1月前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
40 2
|
1月前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
33 1
|
2月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
111 1
|
2月前
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
230 1
|
2月前
|
存储 JavaScript Java
使用NekoHTML解析HTML并提取META标签内容
关于NekoHTML的代码样例,这里提供一个简单的示例,用于展示如何使用NekoHTML来解析HTML文档并提取其中的信息。请注意,由于NekoHTML的具体实现和API可能会随着版本更新而有所变化,以下代码仅供参考。 ### 示例:使用NekoHTML解析HTML并提取META标签内容 ```java import org.cyberneko.html.parsers.DOMParser; import org.w3c.dom.Document; import org.w3c.dom.Element; import org.w3c.dom.NodeList; import org.xml
|
1月前
|
Web App开发 数据采集 移动开发
HTML5新增的属性和标签
HTML5新增的属性和标签
109 0