从零开始的异世界之HTML5-day04

        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>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值