<meta> 常用 code

<meta http-equiv="X-UA-Compatible" content="IE=edge">

X-UA-Compatible 是 IE8 的一个专有 属性,它告诉 IE8 采用何种IE版本去渲染网页,在 html 的 标签中使用。在 IE8 刚推出的时候,很多网页由于重构的问题,无法适应较高级的浏览器,所以使用 X-UA-Compatible 标签强制 IE8 采用低版本方式渲染。

IE=edge 告诉 IE 使用最新的引擎渲染网页。

有些因素会自动触发兼容性文档视图,这个时候设置 X-UA-Compatible 就可以防止这个自动触发的行为。

默认行为大致有这些:
存在于注册表中的兼容性视图列表,当 url 匹配时将自动切换到兼容性视图
在注册表中的对应字段指定了使用兼容性视图来显示所有网站
未指定 DOCTYPE,则使用 Quirks 模式

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

chrome=1 则可以激活 Chrome Frame。

<meta name="viewport" content="width=device-width, initial-scale=1">

首先如果不设置 meta viewport 标签,那么移动设备上浏览器默认的宽度值 800px,980px,1024px 等这些,总之是大于屏幕宽度的。这里的宽度所用的单位 px 都是指 css 中的 px,它跟代表实际屏幕物理像素的 px不是一回事。

第二、每个移动设备浏览器中都有一个理想的宽度,这个理想的宽度是指 css 中的宽度,跟设备的物理宽度没有关系,在 css 中,这个宽度就相当于 100% 的所代表的那个宽度。我们可以用 meta 标签把 viewport 的宽度设为那个理想的宽度,如果不知道这个设备的理想宽度是多少,那么用 device-width 这个特殊值就行了,同时 initial-scale=1 也有把 viewport 的宽度设为理想宽度的作用。所以,我们可以使用

<meta name="viewport" content="width=device-width, initial-scale=1">

来得到一个理想的 viewport(也就是前面说的 ideal viewport )。
为什么需要有理想的 viewport 呢?比如一个分辨率为 320x480 的手机理想 viewport 的宽度是 320px,而另一个屏幕尺寸相同但分辨率为640x960 的手机的理想 viewport 宽度也是为 320px,那为什么分辨率大的这个手机的理想宽度要跟分辨率小的那个手机的理想宽度一样呢?这是因为,只有这样才能保证同样的网站在不同分辨率的设备上看起来都是一样或差不多的。实际上,现在市面上虽然有那么多不同种类不同品牌不同分辨率的手机,但它们的理想 viewpor t宽度归纳起来无非也就 320、360、384、400 等几种,都是非常接近的,理想宽度的相近也就意味着我们针对某个设备的理想 viewport 而做出的网站,在其他设备上的表现也不会相差非常多甚至是表现一样的。

在 iphone 和 ipad 上,无论你给 viewport 设的宽的是多少,如果没有指定默认的缩放值,则 iphone 和 ipad 会自动计算这个缩放值,以达到当前页面不会出现横向滚动条(或者说 viewport 的宽度就是屏幕的宽度)的目的。

在苹果的规范中,meta viewport 有6个属性(暂且把 content 中的那些东西称为一个个属性和值),如下:

width 设置 layout viewport 的宽度,为一个正整数,或字符串”width-device”
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置 layout viewport 的高度,这个属性对我们并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为”no”或”yes”, no 代表不允许,yes 代表允许

这些属性可以同时使用,也可以单独使用或混合使用,多个属性同时使用时用逗号隔开就行了。

此外,在安卓中还支持 target-densitydpi 这个私有属性,它表示目标设备的密度等级,作用是决定css中的1px代表多少物理像素

target-densitydpi 值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个

特别说明的是,当 target-densitydpi=device-dpi 时, css 中的 1px 会等于物理像素中的 1px。

因为这个属性只有安卓支持,并且安卓已经决定要废弃target-densitydpi 这个属性了,所以这个属性我们要避免进行使用 。

<meta name="keywords" content="3d, grid, effect, flip, css transform, perspective, web design" />

META 标签是 HTML 语言 HEAD 区的一个辅助性标签,它位于 HTML 文档头部的 标记和 标记之间,它提供用户不可见的信息。meta标签通常用来为搜索引擎 robots 定义页面主题,或者是定义用户浏览器上的 cookie;它可以用于鉴别作者,设定页面格式,标注内容提要和关键字;还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置 RASC 内容等级,等等。

  name 是描述网页的,对应于 Content(网页内容),以便于搜索引擎机器人查找、分类(目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类)。
  name 的 value 值(name=””)指定所提供信息的类型。有些值是已经定义好的。例如 description (说明)、keyword (关键字)、refresh (刷新)等。还可以指定其他任意值,如:creationdate (创建日期) 、document ID (文档编号)和 level (等级)等。
  name 的 content 指定实际内容。如:如果指定 level (等级)为 value (值),则 Content 可能是 beginner (初级)、intermediate (中级)、advanced (高级)。

  1、Keywords (关键字)

   说明:为搜索引擎提供的关键字列表

   用法:<Meta name="Keywords" Content="关键词1,关键词2,关键词3,关键词4,……">

   注意:各关键词间用英文逗号“,”隔开。META 的通常用处是指定搜索引擎用来提高搜索质量的关键词。当数个 META 元素提供文档语言从属信息时,搜索引擎会使用 lang 特性来过滤并通过用户的语言优先参照来显示搜索结果。例如:

      <Meta name="Kyewords" Lang="EN" Content="vacation,greece,sunshine">
      <Meta name="Kyewords" Lang="FR" Content="vacances,grè:ce,soleil">

  2、Description (简介)

   说明:Description 用来告诉搜索引擎你的网站主要内容。

   用法:<Meta name="Description" Content="你网页的简述">    

  3、Robots (机器人向导)

   说明:Robots 用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。Content 的参数有 all、none、index、noindex、follow、nofollow。默认是 all。

   用法:<Meta name="Robots" Content="All|None|Index|Noindex|Follow|Nofollow">

   注意:许多搜索引擎都通过放出 robot/spider 搜索来登录网站,这些 robot/spider 就要用到 meta 元素的一些特性来决定怎样登录。

    all:文件将被检索,且页面上的链接可以被查询;

    none:文件将不被检索,且页面上的链接不可以被查询;(和 “noindex, no follow” 起相同作用)

    index:文件将被检索;(让robot/spider登录)

    follow:页面上的链接可以被查询;

    noindex:文件将不被检索,但页面上的链接可以被查询;(不让robot/spider登录)

   nofollow:文件将不被检索,页面上的链接可以被查询。(不让 robot/spider 顺着此页的连接往下探找)

  4、Author (作者)

   说明:标注网页的作者或制作组

   用法:<Meta name="Author" Content="张三,abc@sina.com">

   注意:Content 可以是:你或你的制作组的名字,或 Email

  5、Copyright (版权)

   说明:标注版权

   用法:<Meta name="Copyright" Content="本页版权归Zerospace所有。All Rights Reserved">
  
  6、Generator (编辑器)

   说明:编辑器的说明

   用法:<Meta name="Generator" Content="PCDATA|FrontPage|">
   注意:Content=”你所用编辑器”

  7、revisit-after (重访)
   
   用法:<META name="revisit-after" CONTENT="7 days" >  

标签头上面显示了一个图标,就是我们常说的 favicon.ico。
下面两行代码就可以告诉浏览器使用 wangyi.ico 作为 index.html 的图标了:

1
2
3
<link rel="icon" href="Images/wangyi.ico" type="image/x-icon" />

<link rel="shortcut icon" href="Images/wangyi.ico" type="image/x-icon" />