前端html中head所有有可能遇到的情况知识点讲解

1. 元数据：http://blog.youkuaiyun.com/it_man/article/details/8660536

2. meta http-equiv="Content-Type"什么意思？

回答：

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。

3. HTML<link>标签的rel属性详解

<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>

rel 属性规定当前文档与被链接文档之间的关系。

只有 rel 属性的 "stylesheet" 值得到了所有浏览器的支持。其他值只得到了部分地支持。

属性值

值	描述
alternate	文档的替代版本（比如打印页、翻译或镜像）。
stylesheet	文档的外部样式表。
start	集合中的第一个文档。
next	集合中的下一个文档。
prev	集合中的上一个文档。
contents	文档的目录。
index	文档的索引。
glossary	在文档中使用的词汇的术语表（解释）。
copyright	包含版权信息的文档。
chapter	文档的章。
section	文档的节。
subsection	文档的小节。
appendix	文档的附录。
help	帮助文档。
bookmark	相关文档。

4. http-equiv详细讲解

http-equiv 属性在大多html文档中都会用到，以前只是简单实用，没有系统地进行学习。当了解了该属性之后，发现该属性还有许多实用功能，本文对它们进行总结。

一. 基本概念

http-equiv 属性 -- HTTP协议的响应头报文

◆此属性出现在meta标签中

◆此属性用于代替name，HTTP服务器通过此属性收集HTTP协议的响应头报文

◆此属性的HTTP协议的响应头报文的值应使用content属性描述

提示: 当浏览器等设备接收服务器端传送的文件时，首先会接收文件的相关名称/值对，通常为多个。比如下面的内容：虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

二. 应用实例

1. 页面跳转

<meta http-equiv="refresh" content="10; ,URL=http://vcsos.com">

说明：10秒后，页面刷新，并跳转到http://vcsos.com

2. 缓存控制

<meta http-equiv="Cache-control" content="public">
<meta http-equiv="Cache-control" content="private">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache-control" content="no-store">
<meta http-equiv="pragma" content="no-cache">

说明:

public:可以被缓存在公众共享缓存
     private:只可以被缓存在私人缓存里面
     no-cache:不缓存
     no-store:缓存但不存档

3. 页面编码设定

<meta http-equiv="Content-Type" content="text/html; charset=utf8 ">

说明：这个大家最熟悉了，因为乱码的问题，搞开发的基本上都遇到过

4. cookie设置

<meta http-equiv="Set-Cookie" content="userid=123456; path=/tmp/cookies; expires=Thursday, 20-May-09 00:15:00 GMT">

说明：userid=123456是要存到cookie里的数据，path是存到什么地方，expires是给cookie加上期限

5. content-disposition

<meta name="content-disposition" content="inline; filename=openinexcel.csv">

content参数：

filename 例子："filename" "=" value                              //文件名
     creation-date 例子：":= "creation-date" "=" quoted-date-time     //创建时间
     modification-date 例子：":= "modification-date" "=" quoted-date-time       //修改时间
     read-date 例子：" := "read-date" "=" quoted-date-time            //读取时间
     size 例子：":= "size" "=" 1-number                               //文件大小
     quoted-date-time 例子：" := quoted-string conform the RFC822     //引用时间

这个东西，在上传文件，发送邮件附件等会用到

6. 文件类型

<meta http-equiv="Content-Script-Type" content="text/javascript">

content参数：
     text/plain                      //文本文件
     text/html                       //html文件
     application/binary              //二进制文件
     application/postscripts         //不知道
     image/gif                       //gif图片
     image/xbm                       //xbm图片
     image/jpeg                      //jpeg图片
     audio/basic                     //basic格式视频文件
     video/mpeg                      //mpeg格式视频文件
     video/QuickTime                 //QuickTime格式视频文件

下面是W3C对http-equiv属性的解释：

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：

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

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

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

当然，只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。

5. X-UA-Compatible属性的解释

问题描述：

代码如下:

1、这个到底是什么意思？

2、一些示例使用”,”分离IE的版本，而一些使用”；“，哪个正确？

3、我想知道IE=9; IE=8; IE=7; IE=EDGE顺序的含义。

在文档中使用了<!DOCTYPE>

答复：

对于IE8及以上版本，例如：

代码如下:

强制浏览器按照特定的版本标准进行渲染。但不支持IE7及以下版本。如果用分号（；）分隔，对于不同的浏览器版本就有不同的兼容性，例如

代码如下:

以上就表明，将IE8和IE7按照IE7标准渲染，但是IE9还是按照IE9的标准渲染。它允许有不同的向后兼容水平。尽管在真实情况中，你只要选择一种版本：

代码如下:

这对于测试和维护会更加简单。而通常更加有用的方式就是进行仿真模拟

代码如下:

对于IE=EDGE

代码如下:

这意味着，会强制浏览器按照最新的标准去渲染。就像在Google’s CDN使用最新版本的JQuery一样，这是按照最新版本，但也可能由于没有固定的版本而破坏你的布局。

最后，考虑下面这个

代码如下:

添加”chrome=1“将允许站点在使用了谷歌浏览器内嵌框架（Chrome Frame）的客户端渲染，对于没有使用的，则没有任何影响。

代码如下:

For more information, there is plenty to read here, and if you want to learn about ChromeFrame (which I recommend) you can learn about its implementation here.

PS:X-UA-Compatible是针对 IE8 版本的一个特殊文件头标记，用于为 IE8 指定不同的页面渲染模式，对于ie8之外的浏览器是不识别的。

目前绝大多数网站都用<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ >来作为IE8的兼容方法。为了避免制作出的页面在IE8下面出现错误，建议直接将IE8使用IE7进行渲染。也就是直接在页面的header的meta标签中加入如下代码：

代码如下:

但是<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ >仍然是首选。

6. 关于 HTTP meta 的 IE=edge 说明

陌生标记标记一：

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

介绍:

这是个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式（比如人见人烦的IE6），以此来解决部分兼容问题，例如模拟IE7的具体方式如下：

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

但令我好奇的是，此处这个标记后面竟然出现了chrome这样的值，难道IE也可以模拟chrome了？
迅速搜索了一下，才明白原来不是微软增强了IE，而是谷歌做了个外挂：Google Chrome Frame（谷歌内嵌浏览器框架GCF）。这个插件可以让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核，而且支持IE6、7、8等多个版本的IE浏览器，谷歌这个墙角挖的真给力！
而上文提到的那个meta标记，则是在是安装了GCF后，用来指定页面使用chrome内核来渲染。
GCF下载地址: http://code.google.com/intl/zh-CN/chrome/chromeframe/
安装完成后,如果你想对某个页面使用GCF进行渲染，只需要在该页面的地址前加上 gcf：即可，例如： gcf:http://cooleep.com
但是如果想要在开发时指定页面默认首先使用GCF进行渲染，如果未安装GCF再使用IE内核进行渲染，该如何进行呢？
就是使用这个标记。

标记用法：

阅读了下chrome的开发文档（http://www.chromium.org/developers/how-tos/chrome-frame-getting-started，需翻墙），下面来简单讲解一下这个标记的语法。
1.最基本的用法：在页面的头部加入

< meta http-equiv = "X-UA-Compatible" content = "chrome=1" >

用以声明当前页面用chrome内核来渲染。

复杂一些的就是本文一开始看到的那中用法：

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

这样写可以达到的效果是如果安装了GCF，则使用GCF来渲染页面，如果为安装GCF，则使用最高版本的IE内核进行渲染。

2.通过修改HTTP头文件的方法来实现让指定的页面使用GCF内核进行渲染：
在HTTP的头文件中加入以下信息：X-UA-Compatible: chrome=1
在Apache服务器中，确保 mod_headers 和 mod_setenvif文件可用，然后在httpd.conf中加入以下配置信息：

 
        <  
        IfModule  
        mod_setenvif.c> 
       
        <  
        IfModule  
        mod_headers.c> 
       
        BrowserMatch chromeframe gcf 
       
        Header append X-UA-Compatible "chrome=1" env=gcf 
       
        </  
        IfModule  
        > 
       
        </  
        IfModule  
        > 
       
         在IIS7或者更高版本的服务器中，只需要修改web.config文件,添加如下信息即可即可: 
       
          <  
          configuration  
          > 
         
          <  
          system.webServer  
          > 
         
          <  
          httpProtocol  
          > 
         
          <  
          customHeaders  
          > 
         
          <  
          add  
          name  
          =  
          "X-UA-Compatible"  
          value  
          =  
          "chrome=1"  
          /> 
         
          </  
          customHeaders  
          > 
         
          </  
          httpProtocol  
          > 
         
          </  
          system.webServer  
          > 
         
          </  
          configuration  
          >