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

属性值

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）的客户端渲染，对于没有使用的，则没有任何影响。

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″ >仍然是首选。