meta元素提供的信息是用户不可见的,只有程序员是可以见得到,它不显示在页面中,一般用来定义页面信息的名称、关键字、作者、日期、缓存等等。
在html中,元信息标记meta不需要设置结束标记,它是单个标记。
在html的开头中,可以有多个元信息标记,不像title。
meta元素的属性有两种,分别是name和http-equiv,其中name属性主要用于描述网页,以便搜索引擎查找和分类。
1.设置页面关键字
设置页面关键字是为了向搜索引擎说明网页得关键词,通常可设置很多个关键词,关键词与关键词之前逗号隔开。
语法:
<meta name=”keyname” content=”关键词1,关键词2...”> name为属性名称,这里是keyname content定义具体的关键字得内容 |
实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="Keywords" content="html,元信息,关键字">
<title>设置页面的关键字</title>
</head>
<p>关键字 keywords</p>
<body>
</body>
</html>
2.设置页面描述
它也是为了便于搜索引擎得查找,它用来描述网页得主题,就和关键字一样,设置的内容是不会再网页中显示出来的
语法:
<meta name=”descrption” content=”描述语句”> name为属性名称,这里是descrption content定义具体的描述语句,比如关于某某某音乐网站、什么什么美食之类的 |
实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="关于html网页的做法">
<title>设置页面的描述</title>
</head>
<p>页面描述 description</p>
<body>
</body>
</html>
3.设置编辑工具
目前我们已知的编辑工具有文本编辑器(txt)、Adobe Dreamweaver(DW)、WebStorm等等,在源代码得头页面中可以设置网页编辑工具得名称。
语法:
<meta name=”generator” content=”编辑软件名称”> name为属性名称,这里是generator content定义具体的编辑软件名称 |
实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="Adobe Dreamweaver CS3.5">
<title>设置页面编辑工具</title>
</head>
<p>编辑工具 generator</p>
<body>
</body>
</html>
4.设定作者信息
在页面的源代码中,可以显示页面制作者的姓名及个人信息。
语法:
<meta name=”author” content=”作者的姓名”> name为属性名称,这里是author content定义具体的作者的姓名 |
实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="岑小涛">
<title>设置页面的编辑作者</title>
</head>
<p>编辑作者 author</p>
<body>
</body>
</html>
5.限制搜索方式
语法:
<meta name=”robots” content=”搜索方式”> name为属性名称,这里是robots content定义具体的搜索方式 |
搜索方式:
content的值 | 含义 |
All | 表示能搜索当前网页和链接的网页 |
Index | 表示只能搜索当前的网页 |
Nofollow | 不能搜索与当前网页连链接的网页 |
Noindex | 不能搜索当前的网页 |
None | 啥都不能搜索当前网页和链接网页 |
实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="ALL">
<title>限制搜索方式</title>
</head>
<p>限制搜索方式 robots</p>
<body>
</body>
</html>
6.设置页面定时跳转
当我们看到一些欢迎的网页,在经过一段时间后,会自动跳转,这就是网页的定时跳转。
语法:
<meta http-equiv="refresh" content="时间;url=跳转的网页"> http-equiv为属性名称,这里是refresh content定义经过多长时间,跳转到网页 |
实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="3;url=https://www.baidu.com/">
<title>设置页面定时跳转</title>
</head>
<p>设置页面定时跳转 refresh</p>
<body>
</body>
</html>
7.设定有效期
某些网页一到期,必须到服务器上重新调用。
语法:
<meta http-equiv="refresh" content="到期的时间"> http-equiv为属性名称,这里是refresh content定义具体的到期时间 |
日期格式:
星期,日 月 年 时 分 秒,这些时间都能使用英文和数字进行设定。
实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Expires" content="Wed,14 september 2002 15:20:00 GMT">
<title>设定有效期</title>
</head>
<p>设定有效期 Expires</p>
<body>
</body>
</html>
8.禁止从缓存中调用
使用网页缓存可以加快浏览器网页的速度,但是如果网页的内容经常频繁的更新,缓存反而是一种累赘,所以我们得要关闭缓存
语法:
<meta http-equiv="pragma" content="no-charset"> <meta http-equiv="cache-control" content="no-charset"> |
实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="pragma" content="no-charset">
<meta http-equiv="cache-control" content="no-charset">
<title>禁止从缓存中调用</title>
</head>
<p>禁止从缓存中调用 cache-control pragma </p>
<body>
</body>
</html>
9.设定建立网站的日期
通过设置可以设定网站建立的日期。
语法:
<meta http-equiv="build" content="建立的时间"> http-equiv为属性名称,这里是build content定义具体的到期时间 |
实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="build" content="2021.6.12">
<title>设定建立网站的日期</title>
</head>
<p>设定建立网站的日期 build</p>
<body>
</body>
</html>
10.设定网页的版权信息
通过设置可以说明网页的版权信息
语法:
<meta http-equiv="copyright" content="网页版权信息"> http-equiv为属性名称,这里是copyright content定义具体的版权信息 |
实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="copyright" content="岑小涛工作室">
<title>设定网页的版权信息</title>
</head>
<p>设定网页的版权信息copyright</p>
<body>
</body>
</html>
11.设定联系人邮件
通过设置可以设定联系人邮箱
语法:
<meta http-equiv="Reply-to" content="471334214@qq.com"> http-equiv为属性名称,这里是Reply-to content定义具体的邮箱信息 |
实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Reply-to" content="471334214@qq.com">
<title>设定联系人邮件</title>
</head>
<p>设定联系人邮件Reply-to</p>
<body>
</body>
</html>