<meta>标签是用来描述文档的元数据，所谓的元数据就是描述数据的数据。<meta>就是用来描述html文件的。它被放置在<head></head>之中，<meta>标签不需要设置结束标签，一个尖括号就是一个meta标签的内容。所呈现的数据不会在页面中显示，仅仅只能说明页面的信息，包括关键字、作者、版权等等。它作用于浏览器、搜索引擎以及其他的网络服务。
<meta>标签主要的属性有四种，分别是name、http-equiv、content和charset。
一、 name
name属性用来定义元数据的名称，与content属性包含的值相关联，主要用于描述网页，以便于搜索引擎的查找。
1、 keywords：设置页面关键字，以便于搜索引擎查找和分类，可以提高被搜索的几率。如有多个关键字，之间用逗号隔开。（很多搜索引擎在检索时会限制数量，所以不宜过多。）
例如：
<meta name="keywords" content="HTML,前端开发,网站开发,网页设计">
2、description：设置页面的描述，便于浏览器查找，和keywords类似，内容应该简短和精确。一些浏览器将其用作书签页面的默认描述。如：Firefox和Opera。
例如：
<meta name="description" content="本网站详情讲解前端开发技术知识，包括：HTML、CSS以及JavaScript。">
3、 author：设置作者信息。
例如：
<meta name="author" content="张三">
4、 build：设定建立网站的日期。
例如：
<meta name="build" content="2020.11.19">
5、copyright：设定网页的版权信息。
例如：
<meta name="copyright" content="网页版权信息">
6、 reply-to：设定联系人邮箱。
例如：
<meta name="reply-to" content="邮箱地址">
7、 generator：设置编辑工具。
例如：
<meta name="generator" content="WebStorm2020.1.1">
8、robots：限制搜索引擎对页面的搜索方式。
all—允许机器人索引当前网页及其链接的网页
none—阻止机器人索引当前网页及其链接的网页 index—允许机器人索引当前页面 noindex—阻止机器人索引当前页面
follow—允许机器人跟踪页面上的链接 nofollow—阻止机器人跟踪页面上的链接
例如：
<meta name="robots" content="index">
9、 application：定义正在运行在该网页上的网络应用名称。
10、 viewport：提供有关视口初始大小的提示，仅供移动设备使用。
| 值 | 取值 | 描述 |
|---|---|---|
| width | 一个正整数或者字符串device-width | 以pixels(像素)为单位，定义viewport（视口）的宽度。 |
| height | 一个正整数或者字符串device-height | 以pixels(像素)为单位，定义viewport（视口）的高度。 |
| initial-scale | 一个0.0到10.0之间的正数 | 定义设备宽度与视口大小之间的缩放比率。 |
| maximum-scale | 一个0.0到10.0之间的正数 | 定义缩放的最大值 。 |
| minimum-scale | 一个0.0到10.0之间的正数 | 定义缩放的最小值。 |
| user-scalable | 一个布尔值（yes或no） | no为用户不能缩放网页，默认为yes |
例如：
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
二、 http-equiv
指示服务器在发送实际的文档之前先在要传输给浏览器的MIME文档头部包含名称/值对。
1、 content-language：定义页面默认语言。
例如：
<meta http-equiv="content-language" content="zh-cn">
现在都用全局属性lang来代替。
例如：
<html lang="zh-cn">
2、 content-type：定义编码。
例如：
<meta charset="UTF-8">
3、 refresh：设定页面定时跳转。（如果content只包含一个正数，则是重新加载页面的时间间隔）
例如：
<meta http-equiv="refresh" content="3;url=http://www.baidu.com">
4、 expires：设定有效期限。（到期时间必须是GMT时间格式，即星期，日 月 年 时 分 秒，必须使用英文和数字进行设定）
例如：
<meta http-equiv="expires" content="Web,14 september 2020 16:30:00 GMT">
5、 set-cookie：为页面定义cookie，如果网页过期，删除存盘中过期的cookie。（时间使用GMT格式）
例如：
<meta http-equiv="set-cookie" content="Web,14 september 2020 16:30:00 GMT">
6、 windows-target：强制打开新窗口，强制网页在当前中以独立的页面显示，可以防止自己的网页被别人当作一个frame页调用。
例如：
<meta http-equiv="windows-target" content="_top">
7、 content-security-policy：允许页面作者定义当前页的内容策略。内容策略主要指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。
三、 content
http-equiv和name属性相关的元信息。
四、 charset
声明当前文档所使用的字符编码，可以被具有lang属性的元素覆盖。值必须是一个符合由IANA所定义的字符编码首选MIME名称（preferred MIME name）之一。
例如：
<meta charset="UTF-8">
<meta>标签的注意事项：
1、必须位于head元素内。
2、总是以名称/值的形式被成对传递。
3、一个meta标签只有一种用途。
4、head中可以出现多个meta标签。
5、如果设置了name，说明是一个文档页面，适用于整个页面。
6、如果设置了http-equiv，说明是一个pragma指令，通常由Web服务器提供有关如何提供网页的信息。
7、如果设置了charset，说明是字符集声明、编码格式。
8、如果设置了itemprop，说明是用户定义的元数据，对于用户代理是透明的，因为元数据的语义是特定于用户的。
1766
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
