虽然之前我有整理过一次meta 标签，但是心中对于meta 标签还是一知半解，所以再次对meta 标签进行整理，并对上一次的文章进行修改。而这次整理主要是参考MDN 文档和Lxxyx 对于meta 标签的总结进行的。
概述
- HTML
<meta>标签是用于表示元数据信息，它不会显示在用户所看到的页面上，这些信息被用于机器解析，这些机器可以是服务器、搜索引擎、网络爬虫等。 -
<meta>标签是一个空元素，不需要闭合标签。 -
<meta>标签在<head>标签中一般处于顶部位置。
属性
-
全局属性
所有的全局属性对
<meta>标签适用，只是全局属性name在<meta>标签中具有特殊的语义，这个后面会提到。 -
charset 属性
这个属性用于声明当前文档所使用的字符编码，一般写在
<head>标签里面的第一行，属性值推荐设置为UTF-8。注意：如果页面没有定义字符编码，某些交叉脚本技术会伤害到浏览网页的用户，比如UTF-7 fallback cross-scripting technique ，所以推荐使用这个属性定义文档的字符编码。
<head> <meta charset="utf-8"> <title>html</title> </head> -
content 属性
这个属性是与
http-equiv或者name共同使用的，用于定义http-equiv或name相关属性值的内容。 -
http-equiv 属性
个人理解，该属性的属性值相当于HTTP 消息头中的name-value 键值对中的name，而content 相当于name-value 键值对中的value，用于修改某些HTTP header 中的数据。该属性的全称为"http-equivalent"。
-
语法格式：
<meta http-equiv="属性值" content="http-equiv属性值的内容"> -
content-security-policy
它允许网页作者定义当前页的内容策略 内容策略主要指定允许的服务器源和脚本端点,这有助于防止跨站点脚本攻击。
<meta http-equiv="content-security-policy" content="default-src https:"> -
content-type
该属性用于定义该文档的 MIME type 。因为这是一个HTML 标签，所以许多HTTP
content-type的值写在这里是无效的。而有效的语法是一个字符串"text/html然后再跟一个;charset=IANAcharset"。如下面的例子：<meta http-equiv="content-type" content="text/html;charset=utf-8">但是这个属性将要被废弃，用
<meta charset="utf-8">代替它。 -
refresh
-
定义多少秒后刷新页面，
<meta http-equiv="refresh" content="5"> <!-- 5秒后刷新页面 --> -
定义多少秒后调转到另外一个页面
<meta http-equiv="refresh" content="3;url=https://baidu.com"> <!-- 3秒后跳转到百度页面，这个功能可以用于用户登录界面跳转 -->
-
-
X-UA-Compatible
用于告知浏览器以何种版本来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 指定IE和Chrome使用最新版本渲染当前页面 --> -
expires
该属性用于设置页面的到期时间，过期后网页必须到服务器上重新传输。
<meta http-equiv="expires" content="Wed Jun 21 2017 15:23:50 GMT+0800" -
set-cookie
用于设置网页的cookie。想了解更多请点击这里
<meta http-equiv="set-cookie" content="Michael=more%20than; expires=Wed, 21-Jun-2017 15:26:30 GMT; domain=.example.com; path=/; secure;httponly;"> <!-- 1. Michael 是某一cookie 名，是必需的，如果没有cookie 值那么后面也是需要加等号和分号 2. more%20than 是cookie 值，是可选的，其中%20 是空格的转义格式。 3. expires 是到期时间，是可选的，格式："expires=Wdy, DD-Mon-YYYY HH:MM:SS GMT;" 4. domain 是可选的，用于设置能够读取这个cookie 的域名，至少要求有两个句点，比如.example.com 5. path 是可选的，用于设置读取这个cookie 的url path，如果设置了path，那么该路径以及该路径下的 所有文件和目录都可以读取这个cookie。 6. secure; 用于加密链接。 7. httponly; 表示cookie 仅在http 连接是被读取和传输，而非javascript。 -->注意：这个属性将被废弃，HTTP header set-cookie 代替
-
-
name 属性
该属性用于定义文档级别元数据的名称，比如网页的作者、网页的描述、关键字等。如果同一个
<meta>标签中已经设置了 itemprop、http-equiv 或者 charset 其中一个属性，那么就不能再设置name 属性。-
语法格式
<meta name="属性值" content="name的属性值的具体内容"> -
application-name
用于定义运行在该网页上的应用名称
-
author
用于定义该文档的作者
-
description
用于描述该网站简短而有精确的摘要
<meta name="description" content="这是一篇介绍HTML meta 标签的文章，文章分为概述和属性。"> -
keywords
和该网站高度相关的关键字
-
generator
可以是某软件的名称，该软件之前用于生成该网页
-
referrer
document.referrer是用于获取前一个网页的URL 地址，那么如果从这个页面跳转到下一个页面，这个页面meta 标签中referrer 的值，会影响到下一个页面获取得到前一个页面URL 的地址。
<meta name="referrer" content="no-referrer"> <!-- no-referrer: 下一个页面获取得到的 referrer 为空字符`` origin: referrer 为文档源地址 no-referrer-when-downgrade: 当(https→https)时发送源地址，当(https→http)发送空字符串 origin-when-crossorigin：当下一个页面是同源网址，那么它的 referrer 就是网址地址 （但是会删去参数，比如锚点和查询字符串）； 如果下一个网址是不同源的，那么它的 获取得到前一个网页的 URL 为文档源地址。 unsafe-URL: 下一个页面获取的referrer 是full URL --> -
creator
用于定义这个文档的创造者，可以是组织或者机构。如果多于一个，那么就要使用多个meta 标签
-
robots
用于定义爬虫以怎样的方式检索本页面，用逗号分隔属性值
<meta name="robots" content="index,nofollow"> <!-- index: 默认值，让搜索引擎检索到本页面 nodindex： 不让搜索引擎检索到本页面 follow： 默认值，让搜索引擎可以检索本页面上链接 nofollow： 不让搜索引擎检索本页面上链接的页面 none： 相当于 noindex,nofollow all: 相当于 index,follow --> -
viewport
这个相当常用，用于响应式页面和移动端页面设计。
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,width=device-width,maxmum-scale=1.0,minmum-scale=1.0"> <!-- width: 如果是数值，那么视口的宽度等于单位像素乘以数值；如果是`device-width`，那么视口的宽度适应设备屏幕的宽度。 initial-scale：0.0 ~ 10.0，是设备的宽度和视口的大小的比例 maxmum-scale: 0.0 ~ 10.0, 定义网页放大的最大比例，要大于或等于 minmum-scale minmum-scale: 0.0 ~ 10.0, 用于定义网页缩小的级别，要小于或等于 maxmum-scale user-scalable: yes or no， 用于定义用户是否能够放大或缩小页面 -->
-
总结
在HTML 中我们首先可以用meta 标签用于定义网页的字符编码，然后可以用http-equiv 属性设置HTTP Header 中的一些数据，还可以用name 属性设置搜索引擎检索结果显示的内容以及检索行为。meta 标签能够实现的功能还是挺多的，当然这也导致了知识点比较杂，要一下子记住这么多的点也比较难，所以写这篇博客就是让自己对meta 标签的功能有一个初步的印象，不管什么时候忘记了也好查询。
网友评论