文章目录
你都知道什么meta标签?
用处是什么?
尽可能多的说出来
meta 文档级元数据元素 ,用来表示那些不能由其它 HTML 元相关元素(、,
可以理解为就是为了传达信息
meta 元素定义的元数据的类型包括以下几种:
- 如果设置了 name 属性,meta 元素提供的是文档级别(document-level)的元数据,应用于整个页面。
- 如果设置了 http-equiv 属性,meta 元素则是编译指令,提供的信息与类似命名的 HTTP 头部相同。
- 如果设置了 charset 属性,meta 元素是一个字符集声明,告诉文档使用哪种字符编码。
- 如果设置了 itemprop 属性,meta 元素提供用户定义的元数据。
name属性
name和content一起使用,前者表示要表示的元数据的名称,后者是元数据的值。
author
用来表示网页的作者的名字,例如某个组织或者机构。
<meta name="author" content="aaa@mail.abc.com">
description
是一段简短而精确的、对页面内容的描述。以头条和taobao的description标签为例:
<meta name="description" content="syvia 是一个前端程序猿">
keywords
与页面内容相关的关键词,使用逗号分隔。某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类。还是以头条和taobao为例
<meta name="keywords" content="微博,新闻,动态">
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内核
http-equiv
http-equiv也是和content一起使用,前者表示要表示的元数据的名称,后者是元数据的值。
http-equiv 所有允许的值都是特定 HTTP 头部的名称,
X-UA-Compatible
我们最常见的http-equiv值可能就是X-UA-Compatible了,
![image.png](https://img-blog.csdnimg.cn/img_convert/e49bbd67ec5470b1154ef7487c311b8e.png#clientId=u7dc4cd11-c6d5-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=36&id=u32f3445c&margin=[object Object]&name=image.png&originHeight=45&originWidth=708&originalType=binary&ratio=1&rotation=0&showTitle=false&size=34042&status=done&style=none&taskId=u4e330664-b955-4701-8bea-f2e6b2062ce&title=&width=566.4)
IE=edge告诉浏览器,以当前浏览器支持的最新版本来渲染,IE9就以IE9版本来渲染。
chrome=1告诉浏览器,如果当前IE浏览器安装了Google Chrome Frame插件,就以chrome内核来渲染页面。
像上图这种两者都存在的情况:如果有chrome插件,就以chrome内核渲染,如果没有,就以当前浏览器支持的最高版本渲染。
content-type
用来声明文档类型和字符集
![image.png](https://img-blog.csdnimg.cn/img_convert/a4f555f9b836a90b9b27a95613645e39.png#clientId=u7dc4cd11-c6d5-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=43&id=u395f6fc0&margin=[object Object]&name=image.png&originHeight=54&originWidth=697&originalType=binary&ratio=1&rotation=0&showTitle=false&size=34611&status=done&style=none&taskId=uccef742d-3934-404a-b2c2-229ff2b21c2&title=&width=557.6)
x-dns-prefetch-control
一般来说,HTML页面中的a标签会自动启用DNS提前解析来提升网站性能,但是在使用https协议的网站中失效了,我们可以设置:
![image.png](https://img-blog.csdnimg.cn/img_convert/ecf27ac38676481a31493f9b4060d0d3.png#clientId=u7dc4cd11-c6d5-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=53&id=u19695e08&margin=[object Object]&name=image.png&originHeight=66&originWidth=670&originalType=binary&ratio=1&rotation=0&showTitle=false&size=40416&status=done&style=none&taskId=ued806a73-f0f5-4e26-96d9-8db76876d44&title=&width=536)
来打开dns对a标签的提前解析
cache-control、Pragma、Expires
和缓存相关的设置,但是遗憾的是这些往往不生效,我们一般都通过http headers来设置缓存策略