Meta 标签

概览 meta标签一般放在整个html页面的head部分，在MDN中对他这样定义： meta是文档级元数据元素，用来表示那些不能由其它 HTML 元相关元素（<base>、<link>, <script>、<style>或 <title>）之一表示的任何元数据。 是不是感觉看起来很抽象？说白了就是为了传达信息。 先看看meta 元素定义的元数据的类型： 如果设置了 name属性，meta 元素提供的是文档级别的元数据，应用于整个页面。 如果设置了 http-equiv属性，meta 元素则是编译指令，提供的信息与类似命名的 HTTP 头部相同。 如果设置了 charset属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码。 如果设置了 itemprop 属性，meta 元素提供用户定义的元数据。 name属性 name和content一起使用，前者表示要表示的元数据的名称，后者是元数据的值。 author 用来表示网页的作者的名字，例如某个组织或者机构。 <meta name="author" content="aaa@mail.abc.com"> description 是一段简短而精确的、对页面内容的描述。以头条和taobao的description标签为例： keywords 与页面内容相关的关键词，使用逗号分隔。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。 还是以头条和taobao为例 viewpoint 为 viewport（视口）的初始大小提供指示。目前仅用于移动设备。 可能你也发现了，我们在vscode中自动生成html的代码片段时，会自动生成： <meta name="viewport" content="width=device-width, initial-scale=1.0"> width用来设置 viewport 的宽度为设备宽度; initial-scale为设备宽度与 viewport 大小之间的缩放比例。 robots 表示爬虫对此页面的处理行为，或者说，应当遵守的规则，是用来做搜索引擎抓取的。 它的content可以为： all:搜索引擎将索引此网页，并继续通过此网页的链接索引文件将被检索 none:搜索引擎讲忽略此网页 index:搜索引擎索引此网页 follow:搜索引擎继续通过此网页的链接索引搜索其它的网页 renderer 用来指定双核浏览器的渲染方式，比如360浏览器，我们可以通过这个设置来指定360浏览器的渲染方式 <meta name="renderer" content="webkit"> //默认webkit内核 <meta name="renderer" content="ie-comp"> //默认IE兼容模式 <meta name="renderer" content="ie-stand"> //默认IE标准模式 http-equiv http-equiv也是和content一起使用，前者表示要表示的元数据的名称，后者是元数据的值。 http-equiv 所有允许的值都是特定 HTTP 头部的名称， ...