1、charset
此属性声明网页的字符编码方式。
<meta charset="UTF-8">
常用字符集:
UTF-8:包含全世界所有国家需要用的字符,推荐使用。
GB2312:国家标准码,简体中文,6763个汉字。
BIG5:繁体中文,港澳台使用。
GBK:国标扩展,支撑繁体中文,包括全部中文字符。
2、content
包含http-equiv 或name 属性的值,具体取决于所使用的值。
多个属性的设置一定要用逗号+空格来隔开,如果不规范将不会起作用。
<meta http-equiv="参数" content="参数变量值">
或
<meta name="参数" content="参数变量值">
3、http-equiv常用参数
枚举属性定义了能改变服务器和用户引擎行为的编译,这个编译值使用content 来定义。
- X-UA-Compatible:定义了浏览器的渲染方式,concent可为IE=Edge。
参考百度网页使用<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
定义浏览器渲染方式。
content 的值"IE=edge,chrome=1" 详解,这样写可以达到的效果是如果安装了GCF,则使用GCF来渲染页面,如果没有安装GCF,则使用最高版本的IE内核进行渲染。
[GCF]:Google Chrome Frame,谷歌内嵌浏览器框架。 - x-dns-prefetch-control :告知浏览器, 当前页面要做DNS预解析,协同link指明哪些链接需要DNS预解析,值为on/off。此属性可以提升页面载入速度优化前端性能,但也会造成查询DNS次数非常多。
其他:dns-prefetch、prerender、prefetch的理解<!-- 开启DNS预获取 --> <meta http-equiv="x-dns-prefetch-control" content="on"> <!-- 设置DNS预获取的域名 --> <link rel="dns-prefetch" href="https://www.baidu.com" />
- Cache-control:指定请求和响应遵循的缓存机制。
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
- no-cache, no-store, must-revalidate:关闭缓存,打开新窗口访问时都会重新访问服务器。
: no-cache,响应不会被缓存,而是实时向服务器端请求资源,访问此页面不会在Internet临时文件夹留下页面备份。
: no-store,在任何条件下,响应都不会被缓存,并且不会被写入到客户端的磁盘里。
: must-revalidate,响应在特定条件下会被重用,以满足接下来的请求,但是它必须到服务器端去验证它是不是仍然是最新的。按后退按扭 不会重新访问。 - public, max-age=31536000: 缓存静态资源。
: public,响应会被缓存,并且在多用户间共享。
: max-age=[单位:秒 seconds] , 设置缓存最大的有效时间,在此值内的时间里就不会重新访问服务器。 类似于 Expires, 但是这个参数定义的是时间大小(比如:60)而不是确定的时间点。 - no-transform:禁止百度转码,类似于no-siteapp。当用户进入时,会直接跳转至原网页。参考禁止百度快照缓存,与no-siteapp 和 no-transform的通俗例子
- no-cache, no-store, must-revalidate:关闭缓存,打开新窗口访问时都会重新访问服务器。
4、name常用参数
定义文档级元数据的名称,与content 属性包含的值相关联。
-
description:其中包含页面内容的简短和精确的描述,可能会体现在搜索引擎结果页面,搜索引擎优化需要特别重视的一个页面元素。
-
keywords:包含与逗号分隔的页面内容相关的单词,通知搜索引擎这个网页包含的信息是关于什么的,但目前大多数SE现在不考虑它。
-
viewport:提供有关视口初始大小的提示,仅供移动设备使用。
// 禁止移动端缩放 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
- width:正整数或device-width,定义viewport(视口)的宽度。
- height:正整数或device-height,定义viewport(视口)的高度。
- initial-scale:[0.0 , 10.0],定义设备宽度(纵向模式下的设备宽度或横向模式下的设备高度)与视口大小之间的缩放比率。
- maximum-scale:[0.0 , 10.0],定义缩放的最大值。
- minimum-scale:[0.0 , 10.0],定义缩放的最小值。
- user-scalable:yes /no,如果设置为 no,用户能否放大或缩小网页。
5、常见设置
-
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
强制让文档的宽度与设备的宽度保持1:1。
文档初始化缩放比例是1:1。
不允许用户点击屏幕放大浏览。
允许用户缩放到的最大比例。 -
<meta name="apple-mobile-web-app-capable" content="yes" />
iPhone私有标签,它表示:允许全屏模式浏览 -
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
iPhone私有标签,它指定的iPhone中safari顶端的状态条的样式 -
<meta name="format-detection" content="telephone=no; email=no" />
不识别邮件和不把数字识别为电话号码