HTML Meta标签详解-优快云博客

本文链接：https://blog.youkuaiyun.com/TNANDXYF/article/details/113107203

html中meta标签

html中meta标签
练习
- 在Begin - End区域内补充代码
- 参考答案

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区域内补充代码

具体要求：

在之间添加网页标题的设置，标题文字为“设置元信息”；
在之间为浏览器提供10秒后跳转至百度首页https://www.baidu.com/的元信息；
在之间为浏览器设置页面失效期，失效时间是2021年12月31日8点整；
在之间为搜索引擎设置网页关键词，关键词分别为“前端”、“元信息”、“网页跳转”、“失效期”、“搜索关键词”。

<!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>