常用“meta”标签总结

一.
来来来,先说meta标签是个啥,

1
2
The <meta> tag provides metadata about the HTML document.
Metadata will not be displayed on the page, but will be machine parsable.

上面这句话的意思是:meta标签就是关于html文档的一个元数据,不会在页面显示却能被计算机识别。
那么有啥用呢?

1
2
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

这里翻译过来的意思就是,meta标签常用于指定页面描述,关键字,文档作者和其他元数据。这些元数据会给浏览器(如何显示内容和加载页面),
搜索引擎(关键字)和其他web提供服务。
二.常用meta标签
1.

1
<meta charset="utf-8">

声明文档所用字符编码。

2.

1
<meta name="参数" content="具体的描述">

name 这个属性在 w3cshool 中有说明是一个可选属性,是把 content 属性关联到一个名称。它的值在后面会列出一些常用的。
content 属性提供名称/值对中的值。该值可以是任何有效的字符串。content 属性始终要与 name 属性或是 http-equiv 属性一起使用。

(1).

1
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

width // viewport 的宽度 (范围从200 到10,000,默认为980 像素)
height // viewport 的高度 (范围从223 到10,000)
initial-scale // 初始的缩放比例 (范围从>0 到10)
minimum-scale // 允许用户缩放到的最小比例
maximum-scale // 允许用户缩放到的最大比例
user-scalable // 用户是否可以手动缩 (no,yes)
device-width // 设备宽度
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 目标屏幕像素密度
这个是手持设备必用的meta标签了。
(2).

1
<meta content="telephone=no" name="format-detection" />

是否将网页内容中的手机号码显示为拨号的超链接,iPhone上默认为yes;
同理的还有,设置为“no”就是告诉设备不识别邮箱,默认情况下为“yes”;

,设置为“no”就是告诉设备点击地址禁止跳转至地图,默认情况下为“yes”;

(3).
IOS设备对meta定义的私有属性

1
<meta name="apple-mobile-web-app-capable" content="yes" />

是否启动webapp功能,会删除默认的苹果工具栏和菜单栏。

1
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

当启动webapp功能时,显示手机信号、时间、电池的顶部导航栏的颜色。
默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。

(4).

1
<meta name="keywords" content="博客,前端,meta">

当搜索引擎遇到这些关键字时,会用这些关键字对文档进行分类。简单的说就是告诉搜索引擎你网页的关键字。
这里注意一下,Google在09年就表示忽略keywords [https://www.mattcutts.com/blog/keywords-meta-tag-in-web-search/]

(5).

1
<meta name="description" content="有关前端的知识">

这是告诉搜索引擎你网站的主要内容。

(6).

1
<meta name="author" content="https://yhzy888.github.io/">

标识创作者。
(7).

1
<meta name="generator" content="sublime text2">

标识网页制作的编辑软件
(8).

1
<meta name="revised" content="yy,2017/9/21">

定义页面最新修订的版本
(9).

1
<meta name="revisit-after" content="7 days" >

设置爬虫重访时间。注意如果爬虫重访时间过短,那么爬虫将会以他们定义的默认时间来访问。这个默认时间具体值,我查资料是说20s到3或4分钟不等。
这里的默认时间到底是多少,表示不确定,有知道的可以留言告诉我一下@_@。
(10).

1
<meta name="robots" content="all">

定义搜索引擎爬虫(机器人)的索引方式。就是告诉爬虫哪些需要索引哪些不需要。
content 的值默认是 all 。所以如果你要设置 all/index/follow 的值,就不要写这段代码了,没有意义,只会增加网页的大小。
[http://blog.seo-tw.org/2010/10/seo-meta.html]
content:
all : 搜索引擎将索引此网页和通过此网页的链接继续索引其他的网页。等价于 index , follow.
index : 搜索引擎索引此网页。
follow : 搜索引擎通过此网页的链接继续索引其他的网页。
none : 搜索引擎忽略此网页。等价于 noindex 和 nofollow.
noindex : 搜索引擎不索引此网页。
nofollow : 搜索引擎不继续通过此网页的链接索引其他的网页。
(11).
meta 标签 name 为 renderer 时,指定双核浏览器以何种方式渲染页面。

1
2
3
<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式

(12).

1
<meta name="copyright" content="yy">

用于标注版权信息

3.
http-equiv : 把 content 属性关联到 http 头部。
下面借用 w3cSchool 中的一段话说明一下:
使用带有 http-equiv 属性的 标签时,服务器将把名称/值对添加到发送给浏览器的内容头部。
当服务器向浏览器发送文档时,所有服务器都至少要发送一个:content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
例如:

1
2
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">

这样发送到浏览器的头部就应该包含:

1
2
3
content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008

插播常见文件类型:
text/plain //文本文件
text/html //html文件
application/binary //二进制文件
application/postscripts //PostScript(PS)是主要用于电子产业和桌面出版领域的一种页面描述语言和编程语言。
image/gif //gif图片
image/xbm //xbm图片
image/jpeg //jpeg图片
audio/basic //basic格式视频文件
video/mpeg //mpeg格式视频文件
video/QuickTime //QuickTime格式视频文件

以下,对常用的 http-equiv 的属性值做下介绍。
(1).

1
2
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<meta http-equiv="content-language" content="zh-CN">

用以说明网页制作使用的文字语言,浏览器会根据此来调用相应的字符集显示网页内容。
目前第一种写法都用 ,这是 html5 设定网页字符集的方式,常用 utf-8。
(2).

1
<meta http-equiv="expires" content="Thursday 21 September 2017 10:00 GMT" />

指定网页过期时间,过期后网页必须到服务器上重新传输。注意时间格式必须是 GMT.
(3).

1
2
<meta http-equiv="refresh" content="30"> //指定网页在 30s 后刷新。
<meta http-equiv="refresh" content="10; Url=http://www.baidu.com"> //指定网页在 10s 后,重定向到百度的网页

(4).

1
2
<meta http-equiv="Set-Cookie" content="name, date"> //格式
<meta http-equiv="Set-Cookie" content="user=yy; password=123456; expires=Thursday 21 September 2017 10:00 GMT"> //具体范例

缓存cookie,时间格式必须使用GMT。注意:如果网页过期。那么这个网页存在本地的cookies也会被自动删除。
(5).

1
2
<meta http-equiv="pragma" content="no-cache"> //定义页面不缓存页面。
<meta http-equiv="cache-control" content="no-cache"> //不缓存页面。

no-cache: 先发送请求,与服务器确认该资源是否被更改,如果未被更改,则使用缓存。
no-store: 不允许缓存,不让浏览器缓存副本,每次都要去服务器上,下载完整的响应。(安全措施)
public : 共有缓存,可被缓存代理服务器缓存,比如CDN
private : 私有缓存,因此不允许任何中继进行缓存。(比如说CDN就不允许缓存private的响应)
maxage [秒] : 表示当前请求开始,该响应在多久内能被缓存和重用,而不去服务器重新请求。例如:max-age=60表示响应可以再缓存和重用 60 秒。

(HTTP规定,如果出现max-age和expires,则max-age默认覆盖掉expires)
当expires为负数表示no-cache,正数或零表示max-age=time。
如果你不想缓存,可以直接设置:
expires -1; //永远过期,Cache-Control: no-cache

到这里的时候,不知道你是不是跟我有一样的疑问: http-equiv=”pragma” 和 http-equiv=”cache-control”都是起到不缓存页面的作用,那么他们的区别在哪呢。
经过我查资料得出的结论:
Pragma是HTTP /1.0实现,cache-control是同样概念的HTTP /1.1实现。它们都是为了防止客户端缓存响应。较旧的客户端可能不支持HTTP /1.1,这就是为什么Pragma仍在使用中。
(6).
meta标签的最后一碗鸡汤 —— X-UA-Compatible。
X-UA-Compatible是针对IE8新加的一个设置,对于IE8之外的浏览器是不识别的。 为了避免制作出的页面在IE8下面出现错误,建议直接将IE8使用IE7进行渲染。

是什么意思呢?
是强制浏览器按照特定的版本标准进行渲染。但不支持IE7及以下版本。如果用分号(;)分隔,对于不同的浏览器版本就有不同的兼容性。
例:

1
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=9" /> //表示将IE8和IE7按照IE7标准渲染,但是IE9还是按照IE9的标准渲染。

上面那句话也就是向后兼容,如果只考虑 IE8 以下的,那么就可以这样写:

1
<meta http-equiv="X-UA-Compatible" content="IE=8" />

还有一种方式是进行仿真模拟,代码如下:

1
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

下面这个是强制浏览器按照最新的标准去渲染,缺点是有可能你的布局因为没有固定版本而被破坏。

1
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

接着这句话添加”chrome=1“将允许站点在使用了谷歌浏览器内嵌框架(Chrome Frame)的客户端渲染,对于没有使用的,则没有任何影响。

1
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />

推荐写法:

1
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

到这里关于 meta 标签的总结告一段落。用了我5,6个小时。总结下来,自己对一些常用的有了更深的理解。其实成文后的内容要比我计划的要多写了很多,边查资料边写,
也让自己有了更多的了解。如发现有问题的地方,还望帮忙指正!