如何理解meta标签

Posted 2020-07-08

　　相信大家对meta标签都不陌生，但是打开某些网页源代码看到一堆的meta难免一脸蒙逼。废话少说，请大家更随我一起探索meta标签都有哪些属性以及作用。

　　W3C给meta标签的定义是：<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

　　接下来我们来看一下他的几个属性：

　　必须属性：content

　　用来定义与 http-equiv 或 name 属性相关的元信息；

　　可选属性：http-equiv、name、scheme。其中scheme是用来定义翻译属性值的方案。在这里就是翻译content值的方案可以忽略。重点看前两个。

　　*http-equiv：顾名思义，http-equiv 指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。

　　meta标签的http-equiv属性语法格式是：＜meta http-equiv="参数" content="参数变量值"＞ ；

　　其中http-equiv的参数主要由以下几个：

　　A、Expires(期限)
　　说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
　　用法：＜meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT"＞
　　注意：必须使用GMT的时间格式。
　　B、Pragma(cache模式)
　　说明：禁止浏览器从本地计算机的缓存中访问页面内容。
　　用法：＜meta http-equiv="Pragma" content="no-cache"＞
　　注意：这样设定，访问者将无法脱机浏览。
　　C、Refresh(刷新)
　　说明：自动刷新并指向新页面。
　　用法：＜meta http-equiv="Refresh" content="2；URL=http://www.root.net"＞
　　注意：其中的2是指停留2秒钟后自动刷新到URL网址。
　　D、Set-Cookie(cookie设定)
　　说明：如果网页过期，那么存盘的cookie将被删除。
　　用法：＜meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT； path=/"＞
　　注意：必须使用GMT的时间格式。
　　E、Window-target(显示窗口的设定)
　　说明：强制页面在当前窗口以独立页面显示。
　　用法：＜meta http-equiv="Window-target" content="_top"＞
　　注意：用来防止别人在框架里调用自己的页面。
　　F、content-Type(显示字符集的设定)
　　说明：设定页面使用的字符集。
　　用法：＜meta http-equiv="content-Type" content="text/html; charset=gb2312"＞

　　*name：name同样都是定义content中的值对应的变量，name属性主要用于描述网页

　　meta标签的name属性语法格式是：＜meta name="参数" content="具体的参数值"＞ 。
　　其中name属性主要有以下几种参数：
　　A、Keywords(关键字)
　　说明：keywords用来告诉搜索引擎你网页的关键字是什么。
　　举例：＜meta name ="keywords" content="science,education,culture,politics,ecnomics，relationships, entertaiment, human"＞
　　B、description(网站内容描述)
　　说明：description用来告诉搜索引擎你的网站主要内容。
　　举例：＜meta name="description" content="This page is about the meaning of science, education,culture."＞
　　C、robots(机器人向导)
　　说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
　　content的参数有all,none,index,noindex,follow,nofollow。默认是all。
　　举例：＜meta name="robots" content="none"＞
　　D、author(作者)
　　说明：标注网页的作者
　　举例：＜meta name="author" content="root,[email protected]"＞

　　E、viewport(用于移动端开发)

　　说明：设置页面的初始宽度、是否可以放大缩小等等。。

　　举例：<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width" />

　　F、format-detection

　　举例：<meta name="format-detection" content="telephone=yes"/>

　　说明：可将telephone=no，则手机号码不被显示为拨号链接

　　G、apple-mobile-web-app-capable

　　说明：网站开启对web app程序的支持。

　　举例：<meta name="apple-mobile-web-app-capable" content="yes" />

　　H、apple-mobile-web-app-status-bar-style

　　说明：在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。

　　举例：<meta name="apple-mobile-web-app-status-bar-style" content="default" />