html中的meta标签是用来表示网页的元数据的信息的，用来面熟网页问咋还能得属性。meta 标签由 name 和 content 属性定义
按照它的作用我们可以大致分为四类
文档信息相关
<meta name="author" content="作者姓名">
name为author，用来指定网页的作者，特别是在一些学术界的网页上作用更为明显，因为学术论文等文章的知识产权意识比较强
<meta name="description" content="网页内容的简短描述">
name为description，用来表示网页的简短描述，当搜索引擎搜索出来一列信息的时候，那么会展示每个链接的网页的简短描述，以便搜索者判断该网页对他是否有用
SEO优化相关
<meta name="keywords" content="关键词1,关键词2,关键词3">
当我们使用了keywords这个关键字的识货，它就是专门用来给搜索引擎来看的，搜索引擎通过关键词来判断该网页的主题
但实际中，很多为了优化SEO,把这个关键词用烂大了，放了非常多的不相关的关键词，反正多放点也不要钱。
所以目前搜索引擎的策略也是非常的复杂，会综合考虑这些因素
字符编码相关
<meta charset="UTF-8">
当我们使用charset标签的时候，他用于指定网页的编码格式为utf-8,utf-8是一种通用的字符编码，能够表示几乎所有的字符，包括各种语言的文字、符号等。如果网页没有使用正确的编码格式，那么就有可能出现乱码现象。
这个情况尤其在多语言网页上乱码的情况概率更高
视口（viewport）相关（主要用于移动端）
<meta name="viewport" content="width=device-width, initial-scale=1.0">
当我们使用viewport这个属性，他表示定义视口，这个主要用在手机端，比如width=device-width ,也就是视口的宽度与当前设备的宽度一致 initial-scale=1.0缩放比例为1
社交媒体分享相关（基于 Open Graph 协议等）
我们很多时候看到FB里面有人分享网页新闻，它分享数来的标题和介绍，以及右侧的缩略图，到底是如何定义的呢
其实就是meta中定义的
基于 Open Graph 协议，说白了就是一个大家约定俗称的规则而已
<meta property="og:title" content="网页标题">
我们通过 og:title来定义分享时候的标题
<meta property="og:description" content="网页内容简介">
我们通过og:description来定义分享时候的内容简介
<meta property="og:image" content="缩略图的URL">
我们通过og:image来定义分享时候的缩略图
最后
meta的属性值还有很多，并且你也可以自己定义，但是常用的已紧在上面列举出来了
作者：三年三月
链接：https://juejin.cn/post/7432310957795262490
