meta标签是HTML网页源代码中的一个重要的html标签。META便签用来描述一个HTML网页文档的属性,例如作者、日期和时间、关键词、页面刷新。除此之外,meta标签用于搜索引擎优化。它位于HTML文档中head元素内,虽然它提供的信息用户不可见,但它却是文档最基本的元信息。
meta标签中的属性介绍
-
必选属性:content属性。该属性是为了定义与http-equiv或者name属性相关的元信息,其中的内容是为了便于搜索机器人查找信息和分类使用的。
-
可选属性:
name属性。该属性主要用于描述网页。name属性的值可以有:author、description、keywords、generator、viewport等等http-equiv属性。该属性相当于http的头文件作用,可以向浏览器返回一些有用的信息,以帮助正确和精确的显示内容。http-equiv属性的值可以有content-type、expires、refresh等等。
name属性
-
keywords(关键字:告诉浏览器你的网页的关键字是什么)
-
description(描述:告诉浏览器你的网页的主要内容是什么)
设置这两个值可以帮助你的主页被各大搜索引擎登陆,提高网站的访问量。搜索引擎会首先排除机器人自动检索页面中的keywords和description,并将其加入自己的数据库,然后根据关键词的密度将网站排序
使用方法如下<meta name="keywords" content="111,网页223,3333"> <meta name="description" content="HTML123313121231">
注意:keywords的content内容要限制在36个字。
description的content内容要限制在76个字。
name一定要和content属性配合使用。
-
robot(机器人向导:用于告诉机器人哪些页面需要索引,哪些页面不需要)
该属性的值有all、none、index、noindex、follow和nofollow。默认为all。
设定为all:文件将被检索,且页面上的链接可以被查询;
设定为none:文件将不被检索,且页面上的链接不可以被查询;
设定为index:文件将被检索;
设定为follow:页面上的链接可以被查询;
设定为noindex:文件将不被检索,但页面上的链接可以被查询;
设定为nofollow:文件将不被检索,页面上的链接可以被查询。
-
Author (作者)
说明:标注网页的作者或制作组
用法:<Meta name="Author" Content="zzzhhhyyy">
注意:Content可以是:你或你的制作组的名字,或Email -
Copyright (版权)
说明:标注版权
用法:<Meta name="Copyright" Content="本页版权归....所有">
-
Generator (编辑器)
说明:编辑器的说明
用法:<Meta name="Generator" Content="PCDATA|FrontPage|">
注意:Content=“你所用编辑器” -
revisit-after (搜索引擎爬虫重访时间)
说明:如果页面不是经常更新,为了减轻搜索引擎爬虫对服务器带来的压力,可以设置一个爬虫的重访时间。如果重访时间过短,爬虫将按它们定义的默认时间来访问。
用法:<META name="revisit-after" Content="7 days" >
-
renderer(双核浏览器渲染方式)
说明:renderer是为双核浏览器准备的,用于指定双核浏览器默认以何种方式渲染页面。
用法:
<meta name="renderer" content="webkit">//默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式
下面为专门为移动端使用的属性
-
viewport(移动端的窗口)
使用该meta标签时,在content中写属性,用逗号隔开
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
其中属性介绍: width 设置layout viewport 的宽度,为一个正整数,使用字符串”device-width”表示设备宽度initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置layout viewport 的高度,这个属性对我们并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为”no”或”yes”, no 代表不允许,yes代表允许
target-densitydpi 值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、
device-dpi 这几个字符串中的一个最后一个属性为安卓特有,并且安卓已经决定要废弃target-densitydpi 这个属性了,所以这个属性我们要避免进行使用 。
-
format-detection
我们可以通过这个属性禁止自动识别电话和邮箱。举例如下:
<meta name="format-detection" content="telephone=no,email=no"/>
这样,是设备浏览网页时对数字不启用电话功能(注意不同设备的解释可能不同),忽略将页面中的数字识别为电话号码。对邮箱同样如此。
-
apple-mobile-web-app-capable(网站开启对web app程序的支持)
<meta name="app-mobile-web-app-capable" content="yes"/>
说明:
1.网站开启对web app的支持2.该meta可以看出内容为”苹果设备web应用程序xx“,就是说该meta是专门定义web应用的。
-
.apple-mobile-web-app-status-bar-style(改变顶部状态条的颜色)
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
说明:
1.在web app应用下状态条的颜色为黑色;2.默认值为default(白色),可以定义为black(黑色)和black-translucent(灰色半透明);
http-equiv属性
-
content-type(文档内容类型:用于设定文档的类型和字符集)
这是meta便签中最为常见的一中设置,在制作网页时,我们在纯HTML代码可看到它是定义你的网页的语言,当浏览器访问到你的网页时,浏览器便会根据此来识别并进行相应的设定,否则,浏览器就会使用默认的设定方法。
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> //HTML5设定网页字符集的方式,推荐使用UTF-8
-
expires(期限:可以用于设定网页的到期期限)
一旦网页过期,那么就必须在服务器上重新刷新而不能通过缓存获取网页。值得注意的是:其中设置的时间必须是GMT格式。或直接设为0(数字表示多少时间后过期)
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
如果你在浏览器中设置浏览器网页先从本地缓存中的页面获取,那么当浏览时,就会只从本地缓存获取,直到meta中设置的时间到期,浏览器才会获取新页面。
-
pragma(cashe模式:即是否从缓存中访问网页内容)
<meta http-equiv="pragma" content="no-cache">
这行代码表示不从缓存获取页面,于是访问者将无法脱机工作。
-
refresh(刷新:等待一定时间自动刷新或跳转到其他url)
<meta http-equiv="refresh" content="1; url=https://www.baidu.com"/>
-
X-UA-Compatible(浏览器采取何种版本渲染当前页面)
说明:用于告知浏览器以何种版本来渲染页面。(一般都设置为最新模式,在各大框架中这个设置也很常见。)<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面
-
cache-control(指定请求和响应遵循的缓存机制)
用法1. 说明:指导浏览器如何缓存某个响应以及缓存多长时间。<meta http-equiv="cache-control" content="no-cache">
共有以下几种用法:
no-cache:
先发送请求,与服务器确认该资源是否被更改,如果未被更改,则使用缓存。
no-store:
不允许缓存,每次都要去服务器上,下载完整的响应。(安全措施)
public :
缓存所有响应,但并非必须。因为max-age也可以做到相同效果
private :
只为单个用户缓存,因此不允许任何中继进行缓存。
maxage :
表示当前请求开始,该响应在多久内能被缓存和重用,而不去服务器重新请求。例如:max-age=60表示响应可以再缓存和重用 60 秒。用法2.(禁止百度自动转码)
说明:用于禁止当前页面在移动端浏览时,被百度自动转码。虽然百度的本意是好的,但是转码效果很多时候却不尽人意。所以可以在head中加入例子中的那句话,就可以避免百度自动转码了。
举例:<meta http-equiv="Cache-Control" content="no-siteapp" />
-
Set-Cookie(cookie设定) 说明:如果网页过期。那么这个网页存在本地的cookies也会被自动删除。
<meta http-equiv="Set-Cookie" content="name, date"> //格式 <meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Wednesday,21-Oct-98 16:14:21 GMT; path=/">
-
Window-target(显示窗口的设定) 说明:强制页面在当前窗口以独立页面显示。 用法:
<meta http-equiv="Window-target" content="_top">
注意:用来防止别人在框架里调用自己的页面。Content选项:_blank、_top、_self、_parent
-
Pics-label(网页等级评定) 用法:
<meta http-equiv="Pics-label" contect="">
Contect=“(PICS1.1′http://www.rsac.org/ratingsv01.html’ I gen comment ‘RSACi North America Sever’ by ‘inet@microsoft.com’ for
‘http://www.microsoft.com’ on ‘1997.06.30T14:21-0500′ r(n0 s0 v0
l0))">
说明:在IE的internet选项中有一项内容设置,可以防止浏览一些受限制的网站,而网站的限制级别就是通过meta属性来设置的。不要将级别设置的太高。RSAC的评估系统提供了一种用来评价Web站点内容的标准。
用户可以设置Microsoft Internet Explorer(IE3.0以上)来排除包含有色情和暴力内容的站点。
上面这个例子中的HTML取自Microsoft的主页。代码中的(n 0 s 0 v 0 l 0)表示该站点不包含不健康内容。
级别的评定是由RSAC,即美国娱乐委员会的评级机构评定的,如果你想进一步了解RSAC评估系统的等级内容,或者你需要评价自己的网站,可以访问RSAC的站点:http://www.rsac.org/。 -
Content-Script-Type (脚本相关)
说明:这是近来W3C的规范,指明页面中脚本的类型。
用法:
<meta http-equiv="Content-Script-Type" Content="text/javascript" />
-
Page_Enter、Page_Exit 设定进入页面时的特殊效果
<meta http-equiv="Page-Enter" contect="revealTrans(duration=1.0,transtion= 12)">
设定离开页面时的特殊效果
<meta http-equiv="Page-Exit" contect="revealTrans(duration=1.0,transtion= 12)">
Duration的值为网页动态过渡的时间,单位为秒。
Transition是过渡方式,它的值为0到23,分别对应24种过渡方式。如下表: 0 盒状收缩 1 盒状放射 2 圆形收缩 3 圆形放射 4 由下往上 5 由上往下 6 从左至右 7 从右至左 8 垂直百叶窗 9 水平百叶窗 10 水平格状百叶窗 11垂直格状百叶窗 12 随意溶解 13从左右两端向中间展开 14从中间向左右两端展开 15从上下两端向中间展开 16从中间向上下两端展开 17 从右上角向左下角展开 18 从右下角向左上角展开 19 从左上角向右下角展开 20 从左下角向右上角展开 21 水平线状展开 22 垂直线状展开 23 随机产生一种过渡方式