关于html头部meta的设置详解

meta的设置详解

meta作用：

定义页面的说明，关键字，最后修改日期，和其他元数据，这些数据将服务于浏览器，告诉浏览器如何布局和重载页面，搜索引擎和其他网络服务。

charset属性想必大家都知道，设置网页的编码格式：<meta charset="UTF-8">

content属性是所设置 http-equiv或者name之后，根据两者有什么属性来设置内容，相当于http-qouiv和name的子属性。

http-equiv属性：

<meta http-equiv="Pragma"  content="no-cache"> //禁止浏览器从本地计算机的缓存中访问页面内容。

<meta http-equiv="refresh" content="2";url="网址"> //表示当前的页面在2秒后跳转到设置的网址url。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面

name属性：

application-name//定义在网页中运行的应用程序的名称。

author//用于标注网页作者。

description//包括一个关于页面内容的缩略而精准的描述。一些浏览器，如Firefox和Opera，会使用这个当做网页书签的默认描述。
generator//用于标明网页是什么软件做的。
keywords//用于告诉搜索引擎，你网页的关键字
revisit-after//如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。如果重访时间过短，爬虫将按它们定义的默认时间来访问。举例：<meta name="revisit-after" content="7 days" >
renderer//renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。

比如360浏览器：
<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式

常用的属性举例：
<meta name=”viewport” content=”initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”/>// 禁止缩放
<meta http-equiv=”refresh” content=”5″ />//设置一段时间后对页面进行刷新操作。
<meta http-equiv=”refresh” content=”5;url="网址" />//自动重定向

<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">//禁止浏览器缓存当我们在本地测试网页的时候，没有及时更新新内容，可能就是有浏览器缓存。这个时候，我们只要通过使用Meta标签禁用浏览器缓存，可以解决。

<meta http-equiv="Cache-Control" content="no-siteapp"/>//禁止百度转码
<meta content=”telephone=no” name=”format-detection” /> //在移动开发当中，屏蔽数字当作电话号码的代码

移动端：

viewport解释：浏览器显示页面内容的屏幕区域。

其属性如下表：