html中meta标签

01/28 10:46
阅读数 36

html中meta标签

meta标签的作用

meta标签用于定义页面的元信息,可重复出现再头部标签中。它是单标签,通过“名称/值”的形式成对使用其属性。
meta标签主要分为两大类,一类对页面进行设置,另一类对搜索引擎进行设置。

  • 对页面进行设置的格式:<meta http-equiv="名称" content="值"/>
  • 对搜索引擎进行设置的格式:<meta name="名称" content="值"/>

http-equiv/content

http-equiv/content属性对用于设置刷新、失效期、 cookie等页面信息。

名称 描述
Refresh 时间值;url地址 用于设置页面刷新时间和跳转地址,时间单位是秒,两个值之间用分号“;”分隔
Expires 到期时间 用于设置网页的失效期,这个时间必须为GMT时间,即按照“星期 日 月 年 时间 GMT”的格式
Set - Cookie Cookie值;失效期;路径 用于设置cookie并进行页面缓存,这里失效期仍然为GMT格式,三个参数值之间用分号“;”分隔

用法示例:

  • 页面停留20秒后跳转到www.baidu.com
    <meta http-equiv="Refresh" content="20;Url=www.baidu.com"/>

  • 网页于2021年7月26号8点过期
    <meta http-equiv ="Expires" content="Thur,26 Jul 2021 08:00:00 GMT"/>

  • 设置cookie并进行页面缓存

<meta http-equiv ="Set-Cookie" content="cookievalue = xxx; expires= Thur,26 Jul 2021 08:00:00 GMT; path=/">

name/content

http-equiv/content属性对用于设置关键字、简介、作者、机器人向导、 版权、编辑器等。

名称 描述
Author 作者信息 用于设置作者姓名或相关信息,多个值之间用逗号“,”分隔。
Description 描述文字 用于设置网页的描述,搜索引擎会把这个描述文字显示在搜索结果中。
keywords 关键字 用于设置关键字,多个关键字之间用逗号“;”分隔。
generator 编辑器类型 用于说明网页是什么编辑器生成的。
revised 修改信息 用于说明网页最后修改的人和时间等,多个之间用逗号“,”分隔。

用法示例:

  • 用于标注网页的作者和Email
    <meta name = "Author" Content = "刘明,12345678@qq.com" />

  • 为搜索引擎提供网站简介
    <meta name ="Description" Content ="网站简介"/>

  • 为搜索引擎提供关键字
    <meta name="keywords" content="漫步时尚广场,时尚,购物,影视,餐饮"/>

  • 为搜索引擎提供编辑器类型
    <meta name="generator" content="Dreamweaver CC2020"/>

  • 为搜索引擎提供提供最新版本信息
    <meta name="revised" content="David,2021/1/25"/>

charset

charset是HTML5新增的字符编码属性。属性取值必须是标准字符集的名称,常用的字符编码如下:

  • ISO-8859-1:国际标准化组织针对不同的字母表/语言定义的标准字符集( 拉丁字母表的字符编码),是浏览器默认的字符集

  • utf-8:Unicode 联盟开发的标准,utf-8 是网页和电子邮件的首选编码。

  • gb2312:信息交换用汉字编码字符集,中国国家标准总局1980年发布。适用于汉字处理、汉字通信等系统之间的信息交换。
    用法示例:

  • 设置utf-8字符编码标准
    <meta charset=utf-8/>

练习

在Begin - End区域内补充代码

具体要求:

  1. 在之间添加网页标题的设置,标题文字为“设置元信息”;
  2. 在之间为浏览器提供10秒后跳转至百度首页https://www.baidu.com/的元信息;
  3. 在之间为浏览器设置页面失效期,失效时间是2021年12月31日8点整;
  4. 在之间为搜索引擎设置网页关键词,关键词分别为“前端”、“元信息”、“网页跳转”、“失效期”、“搜索关键词”。
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <!-- ********* Begin ********* -->




  <!-- ********* End ********* -->
 </head>
 <body>
  <h1 align="center">元信息的设置</h1>  
 </body> 
</html>

参考答案

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <!-- ********* Begin ********* -->
<title>设置元信息</title>
	 <meta http-equiv="Refresh" content="10;Url=https://www.baidu.com/"/>
     <meta http-equiv="Expires" content="Fri,31 Dec 2021 08:00:00 GMT"/>
	 <meta name="keywords" content="前端,元信息,网页跳转,失效期,搜索关键词"/>
  <!-- ********* End ********* -->
 </head>
 <body>
  <h1 align="center">元信息的设置</h1>  
 </body> 
</html>
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部