【】作用讲解

 

【 一、语法： 
 
二、参数解析： 
1）name项：常用的选项有Keywords(关键字) ，description(网站内容描述)，author(作者)，robots(机器人向导)等。 
2）http-equiv项：可用于代替name项，常用的选项有Expires(期限)，Pragma(cache模式)，Refresh(刷新)，Set-Cookie(cookie设定)，Window-target(显示窗口的设定)，content-Type(显示字符集的设定)等。 
3）content项：根据name项或http-equiv项的定义来决定此项填写什么样的字符串。 
三、应用 
1、告诉浏览器网页所识别的文件类型及语言类型，比如说，我们要让浏览器识别HTM/HTML类型的简体中文网面，我们可以这样写： 
< Meta http-equiv="Content-Type" content="text/html; charset=gb2312" > 
2、让一些搜索引擎搜索到你的网页，代码可以这样写： 
< Meta Name=" Keywords" Content="网页关键字" > 
< Meta Name=" description" Content="网页描述文字" > 
要达到自动搜索引擎真正能方便地搜索到你的网页还得注意以下几点： 
A、既要定义meta标记项，又要将首页正文的前200个字符定义成反映主页主题的文字。因为有些导航台在标引meta项中的关键词的同时，还要标引正文中的前200个字符。如：altavista。所以，有些人在注册完导航台后去检查注册结果时，发现导航台中的描述并不是你所希望的，而是诸如版权说明之类的文字。产生这一现象的原因就是没有注意到这一点。 
B、将定义关键词的meta标记项放在定义描述的meta项之前。如： 
 
 
C、将最重要的关键词放在最前面，让相关的关键词相邻。全小写与首字母大写并存，因为有的导航台在标引时对字符的大小写是敏感的。包括标点符号不要超过250个单词 
D、首页最好不用frame结构，因为frame将屏幕划分成多个窗口后，导航台不能智能地选择正确的窗口中的主页去标引。 
3、让一个页面过上一定的时间，自动转到另一个页面或者站点去，如： 
< Meta HTTP-EQUIV="refresh" content="6; url=http://hi.baidu.com/tesalo/" > 
content中的6表示时间，单位为秒，url=后面是你要转向的网址，若是与你当前网页在同一目录下，可以直接写上文件名，如： 
< Meta HTTP-EQUIV="refresh" content="6; url=page1.htm" > 
4、让网页每隔一段时间刷新一次，若要10秒刷新一次，代码这样写： 
 
5、通过Meta可以让你进入页面时产生一些特殊效果，具体应用如下： 
< meta http-equiv="Page-Enter" content= "revealTrans(Duration=5.0,Transition=n)" > 其中，n的取值范围为0-23，具体的意义如下： 
0 矩形缩小 1 矩形扩大 2 圆形缩小 
3 圆形扩大 4 下到上 5 上到下 
6 左到右 7 右到左 8 竖百叶窗 
9 横百叶窗 10 错位横百叶窗 11 错位竖百叶窗 
12 点 13 左右到中间 14 中间到左右 
15 中间到上下 16 上下到中间 17 右下到左上 
18 右上到左下 19 左上到右下 20 左下到右上 
21 横条 22 竖条 23 以上 24种随机选择一种 

6、标注作者： 
 
7、控制页面缓冲，如不要页面缓冲的代码这样写： 

---------------------------------------------------------------------------------------------------------------------

X-UA-Compatible：

1.
像是使用了 Windows Internet Explorer 7 的 Quirks 模式，这与 Windows Internet Explorer 5 显示内容的方式很相似。

2.
无论页面是否包含 指令，都像是使用了 Windows Internet Explorer 7 的标准模式。

3.

4.
Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容，这实际上破坏了“锁定”模式。

5.
EmulateIE7 模式通知 Windows Internet Explorer 使用 指令确定如何呈现内容。标准模式指令以Windows Internet Explorer 7 标准模式显示，而 Quirks 模式指令以 IE5 模式显示。与 IE7 模式不同，EmulateIE7 模式遵循 指令。对于多数网站来说，它是首选的兼容性模式。

====================================

MSDN上关于X-UA-Compatible 的说明：

In IE8 Beta 1, that option is the “IE=7” X-UA-Compatible tag, which instructs IE8 to display content in IE7 Standards mode. However, the scenario this doesn’t address is when IE=7 is applied as an HTTP header to a site that contains Quirks mode pages. The IE=7 HTTP header will force all pages – both Quirks and Standards – to display in IE7 Standards mode. Developers using this header while updating their sites would then have to add the “IE=5” tag to each page they want to keep in Quirks mode. This logic is fine for many websites. However, if a site has lots of Quirks mode pages, or for the case where pages with frames host a mix of Strict and Quirks mode content – as brought to light by IE8 Beta 1 user feedback – the compatibility opt-out adds a bit more work than we intended.

====================================

quick mode&strict mode

=================================================

1、quirks mode和strict mode是浏览器解析css的两种模式，或者可以称之为解析方法。目前正在使用的浏览器这两种模式都支持 。

2、历史原因。

当早期的浏览器Netscape 4和Explorer 4对css进行解析时，并未遵守W3C标准，这时的解析方式就被我们称之为quirks mode(怪异模式),但随着W3C的标准越来越重要，众多的浏览器开始依照W3C标准解析CSS，仿照W3C标准解析CSS的模式我们叫做strict mode(严格模式).

3、后来的浏览器虽然支持strict mode，但众多浏览器并未放弃支持quirks mode。

一个重要的原因就是为了之前大量在quirks mode下开发的网页能够得到正确的显示。所以，这些支持两种模式的浏览器当拿到一张网页时，所做的一个前期工作就是判断采取何种方式进行解析(判断条件 后面会说)。注：Explorer 5仍然只支持quirks mode

4、浏览器如何判断何用哪种方式解析CSS？

解决方案就是采用doctype声明，大多数浏览器采用下面的这些判断规则

•     浏览器要使老旧的网页正常工作，但这部分网页是没有doctype声明的，所以浏览器对没有doctype声明的网页采用quirks mode解析。

•     对于拥有doctype声明的网页，什么浏览器采用何种模式解析，这里有一张详细列表可参考：http://hsivonen.iki.fi/doctype/

•     对于拥有doctype声明的网页，这里有几条简单的规则可用于判断：

对于那些浏览器不能识别的doctype声明，浏览器采用strict mode解析

 

在doctype声明中，没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirks mode呈现，其他的则使用strict mode解析。

可以这么说，在现有有doctype声明的网页，绝大多数是采用strict mode进行解析的。

在ie6中，如果在doctype声明前有一个xml声明(比如:)，则采用quirks mode解析。这条规则在ie7中已经移除了。

5、mozilla提出了almost strict moede ，和strict mode的区别是：

img元素在strict中是inline的，而在almost strict mode中是block的。其实我们前面所说，在大多数浏览器，大多数doctype声明触发的是almost strict mode;

6、quirks mode和strict mode最大的不同就是提现在对盒模式的解释上 ，这也是我们在js里要注意的地方。

什么是盒模式？ 这是针对块级元素说的，我这里只简单说一下(详情请查阅相关资料)。说白了就是把块级元素想像成一个装东西的盒子，而margin,padding,border,width这些css属性构成了盒模式。

 

而区别就是产生在width属性上：

在strict mode中 ：

width是内容宽度 ，也就是说,元素真正的宽度 = margin-left  +  border-left-width  +  padding-left  + width  +  padding-right  +  border-right-width  +  margin-right;

 

在quirks mode中 ：

width则是元素的实际宽度 ，内容宽度 = width  -  (margin-left  +  margin-right  +  padding-left  +  padding-right  +  border-left-width  +  border-right-width)

这里把盒模式相关的东西记录一下，备忘 ！

·内联元素 ，例如、等，定义上下边界不会影响到行高（line-height），内联元素距离上一行元素的距离由行高决 定，而不是填充或边界。 注2.  内联元素（display: inline） 内联元素不需要在新行内显示，而且也不强迫其后的元素换行，如a、em、span等都为内联元素。内联元素可以为任何其他元素的子元素。

·浮动元素（无论左或者右浮动）边界不压缩 ，且若浮动元素不声明宽度，则其宽度趋向于0，即压缩到其内容能承受的最小宽度。 

·如果盒中没有内容，则即使定义了宽度和高度都为100%，实际上只占0% ，因此不会被显示，此点在采取层布局的时候需特别注意。 

·边界值可为负，其显示效果各浏览器可能不相同 。 

·填充值不可为负 。 

·边框默认的样式（border-style）为不显示（none） 。

7、在quirks mode 和 strict mode中还有一个区别 ，但没经过验证，我只是发现有这个现象。

在strict mode 中，

table的css属性font-size会继承父级元素的 ，也就是说，table中的字体大小会继承父级元素字体的大小。

在quirks mode 中，

table的css属性font-size不会继承父级元素的 ，需要专门设置一下。也就是说，table中的字体大小不会继承父级元素字体的大小。

8、在js中如何判断当前浏览器正在以何种方式解析？ 
    document对象有个属性compatMode ,它有两个值：
        BackCompat    对应quirks mode
        CSS1Compat    对应strict mode

=================================================

----------------------------------------------------------------------------------------------------------------------