深入理解css系列:meta标签

时间:2022-09-06 14:48:01

  积累太少,时间管理技巧欠缺,所以导致了博客更新的速度迟缓。学习中成长,成长中学习。加油吧!最近在做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来定义文档的字符编码,更加直接。

深入理解css系列:meta标签
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:声明添加到主屏幕时隐藏地址栏和状态栏(即全屏)

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

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

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

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

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

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

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

  开启电话识别

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

<a href="tel:123456">123456</a>

<a href="sms:123456">123456</a>

  开启邮箱电话识别

<meta name="format-detection" content="email=yes" />

<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 "> 这样设定,访问者将无法脱机浏览。

  <meta http-equiv="cache-control" 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:

<meta http-equiv="x-ua-compatible" content="IE=7" />

<meta http-equiv="x-ua-compatible" content="IE=4" />

<meta http-equiv="x-ua-compatible" content="IE=xx" />

<meta http-equiv="x-ua-compatible" content="IE=50" />

当直接指定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:

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" />

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

case3:

<meta http-equiv="x-ua-compatible" content="IE=Edge" />

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

case4:

<meta http-equiv="x-ua-compatible" content="IE=7, 10, 11" />

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

case5:

<meta http-equiv="x-ua-compatible" content="IE=Edge, chrome=1" />

当指定的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″/>

深入理解css系列:meta标签的更多相关文章

  1. HTML&amp&semi;CSS基础-meta标签

    HTML&CSS基础-meta标签 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.常见字符集 1>ASCII 我们知道计算机是由外国人发明的,他们当时也没有考虑到 ...

  2. 深入理解CSS系列(一):理解CSS的盒子模型

    接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...

  3. 深入理解css系列:清除浮动

    如果出现div嵌套,内层元素浮动,而外层包裹的父元素div未设置高度的时候,那么会出现外层不能被撑开的情况. HTML标签代码: <div class="wrap"> ...

  4. 深入理解css系列:css定位

    一.概述 1.默认文档流定位方式 (1).HTML默认文档以流模式定位,即内容元素按照先后顺序依次上下定位: (2).HTML标签元素总体分为块状元素.内联元素.内联块状元素,可通过该标签对应的DOM ...

  5. 深入理解CSS系列(二):为什么height&colon;100&percnt;不生效?

    对于height属性,如果父元素height为auto,只要子元素在文档流中(即position不等于fixed或者absolute),其百分比值完全就被忽略了.这是什么意思呢?首先来看个例子,比如, ...

  6. meta标签viewport的深入理解(转)

    移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...

  7. Asp&period;net 后台添加CSS、JS、Meta标签

    Asp.net 后台添加CSS.JS.Meta标签的写法,我这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.UI.Htm ...

  8. 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法

    × 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...

  9. meta标签的理解

    一直习惯的使用meta标签,还真么认真理解过,至少英文意思都还没弄明白... 下面是摘自网络的解释: 互动百科: 元素可提供相关页面的元信息(meta-information),比如针对搜索引擎和更新 ...

随机推荐

  1. &lbrack;Linux&rsqb;在linux中,常常用到ctrl和其他按键组合,常用的有哪些及意义呢

    在linux中,常常用到ctrl和其他按键组合,常用的有哪些及意义呢? Ctrl+c 结束正在运行的程序 Ctrl+d 结束输入或退出shell Ctrl+s 暂停屏幕输出[锁住终端] Ctrl+q ...

  2. C&num;的变迁史 - C&num; 2&period;0篇

    在此重申一下,本文仅代表个人观点,如有不妥之处,还请自己辨别. 第一代的值类型装箱与拆箱的效率极其低下,特别是在集合中的表现,所以第二代C#重点解决了装箱的问题,加入了泛型.1. 泛型 - 珍惜生命, ...

  3. 获得select下拉框的值

    html -------------------------------------------------------------------------------------- <sele ...

  4. Android权限安全&lpar;12&rpar;apk安装在sd卡上时&comma;如何保证数据安全

    apk安装在sd卡上时,如果把sd卡拿下安在另一个手机B上,那么apk的数据就可以被B里的恶意应用访问了. 下面是android解决这个问题的方案: 绑定设备 1,绑定perDevice使得应用以及应 ...

  5. javaScript获取指定的cookie值

    1.获取cookie的函数 function getCookie(cookieName) { var strCookie = document.cookie; var arrCookie = strC ...

  6. JMeter简单的性能测试实例

    JMeter基础之——一个简单的性能测试 我们了解了jmeter的一此主要元件,那么这些元件如何使用到性能测试中呢.这一节创建一个简单的测试计划来使用这些元件.该计划对应的测试需求. 1)测试目标网站 ...

  7. 学习CSS记录:CSS文件引入到HTML中

    1.直接写在标签元素中,通常称为行间样式.(优先级较高,有悖于结构与表现的分离,建议不使用) 例:<body style="background:red;"></ ...

  8. Be the Winner

    Be the Winner Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...

  9. H5单张、多张图片上传

    前言 今天我们聊一聊图片上传,单张Or多张 ,如今,各大图片上传插件数不胜数,例如:Jquery的 verupload.js,jQuery File Upload.Uploadify.jQuery.f ...

  10. JDK源码中使用的设计模式

    结构型模式: 适配器模式: 用来把一个接口转化成另一个接口. java.util.Arrays#asList() javax.swing.JTable(TableModel) java.io.Inpu ...