深入理解css系列：meta标签

2023-08-13 15:29:46

　　积累太少，时间管理技巧欠缺，所以导致了博客更新的速度迟缓。学习中成长，成长中学习。加油吧！最近在做h5的项目，对于meta标签层出不穷的各式属性值有点头晕，所以查资料整理了下。

关键字：meta name http-equiv content

一.概念
1.解释
　　<meta> 标签提供关于 HTML 文档的元数据，位于head之中。
2.作用
　　meta定义的元数据不会显示在页面上，但是对于机器（这里指浏览器或者搜索引擎等）是可读的。大多数情况下，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
　　元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
二.属性

　　主要属性有name和http-equiv，这两个属性的值定义value即属性的名字，同时以content指定该value对应的内容key。

　　http-equiv中可定义页面字符集，同时HTML5中定义一个新属性charset来定义文档的字符编码，更加直接。

1.name属性
　　name属性是描述网页的，对应于content，以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。
　　name 属性提供了名称/值对中的名称。

　　HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下，您可以*使用对自己和源文档的读者来说富有意义的名称。
(1).keywords:用来告诉搜索引擎你网页的关键字是什么。多关键字之间以半角逗号分隔。
eg:<meta name="keywords" content="杜瑶, Joy Du, 飘零雾雨, @doyoe, 前端">
(2).description:用来告诉搜索引擎你的网站主要内容。文档描述内容最好是完整的一句话，以不超过50个字符为宜
eg:<meta name="description" content="杜瑶-著名前端开发工程师">
(3).robots:用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
content的参数有all,none,index,noindex,follow,nofollow。默认是all。

通知搜索引擎文档是否需要被索引。可选值有：

all（默认值，索引当前页并跟踪链接，相当于：index, follow）
none（忽略当前页，相当于：noindex, nofollow）
index（索引当前页）
noindex（不索引当前页）
follow（跟踪当前页链接，不论当前页是否被索引）
nofollow（不跟踪当前页链接，不论当前页是否被索引）

(4).author:标注网页的作者
eg:<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com">
(5).generator:用以说明生成工具

可废弃

(6).revisit-after:声明搜索引擎抓取间隔

eg:<meta name="revisit-after" content="10 days" />

有时候你可能并不希望站点一直被搜索引擎抓取，而是每间隔一段时间才来访问一次，这时，可以声明revisit-after meta。

(7)viewport:声明viewport视口

eg:<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
该声明用于指定在移动设备上页面的布局视口如何设置。对于viewport meta的详细设置，请参考：针对移动设备布局视口viewport的详细讲解。

(8).apple-mobile-web-app-title:声明添加到主屏幕的Web App标题

eg：<meta name="apple-mobile-web-app-title" content="Web App名称" />

iOS Safari允许用户将一个网页添加到主屏幕然后像App一样来操作它。我们知道每个App下方都会有一个名字，iOS Safari提供了一个私有的meta来定义这个名字。Android Chrome31.0，Android Browser5.0也开始支持添加到主屏幕了，但并没有提供相应的定义标题的方式，所以如果你想统一iOS和Android平台定义Web app名称的方式，可以使用title标签来定义，代码如下： 1 <title>Web App名称</title> 但如果你想要网页标题和App名字不一样的话，那就只有iOS才行。

(9).apple-mobile-web-app-capable:声明添加到主屏幕时隐藏地址栏和状态栏（即全屏）

当我们将一个网页添加到主屏幕时，会更希望它能有像App一样的表现，没有地址栏和状态栏全屏显示.该方案在 iOS 和 Android5.0+ 上都通用。

(10).apple-mobile-web-app-status-bar-style:声明添加到主屏幕时设置系统顶栏颜色

当我们将一个网页添加到主屏幕时，还可以对系统显示手机信号、时间、电池的顶部状态栏颜色进行设置，前提是开启了： 1 <meta name="apple-mobile-web-app-capable" content="yes" />。

content只有3个固定值可选：default | black | black-translucent 如果设置为 default，状态栏将为正常的，即白色，网页从状态栏以下开始显示；如果设置为 black，状态栏将为黑色，网页从状态栏以下开始显示；如果设置为 black-translucent，状态栏将为灰色半透明，网页将充满整个屏幕，状态栏会盖在网页之上；该设置只在 iOS 上有效。

(11).format-detection:号码识别

　　开启电话识别

　　开启邮箱电话识别

<a href="mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

如果想同时关闭电话和邮箱识别，可以把它们写到一条 meta 内，代码如下：<meta name="format-detection" content="telephone=no,email=no" />

2.http-equiv属性

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

(1).expires:用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。时间必须为GMT格式
eg:＜meta http-equiv= "expires " content= "Fri, 12 Jan 2001 18:18:18 GMT "＞
(2).pragma(cache模式) :禁止浏览器从本地计算机的缓存中访问页面内容。
eg:＜meta http-equiv= "pragma " content= "no-cache "＞这样设定，访问者将无法脱机浏览。

上述语句都可以用来指定文档不被缓存。一些仍然在使用HTTP/1.0的可以使用第1条，第2条由HTTP/1.1提供，常用值还有：public, no-cache, no-store等
(3).refresh:自动刷新并指向新页面。
eg:＜meta http-equiv= refresh " content= "2；URL=http://www.webjx.com "＞
(4).set-Cookie(cookie设定) :如果网页过期，那么存盘的cookie将被删除。
eg:＜meta http-equiv= "set-Cookie " content= "cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT； path=/ "＞
(5).window-target:强制页面在当前窗口以独立页面显示, 用来防止别人在框架里调用自己的页面。
eg:＜meta http-equiv= "window-target " content= "_top "＞
(6).content-type(显示字符集的设定) ：设定页面使用的字符集。
eg:＜meta http-equiv= "content-type " content= "text/html; charset=gb2312 "＞
当你浏览一些国外的站点时，IE浏览器会提示你要正确显示该页面需要下载xx语支持。这个功能就是通过读取HTML页面META标签的Content-Type属性而得知需要使用哪种字符集显示该页面的。如果系统里没有装相应的字符集，则IE就提示下载。

相对于这种方式，更推荐你使用charset，言外之意，就是推荐使用HTML5。
(7).content-language:制作网站语言的设定
eg:<meta http-equiv="content-language" content="zh-cn">
(8).Pics-label:网页等级评定，在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站

(9).Content-Script-Type:指明页面中脚本的类型。
eg：<Meta http-equiv="Content-Script-Type" Content="text/javascript">

(10).x-ua-compatible:声明使用的浏览器及版本

x-ua-compatible设置是从IE8开始增加的（很明显，只适用于IE），对于过往的版本无法识别。开发者可以通过设置x-ua-compatible来指定渲染引擎的类型和版本，并且因为需求不同可以有多种不同的设置：

case1:

当直接指定content为IE的某个具体版本，如上述代码第1条，客户端的IE将会使用IE7.0标准模式对页面进行渲染，并忽略Doctype定义。当指定的IE版本在客户端IE中不存在时，IE将会尝试将该值转换为最为接近的版本。例如指定一个错误的或者低于5.0的IE版本，如上述代码第2，3条，客户端的IE将会使用IE5.0对页面进行渲染，由于IE5.0并没有标准模式，所以将会直接使用quirks mode来渲染；如果指定一个大于客户端IE的版本，如上述代码第4条，假定客户端IE的最高版本为9.0，那么IE会将该值转换为IE=9，即使用IE9.0标准模式对页面进行渲染。

case2:

当指定的content值加了Emulate前缀时，如上述代码，客户端IE将会根据Doctype定义来决定如何来对页面进行渲染。假设页面使用了标准的Doctype，那么此定义效果等同Case1；假设页面并没有使用标准的Doctype，那么将使用quirks mode来渲染。

case3:

当指定的content值为IE=Edge时，如上述代码，客户端的IE将会使用最高的标准模式对页面进行渲染。

case4:

当指定的content值有多个版本时，如上述代码，假定客户端IE版本为8.0或者9.0，则使用IE7.0标准模式对页面进行渲染；假定客户端IE版本为10.0或者11.0，则直接使用对应版本的标准模式对页面进行渲染。

case5:

当指定的content值为IE=Edge, chrome=1时，如上述代码，假定客户端安装了Google Chrome Frame，则在IE中使用chrome的渲染引擎来渲染页面，否则，将会使用客户端IE最高的标准模式对页面进行渲染。

3.scheme属性
　　scheme设置或返回用于解释 content 属性的值的格式。HTML5中已不支持。

4.charset属性

　　charset定义字符集，HTML5中新增，也可以在http-equiv中设定。

5.content属性

　　content以key/value中value的角色与其他属性配对使用，可以设置属性的具体内容。

6.property属性
　　og是一种新的HTTP头部标记，即Open Graph Protocol：
The Open Graph Protocol enables any web page to become a rich object in a social graph.+ n3
即这种协议可以让网页成为一个“富媒体对象”。
用了Meta Property=og标签，就是你同意了网页内容可以被其他社会化网站引用等，目前这种协议被SNS网站如Fackbook、renren采用。
　　SNS已经成为网络上的一大热门应用，优质的内容通过分享在好友间迅速传播。为了提高站外内容的传播效率，2010年F8会议上Facebook公布了一套开放内容协议(Open Graph Protocol)，任何网页只要遵守该协议，SNS就能从页面上提取最有效的信息并呈现给用户。

eg:
<meta property=”og:type” content=”video”/>
<meta property=”og:title” content=”五月天_突然好想你MV现场版”/>
<meta property=”og:url” content=”http://v.youku.com/v_show/id_XMTIyMTY5NzMy.html”/>
<meta property=”og:width” content=”600″ />
<meta property=”og:height” content=”716″/>

码农公寓

相关文章