前端面试知识点--3

HTML/CSS

1.DOM 文档加载

(1) 顺序

① 解析HTML结构；

② 加载外部脚本和样式表文件；

③ 解析并执行脚本代码；

④ DOM树构建完成；//DOMContentLoaded

⑤ 加载图片等外部文件；

⑥ 页面加载完毕。//load

(2) 代码

① JavaScript

// 不兼容老的浏览器

document.addEventListener("DOMContentLoaded", function() {

// ...代码...

}, false);

window.addEventListener("load", function() {

// ...代码...

}, false);

② jQuery

// DOMContentLoaded

$(document).ready(function() {

// ...代码...

});

//load

$(document).load(function() {

// ...代码...

});

2.BFC

(1) Box

① 概念

Box是CSS布局的对象和基本单位，一个页面是由多个Box组成。元素的类型和 display属性决定了该 Box 的类型。不同类型的 Box，会参与不同的Formatting Context，因此Box内的元素会以不同的方式渲染。

② 类型

block-level box：display属性为block、list-item、table的元素，生成block-level box，参与block fomatting context；

inline-level box：display属性为inline、inline-block、inline-table的元素，生成inline-level box，参与inline formatting context；

run-in box：display属性为run-in的元素。

(2) Formatting Context

① 概念

Formatting Context（格式上下文）是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

② 类型

Block Fomatting Context （BFC）

Inline Formatting Context（IFC）

(1) BFC

① 概念

BFC(Block Formatting Context，块级格式化上下文）是一个独立的渲染区域，只有block-level box参与，它规定了内部的block-level box如何布局，并且与这个区域外部毫不相干。

② 布局规则

内部Box会在垂直方向一个接一个地放置；

Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠；

每个元素的margin box左边与包含块border box左边界相接触（对于从左往右的格式化，否则相反），即使浮动元素也是如此。

BFC的区域不会与float box重叠；

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此。

浮动元素参与BFC的高度的计算。

③ 元素

根元素

float:left|right;

position:absolute|fixed;

display:inline-block|table-cell|table-caption|flex|inline-flex;

overflow:auto|scroll|hidden;

3.视觉格式化模型

(1) 概念

VFM（视觉格式化模型，Visual Formatting Model）它被用来描述用户代

理（比如浏览器）在图形媒体下如何处理文档树。

在视觉格式化模型中，每个文档树的元素会根据框模型产生零到多个框。这些框的布局取决于框的尺寸、类型、定位方式（正常流、浮动和绝对定位），元素之间的关系和外部信息。

(2) 框类型

Containing block（包含块）

Block-level element（块级元素）

Block element（块元素）

Block-level box（块级框） Block container box（块容器框） Block box（块框）

Inline-level element（行内级元素）

Inline element（行内元素）

Inline-level box（行内级框） Atomic inline-level box（原子行内级框） Inline box（行内框）

Anonymous boxes（匿名框）

(3) 包含快

① 概念

一个元素，它的框的尺寸和位置会相对于一个特定的矩形框边缘来计算而得到，这个特定的矩形框称之为该元素的包含块。

② 特殊场景

由根元素生成的包含块叫做初始包含块（initial containing block）；

对于其它元素，如果元素的position值是relative或者static，其包含块由最近的祖先块容器框的内容边界形成；

绝对定位元素的包含块由最近的定位（position 值非 static）祖先生成，如果不存在这样的祖先，则采用初始包含块；

固定定位元素（position:fixed）的包含块一般情况下都由视口生成。

(4) 块级元素、块元素

① 块级元素是视觉上格式化为块的元素，换新行，display属性为block、

list-item、table、flex。

总是在新行上开始；

宽度、高度、顶边距、底边距都可设置；

宽度缺省是其容器的100%，除非设定具体值；

可嵌套其他块级元素和内联元素。

不可包含块级元素的块级元素：

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>、<p>、<dt>

② 块元素是display属性为block的元素。

③ 块元素是块级元素的一个子集。

(5) 块级框、块容器框、块框

① 块级框

块级元素生成块级框，参与BFC。

每个块级元素都会生成一个主要的块级框来包含其子框和生成的内容，任何定位方式都会与主框有关。某些块级元素还会在主要的块级框之外产生额外的框，这些额外的框会相对于主要的块级框来进行排版。例如：

list-item元素需要生成一个额外的框用于包含list-style-type。

② 块容器框

一个块容器框要么只包含块级框，要么只包含行内级框，但不能同时包含块级框和行内级框。

并不是所有的块级框都是块容器框，也并不是所有的块容器框都是块级框。除table和置换元素，一个块级框同时也是一个块容器框。非置换的行内块元素和单元格原宿是块容器框但不是块级框。

块级框需要能够包含其生成的内容，但块容器框并不需要。

③ 块框

块容器的块级框是块框。

④ 区别

(6) 行内级元素、行内元素

① 行内级元素是不为自身内容形成新的块，而让内容分布在多行中的元素，

display属性为inline、inline-table、inline-block、inline-flex。

与其他元素在一行；

宽度、高度、顶边距、底边距不可设置；

宽度是其内容的宽度，不可设置；

可嵌套其他内联元素，不能嵌套块级元素。

② 行内元素是display属性为inline的元素。

③ 行内元素是行内级元素的一个子集。

(7) 行内级框、行内框、原子行内级框

① 行内级框

行内级框生成行内级框，参与IFC。

② 行内框

display:inline的非置换元素会生成行内框。

③ 原子行内框

display:inline的置换元素、display:inline-block|inline-table|inline-flex

|inine-grid的元素生成原子行内级框，即非行内框的行内级框，例如行内块元素、行内表格元素、行内级置换元素，以单一不透明框的形式来参与IFC。

④ 区别

(8) 匿名框

匿名框包括匿名块框和匿名行内框。

<div>

Some text

<p>More text</p>

</div>

一个div中包含有一个p和一段纯文本Some text。p生成一个块级框包裹More text。由于块容器框只允许要么包含块级框，要么包含行内级框，所以div会生成一个匿名的块级框用于包裹Some text，这个匿名框就叫做匿名块框。

<div>

Some text

<span>More text</span>

</div>

一个div中包含有一个span和一段纯文本Some text。div生成一个块框，span生成一个行内框包裹More text， div生成一个行内框用以包裹More text，这个框称为匿名行内框。

4.置换元素与非置换元素

(1) 置换元素/替换元素

① 概念

一个内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度、高度、宽高比）的元素，被称之为置换元素。

置换元素就是浏览器根据元素的标签和属性来决定元素的具体显示内容。

② 元素

display:inline img、iframe、object、canvas

display:inline-block input、textarea、select、object、embed、audio、video

display:block frame

(2) 非置换元素/不可替换元素

HTML的大多数元素是不可置换元素，即其内容直接表现给浏览器。

(1) 行内级元素的宽高定义

① 行内级置换元素的宽高定义

若宽高的计算值都为auto且元素有固有宽度，则width的使用值为该固有宽度。（input）

若宽度的计算值为auto且元素有固有宽度，则width的使用值为该固有宽度；

若宽度的计算值为auto且高度有非auto的计算值，并且元素有固有宽高比，则width的使用值为高度使用值*固有宽高比。（img）

当width的计算值为auto时，则宽度的使用值为 300px 。（iframe、canvas）

若宽高的计算值都为auto且元素有固有高度，则height的使用值为该固有高度。

若高度的计算值为auto且元素有固有高度，则height的使用值为该固有高度；

若高度的计算值为auto且宽度有非auto的计算值，并且元素有固有宽高比，则 height 的使用值为：宽度使用值 / 固有宽高比；

若高度的计算值为auto且上述条件完全不符，则height的使用值不能大于150px，且宽度不能大于长方形高度的2倍。

② 行内级非置换元素的宽高定义

宽度、高度设置是无效。

5.CSS盒子模型

(1) 标准盒子模型

box＝ margin + border + padding + content （content = width）

(2) IE盒子模型

box＝ margin + content （content = border + padding + width）

6.CSS 引入方式

(1) 内嵌样式

style=”property:name;”

(2) 内联样式

<style>CSS Code</style>

(3) 外联样式

<link rel="stylesheet" href="CSSFileURL.css">

(4) link和@important

link属于HTML标签，@import属于CSS；

link引入用的CSS会在页面加载时同时被加载，而@import引入用的CSS会等到页面加载完后再加载；

link无兼容问题，@import只在IE5以上浏览器支持；

link样优先于@import；

link引入的CSS可通过JavaScript改变，@important引入的CSS不可通过JavaScript改变。

7.CSS Reset

不同浏览器对有些标签的默认样式是不同，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

8.CSS Sprite

(1) 简介

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中， 利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位， 访问页面时避免图片载入缓慢的现象。

(2) 优点

CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

CSS Sprites能减少图片的字节；

CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。

CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。

(3) 缺点

图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。

图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。

图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。

可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。

9.CSS Hack

标记	IE6	IE7	IE8	FF	Opera	Sarari
[*+><]	√	√	X	X	X	X
_	√	X	X	X	X	X
\9	√	√	√	X	X	X
\0	X	X	√	X	√	X
@media screen and (-webkit-min-device-pixel-ratio:0){.bb {}}	X	X	X	X	X	√
.bb , x:-moz-any-link, x:default	X	√	X	√(ff3.5-)	X	X
@-moz-document url-prefix(){.bb{}}	X	X	X	√	X	X
@media all and (min-width: 0px){.bb {}}	X	X	X	√	√	√
* +html .bb {}	X	√	X	X	X	X
浏览器内核	Trident	Trident	Trident	Gecko	Presto	WebKit

IE6 IE7 IE8	\9
IE6 IE7	+
IE6	_
Safria Chrome Firefox Opera	@media all and (min-width: 0px){.bb {}}
Safria Chrome	@media screen and (-webkit-min-device-pixel-ratio:0){.bb {}}
IE7 Firefox3.5-	.bb,x:-moz-any-link,x:default{}
Firefox	@-moz-document url-prefix(){.bb{}}
IE7	*+html .bb{}

10.CSS优先级

!important>内嵌样式>内联样式>外联样式>浏览器默认样式

11.FOUC

(1) 概念

FOUC（Flash Of Unstyled Content，文档样式闪烁）

(2) 原因

<style type="text/css" media="all">@import url();</style> 使用@import引用CSS文件。页面先加载HTML，后加载CSS。

(3) 解决

在<head>之间加入一个<link>或者<script>元素

12.居中

(1) 元素水平居中

内联元素水平居中

text-align:center;

块元素水平据居中

margin:0 auto;

(2) 单行文字垂直居中

height:n px;

line-height:n px;

(3) 文字相对图片、输入框垂直居中

vertical-align:middle;

13.float

(1) 规定

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的父元素边框或者浮动元素的边框停留。

(2) 影响

父元素的高度无法被撑开，影响与父元素同级的元素；

与浮动元素同级的非浮动元素会跟随其后；

若浮动元素非第一个元素，则该元素之前的元素也需要浮动，否则会影响页面显示结构。

(3) 清除

空标签<span style="clear:both;"></span>（增加无意义的标签）；

父元素设置overflow:auto|hidden;zoom:1;（zoom:1;用于兼容IE）；

浮动父元素；

afert伪元素（只适用于非IE浏览器）。

注意：清除浮动元素的伪对象要设置 height:0px，否则该元素会比实际高出若干像素。

:after{

content:".";

height:0;

visibility:hidden;

display:block;

clear:both;

}

14.background

元素背景覆盖范围

IE7：content+padding

IE8+、FF：content+padding+border

body背景覆盖范围：content+padding+border+margin

15.margin

(1) 标准规定

外边距用来指定非浮动元素与其周围盒子边缘的最小距离。两个或两个以上的相邻的垂直外边距会被折叠并使用它们之间最大的那个外边距值。多数情况下，折叠垂直外边距可以在视觉上显得更美观，也更贴近设计师的预期。

注意：

折叠发生于相邻的非浮动元素；

折叠发生在垂直外边距上，即margin-topbottom；

折叠后取其中最大的那个margin值作为最终值。

(2) 取值

① margin:auto;自动占据包含块的可用空间

只能应用在常规流中的block-level元素上：

当一个块级元素定义了position 值为非static|relative之外的值时，margin-right|left:auto的计算值为0；

当一个块级元素定义了float值为非none之外的值时，margin-right|left:auto的计算值为0；

非块级元素的margin-right|left:auto的计算值为0；

宽度一定的块级元素设置左边距auto则右对齐，右边距auto则左对齐，设置左右边距auto则居中对齐。

② margin:<percentage>;百分比值参照包含块的宽度进行计算

(3) 折叠

① 概念

折叠：在CSS中，两个或以上的块元素（可能是兄弟，也可能不是）之间的

相邻外边距可以被合并成一个单独的外边距，通过此方式合并的外边距被称为折叠。

折叠外边距：折叠产生的已合并的外边距。

相邻：处于同一个块级上下文中的块元素，没有行框、没有间隙、没有内边距和边框隔开它们，这样的元素垂直边缘毗邻，即：

元素的上外边距和其属于常规流中的第一个孩子的上外边距；

元素的下外边距和其属于常规流中的下一个兄弟的上外边距；

属于常规流中的最后一个孩子的下外边距和其父亲的下外边距，如果其父亲的高度计算值为auto；

元素的上、下外边距，如果该元素没有建立新的块级格式上下文，且 min-height的计算值为0、height的计算值为0或auto、且没有属于常规流中的孩子。

② 条件

两个margin当且只有符合以下规则时，才会发生折叠：

都属于文档流中的块级盒子，并且属于同一个BFC；

无line box, clearance, padding, border分离它们；

都属于垂直相邻的盒子边界。

③ 影响

成父子关系的块级元素，子元素的margin以父元素的content为参考，倘若子元素的content+margin的高度超过了父元素高度值，IE会自动扩大，保持子元素的margin-bottom和父元素的padding-bottom，FF则保持父元素高度不变，子元素会超粗父元素范围。

成父子关系的块级元素 ，如果父元素和子元素之间没有其他元素，浏览器则会把子元素的margin-top作用于父元素。

④ 避免

浮动盒子不会跟其它盒子发生margin折叠（即使是与它的子元素）;

创建BFC的盒子（如浮动根元素和overflow不为visible的元素）的margin不会跟它的子元素发生margin折叠；

绝对定位的盒子不会发生margin折叠（即使与它的子元素）；

display为inline-block的元素不会发生margin折叠（即使与它的子元素）；

文档流中的会计元素的bottom margin总会和它的下一个文档流中的兄弟元素的top margin折叠，除非这个兄弟元素有clearance ；

如果文档流中一个元素没有top border, top padding，且它的子元素没有clearance，那么它的top margin会与它的第一个文档流中的块级子元素的top margin折叠；

当一个盒子的min-height为0，没有top border或bottom border，没有top padding或bottom padding，height为0或auto，不包含line box，且它的所有文档流中的子孙元素的margin都折叠了，那么它自己的top margin和bottom margin会折叠。

⑤ 解决

display:inline-block|table-cell|table-caption|flex|inline-flex;

float:left|right;

overflow:hidden|auto;

position:absolute|fixed;

padding-top|bottom:npx;

border-top|bottom:npx solid #fff;

(4) BUG

① IE6浮动双倍margin bug

double margin 并不会发生在所有的浮动元素上，同个包含块内，在相同的浮动方向上，它只发生在第一个浮动元素上。

解决：

display:inline;

② IE6/7 clear引发的margin-top bug

clear 为非none值的元素其顶部border边界不允许出现在之前浮动元素的底部margin边界之上。

解决：

尽量避免为设置了clear:left|right|both的元素定义margin-top；

如果必须可以将拥有clear特性的元素作为容器，在其子元素上设置margin-top；

使用padding-top。

③ IE8按钮margin:auto;居中失败bug

解决：

button{display:block;margin:auto;}

只有button和input type为button相关元素的时候，在IE8中才会水平居中失效，可显示定义宽度，或不改变其display值，包含块text-align:center。

(5) 应用

① first/last

<div id="demo">

<h3>图片列表</h3>

<ul>

<li><img src="images/1.jpg" alt="#" /></li>

<li><img src="images/2.jpg" alt="#" /></li>

<li><img src="images/1.jpg" alt="#" /></li>

</ul>

</div>

#demo{

overflow:hidden;

}

#demo ul{

margin-right: -10px;

}

② 缩进

<div>

<strong>简介</strong>

<p>简介内容</p>

</div>

p{

padding-left:45px;

}

strong{

margin-left:-45px;

}

③ 底边线重合

<div id="demo">

<a href="#">分类一</a>

<a href="#" class="active">分类二</a>

<a href="#">分类三</a>

<a href="#">分类四</a>

</div>

#demo{

border-bottom:1px solid #aaa;

}

#demo a{

display:inline-block;

margin-bottom:-1px;

border:1px solid #aaa;

}

#demo .active{

border-bottom-color:#fff;

}

④ 布局

absolute+margin

<div id="content">

<div id="main">主内容栏自适应宽度</div>

<div id="aside">侧边栏固定宽度</div>

</div>

#aside{

position:absolute;

top:0;

left|right:0;

width:200px;

}

#main{

margin-left|right:210px; //参考侧边固定宽度

}

优点：

可任意调换位置

可主内容优先显示

缺点：

侧边无法撑开父元素的高度，会溢出父元素区域。

float+margin

<div id="content">

<div id="aside">侧边栏固定宽度</div>

<div id="main">主内容栏自适应宽度</div>

</div>

#aside{

float:left|right;

width:200px;

}

#main{

margin-left|right:210px;//参考侧边固定宽度

}

优点：

可任意调换位置

父元素自适应高度

缺点：

不支持主内容优先显示

float+-margin

<div id="content">

<div id="main">主内容栏自适应宽度</div>

<div id="aside">侧边栏固定宽度</div>

</div>

#content{

padding-left:210px; //参考侧边固定宽度

}

#main{

float:left;

width:100%;

}

#aside{

float:left;

position:relative;

width:200px;

left:-210px;//等于包含块内补白

margin-left:-100%;

}

#content{

padding-right:210px; //参考侧边固定宽度

}

#aside{

float:left;

position:relative;

width:200px;

right:-210px; //等于包含块内补白

margin-left:-200px;

}

#main{

float:left;

width:100%;

}

16.position

absolute：使用绝对定位的元素以最近的已经定位的祖先元素为基准进行偏移，若没已经经定位的祖先元素则以浏览器窗口为基准进行偏移；绝对定位的元素从标准文档流中脱离，对其他元素的定位没有影响。设置绝对定位而不设置偏移的元素将脱离文档流且保持在原来的位置。

fixed：固定定位的元素以浏览器窗口为基准进行定位。

17.z-index

(1) 规定

在文档中，每个元素仅属于一个层叠上下文。元素的层叠级别为整型，描

述了在相同层叠上下文中元素在“Z轴” 上的呈现顺序。

z-index只能应用于定位元素即position属性设置为relative|absolute|fixed的元素。

对于定位元素，z-index确定该元素在当前层叠上下文中的层叠级别；确定该元素是否创建了一个新的局部层叠上下文。

(2) 取值

z-index:auto|<integer>;

(3) 规则

当某个元素的z-index未显式定义或者被指定为auto时，该元素不会产

生新的局部层叠上下文。它可以和后辈、兄弟、祖先元素处在同一个堆叠上下文中。它们被放在一起比较层叠级别，儿子可以盖住祖先，父亲也可以盖住儿子，儿子甚至可以越过祖先，盖住祖先的兄弟，在层叠上下文中，它们是并级的关系。

同一层叠上下文中，层叠级别大的显示在上，层叠级别小的显示在下；相同

层叠级别时，遵循后来居上的原则，即其在HTML文档中的顺序；不同层叠上下文中，元素呈现顺序以父级层叠上下文的层叠级别来决定呈现的先后顺序，与自身的层叠级别无关。

(4) IE6/7覆盖bug

① 原因

在IE6/7下，不论z-index值是否被显式定义，都将产生新的局部层叠上下文，即子元素不可以越过是定位元素的父亲，子元素都处在新创建的局部层叠上下文中，只能在内部进行层叠级别的比较。

② 解决

为相互覆盖而设置为定位，那么显式的定义 z-index 值，将可避免出现创建新局部层叠上下文差异。

为越过祖先和其它区块内部元素进行相互层叠，考虑IE6/7的情况，应该尽量避免给父级元素进定位。

(5) opacity

当opacity值小于1时，该元素会创建新的局部层叠上下文，可以和定位元

素进行层叠层别比较；

当opacity值小于1时，该元素拥有层叠级别且相当于z-index:0|auto，但不能定义z-index，除非本身是定位元素。

(6) 应用

图文替换

<a href="#top" title="回到顶部"><span>TOP▲</span></a>

#top, #top span{display:inline-block;width:38px;height:38px; transition: all .3s ease-in;}

#top {background:url(images/ico.png) no-repeat;}

#top:hover{background-position:0 -39px;color:#fff;}

#top span{position:relative;z-index:-1;background-color:#999; color:#fff;}

#top:hover span{background-color:#eee;}

18.border

19.伪类

链接伪类出现的顺序必须遵循a:linkàa:visitedàa:hoveràa:active

20.单行溢出省略

overflow: hidden;/ * 溢出隐藏*/

white-space: nowrap;/* 限制文本换行*/

text-overflow: ellipsis;/ * 显示省略标记*/

-o-text-overflow:ellipsis;/ * 兼容Opera*/

21.相似属性设置

(1) display:none;和visiblity:hidden;

(2) border:none;和border:0;

① 效果

border-style:none;//无边框

border-width:0;//边框宽度为0px

② 区别

性能差异：

border:0;浏览器对border-width、border-color进行渲染，占用内存。

border:none;浏览器不进行渲染，不占用内存。

浏览器差异：

Chrome

border:none;>> border:initial none initial;

border:0;>> border:0 initial initial ;

Firefox、360

border:none; >>border:medium none;

border:0;>> border:0 none;

计算出的样式

border:0px none 元素color属性值;

③ 兼容

IE7-不支持border:none;

W3C提示：请始终把border-style属性声明到border-color属性之前，元素必须在改变颜色之前获得边框。

(3) position:absolute;和position:fixed;

① 相同

改变行内元素的呈现方式，display被置为block；

使元素脱离文档流，不占据空间；

定位元素默认会覆盖到非定位元素之上。

② 不同

绝对定位的"根元素"是可设置的，固定定位的"根元素"始终为浏览器窗口；

当滚动页面时fixed元素与浏览器窗口之间的距离是不变的。

Browser

1.渲染模式

标准模式

怪异模式

2.内核

IE（Trident）

火狐（Gecko）

谷歌（Webkit）

Safari（Webkit）

Opear（Presto）

3.兼容

4.存储

10.1 分类

1. 客户端

cookie

web storage

userData

indexedDB

2. 服务器端

session

10.2 Cookie

3. 构成

(1) 名称name

(2) 值value

(3) 失效时间expires

(4) 域domain

(5) 路径path

4. 作用

在客户端存储会话信息

5. 原理

(1) 服务器对任意HTTP请求发送Set-Cookie HTTP头作为响应的一部分，其

中包括会回话信息。

Set-Cookie:name=value

(2) 浏览器存储会话信息，并为之后的每个HTTP请求添加Cookie HTTP头

将信息发送回服务器。

Cookie:name=value

6. 限制

(1) cookie绑定在特定的域名下，不可跨域。

(2) 每个域的cookie数量有限，各浏览器之间有所不同。

IE6 或更低版本最多有20个cookie；

IE7 及其之后的版本最多可以有50个cookie；

Firefox 最多有50个cookie；

Chrome 和Safari对cookie数量未做硬性限制。

超过单个域名cookie数量限制之后再设置cookie，浏览器就会清除以前设置的cookie，各浏览器清除机制不同。

(3) 浏览器对cookie的尺寸有限制。

大多数浏览器都有大约4096B（加减1）的长度限制，最好将cookie长度限制在4095B及以内以确保最佳的浏览器兼容。创建超过最大尺寸限制的cookie，该cookie会被浏览器丢掉。

7. 优点

极高的扩展性和可用性

(1) 通过良好的编程可控制保存在cookie中的session对象的大小。

(2) 通过加密和安全传输技术（SSL），减少cookie被破解的可能性。

(3) 不在cookie中存放重要和敏感数据。

(4) 控制cookie的生命期，使之不会永远有效。

8. 缺点

(1) cookie的数量和长度的限制

为保证跨浏览器起兼容性，每个域最多20条cookie，每个cookie长度不能超过4KB。

(2) 安全性

如果cookie被他人拦截，拦截者就可以取得所有的session信息，即使加密也与事无补，因为拦截者并不需要知道cookie的意义，而只要原样转发cookie就可以达到目的。

(3) 有些状态不可能保存在客户端

(4) 性能

所有cookie都会由浏览器作为请求头发送，在cookie中存储大量信息会影响特定域的请求性能。

9. JavaScript Cookie

(1) 格式

name1=value1;name2=value2;...;nameN=valueN

(2) 代码

var CookieUtil = {

get: function (name){

var cookieName = encodeURIComponent(name) + "=",

cookieStart = document.cookie.indexOf(cookieName),

cookieValue = null,

cookieEnd;

if (cookieStart > -1){

cookieEnd = document.cookie.indexOf(";", cookieStart);

if (cookieEnd == -1){

cookieEnd = document.cookie.length;

}

cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));

}

return cookieValue;

},

set: function (name, value, expires, path, domain, secure) {

var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);

if (expires instanceof Date) {

cookieText += "; expires=" + expires.toGMTString();

}

if (path) {

cookieText += "; path=" + path;

}

if (domain) {

cookieText += "; domain=" + domain;

}

if (secure) {

cookieText += "; secure";

}

document.cookie = cookieText;

},

unset: function (name, path, domain, secure){

this.set(name, "", new Date(0), path, domain, secure);

}

};

注意：

(1) 只有cookie的名称和值是必需的。

(2) 所有的名称和值必需经过URL编码。

10. Subcookie

(1) 实现

使用cookie值存储多个名值对儿

(2) 格式

name=name1=value1&name2=value2&...&nameN=valueN

(3) 代码

var SubCookieUtil = {

get: function (name, subName){

var subCookies = this.getAll(name);

if (subCookies){

return subCookies[subName];

} else {

return null;

}

},

getAll: function(name){

var cookieName = encodeURIComponent(name) + "=",

cookieStart = document.cookie.indexOf(cookieName),

cookieValue = null,

cookieEnd,

subCookies,

i,

parts,

result = {};

//获取所有的名值对儿

if (cookieStart > -1){

cookieEnd = document.cookie.indexOf(";", cookieStart)

if (cookieEnd == -1){

cookieEnd = document.cookie.length;

}

cookieValue = document.cookie.substring(cookieStart + cookieName.length, cookieEnd);

if (cookieValue.length > 0){

//根据&分隔所有的名值对儿

subCookies = cookieValue.split("&");

for (i=0, len=subCookies.length; i < len; i++){

//根据=分隔每个名值对儿得到名称和值

parts = subCookies[i].split("=");

//将每个名值对儿的名称和值存入数组

result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);

}

return result;

}

}

return null;

},

set: function (name, subName, value, expires, path, domain, secure) {

var subcookies = this.getAll(name) || {};

subcookies[subName] = value;

this.setAll(name, subcookies, expires, path, domain, secure);

},

setAll: function(name, subcookies, expires, path, domain, secure){

var cookieText = encodeURIComponent(name) + "=",

subcookieParts = new Array(),

subName;

//枚举所有的名值对儿以name=value的格式存入数组

for (subName in subcookies){

if (subName.length > 0 && subcookies.hasOwnProperty(subName)){

subcookieParts.push(encodeURIComponent(subName) + "=" + encodeURIComponent(subcookies[subName]));

}

}

if (subcookieParts.length > 0){

//使用&连接所有名值对

cookieText += subcookieParts.join("&");

if (expires instanceof Date) {

cookieText += "; expires=" + expires.toGMTString();

}

if (path) {

cookieText += "; path=" + path;

}

if (domain) {

cookieText += "; domain=" + domain;

}

if (secure) {

cookieText += "; secure";

}

} else {

cookieText += "; expires=" + (new Date(0)).toGMTString();

}

document.cookie = cookieText;

},

unset: function (name, subName, path, domain, secure){

var subcookies = this.getAll(name);

if (subcookies){

delete subcookies[subName];

this.setAll(name, subcookies, null, path, domain, secure);

}

},

unsetAll: function(name, path, domain, secure){

this.setAll(name, null, new Date(0), path, domain, secure);

}

};

10.3 Web Storage

1. 适应情况

数据需要被严格控制在客户端上，无需持续地将数据发回服务器。

2. Storage类型

clear()

getItem()

key(index)

removeItem(name)

setItem(name,value)

3. 对象

(1) sessionStorage

临时性的存储 会话存储

sessionStorage 对象存储特定于某个会话的数据；页面刷新、浏览器崩溃重启（若浏览器支持）数据仍可用；数据只能由在同一个会话中的页面访问，内嵌页面可共享数据；数据保留到浏览器关闭，会话结束数据随之销毁。

sessionStorage 对象绑定于某个服务器会话，文件在本地运行时不可用。

(2) localStorage

持久化的存储 跨会话存储

sessionStorage 对象跨域会话存储数据；数据可由同一个域名（子域名无效）下的页面访问，多页面可共享数据；数据保留到用户清除浏览器缓存。

4. 限制

对于存储空间大小的限制都以每个来源为单位，每个来源都有固定大小的空间保存自己的数据。对于localStorage，大多数浏览器会设置每个来源5MB的限制。

CSS3

1.多重背景

background:url();/*IE8- */

background:url(),url()……;

2.透明度

opacity:0.3;

filter:alpha(opacity=30); /*IE8- */

3.颜色

color:#ccc; /*IE8- */

color:rgba(255,255,255,0.3);

JavaScript

1.引入方式

(1) 嵌入脚本

<script>JavaScript Code</script>

(2) 外部脚本

<script src="JavaScriptFileURL.js"></script>

2.数据类型

(1) 分类

简单数据类型（基本数据类型）：Undefined、Null、Boolean、Number、String

复杂数据类型：Object

(2) 检测

① typeof基本类型值检测

数据类型	返回值
Undefined	undefined
Boolean	boolean
String	string
Number	number
Function	function
Object	object
NaN	number
Null	function(Safari5- 、Chrome7-)|object

② instanceof引用类型值检测

result=variable instanceof constructor;

(3) 转换

① 转换类型

强制类型转换：parseInt() parseFloat() Number() String() toString()

隐式类型转换：== +

② Boolean

数据类型	转换为true的值	转换为false的值
Boolean	true	false
String	任何非空字符串	空字符串
Number	任何非零数字值	0|NaN
Object	任何对象	null
Undefined		undefined

3.变量

(1) 定义

ECMAScript中的变量是松散类型，可保存任何类型的数据。

(2) 变量类型

基本类型：Undefined、Null、Boolean、Number、String

引用类型：

基本引用类型（Object、Array、Date、RegExp、Function）

基本包装类型（Boolean、String、Number）

单体内置对象（Global、Math）

① 不同

动态属性

基本类型的值不可添加属性和方法；

引用类型的值可添加、改变、删除属性和方法。

存储

基本类型值在内存中占据固定大小的空间，被保存在栈内存中；

引用类型值是对象，在内存中占据空间大小不固定，被保存在堆内存中。

访问

基本类型值按值访问；

引用类型值按引用访问。

复制

从一个变量向量一个变量复制基本类型值时，会在变量对象上创建值的副本，并把其复制到为新变量分配的位置上，两个变量可以参与任何操作而互不影响；

从一个变量向另一个变量复制引用类型值时，会在变量对象上创建指针的副本，并把其复制到为新变量分配的位置上，两个变量引用同一个对象。

② 相同

ECMAScript中的所有函数的参数都是按值传递。

(3) 变量命名规则

第一个字符必须是一个字母、下划线（_）或美元符号（$）；

其他字符可以是字母、下划线、美元符号或数字。

(4) 变量声明

① 局部变量

用var操作符声明的变量将成为该变量的作用域中的局部变量，如果在函数中使用var声明一个变量，该变量在函数退出后就会被销毁；

② 全局变量

省略var操作符会创建一个全局变量。

注意：在局部作用域中定义的全局变量很难维护，也会由于相应变量不会马上就有定义而导致不必要的混乱，给未经声明的变量赋值在严格模式下会导致抛出Reference错误，所以不推荐使用。

在全局作用域中声明的变量、函数会变成window对象的属性和方法。使用var声明的全局变量不可删除，而省略var声明的全局变量可删除。

var a = 2;

window.b = 3;

c = 4;

this.d = 4;

var aa = Object.getOwnPropertyDescriptor(window,'a'); //configurable:false,enumerable:true,value:2,writable:true

var bb = Object.getOwnPropertyDescriptor(window,'b'); //configurable:true,enumerable:true,value:2,writable:true

var cc = Object.getOwnPropertyDescriptor(window,'c'); //configurable:true,enumerable:true,value:2,writable:true

var dd = Object.getOwnPropertyDescriptor(window,'d'); //configurable:true,enumerable:true,value:2,writable:true

delete a; // 无法删除

delete b; // 可删除

delete c; // 可删除

delete d; // 可删除

(5) 变量声明提升

console.log(n);//undefined

var n=3;

(6) 重复变量声明

使用var语句重复声明语句是合法且无害的，JavaScript会忽略同一变量的后续声明。

4.原型

(1) 原型对象、构造函数、对象实例之间的关系

创建新函数，会根据一组特定的规则为该函数创建一个prototype属性，该属性指向函数的原型对象；

默认情况下，所有原型对象会自己动获取一个constructor属性，该属性指向prototype属性所在函数；

调用构造函数创建新实例，该实例内部包含一个内部属性[[Prototype]]指向构造函数的原型对象。

注意：

连接存在于实例与构造函数的原型对象之间，而不是存在于实例与构造函数之间。

(2) 属性搜索

每当代码读取某个对象的的某个属性的时候，都会执行一次搜索，目标是具有给定名字的属性。搜索首先从对象实例本身开始，若找到则返回该属性的值，若找不到则继续搜索指针指向的原型对象。

(3) 属性设置

设置原型对象属性：

Object.prototype.propertyName=propertyValue;

为对象实例添加属性：

Object.propertyName=propertyValue;

为对象实例添加一个属性时，这个属性会屏蔽原型对象中保存的同名属性。

(4) 使用new操作符调用构造函数创建实例的执行步骤

③ 创建一个新对象；

④ 将函数的作用域赋给新对象（this指向新对象）；

⑤ 执行函数中的代码；

⑥ 返回新对象

5.闭包

(1) 概念

闭包是指有权访问另一个函数作用域中的变量的函数。

(2) 特性

闭包有权访问包含函数内部的所有变量，但只能取得任何变量的最后一个值。

(3) 创建

在一个函数内部创建另一个函数。

(4) 原理

闭包的作用域链包含自己的作用域、包含函数的作用域和全局作用域。通常函数的作用域及所有变量都会在函数执行结束后被销毁。当函数返回闭包时，该函数的作用域会一直在内存中保存到闭包不存在为止。、

在一个函数内部中定义的函数会将包含函数（外部函数）的活动对象添加到其作用域中，直至解除对内部函数的应用，内部函数被销毁，外部函数的活动对象才会被销毁。

(5) 实例

var elements=document.getElementsByTagName('li');

var length=elements.length;

for(var i=0;i<length;i++){

elements[i].onclick=function(){

console.log(i);// 4，4，4，4

}

}

function closure(){

var result=[];

for (var i = 0; i < 4; i++) {

result[i]=function(){

console.log(i); // 4，4，4，4

}

};

return result;

}

6.递归

递归函数使用arguments.callee递归调用本身，避免函数名发生变化造成错误。

7.this对象

this对象引用的是函数据以执行的环境对象。

在全局作用域中调用函数，this指向window；

当函数被作为某个对象的方法调用时，this指向此对象；

匿名函数的执行环境具有全局性，其this对象通常指向window。

通过将外部作用域的this对象保存到一个闭包可以访问的变量里，可以让闭包访问非全局变量的值。

call()、apply()可改变函数执行环境，从而改变this指向。

8.模仿块级作用域

JavaScript没有块级作用域。

(function(){

//块级作用域

})();

在匿名函数中定义的任何变量都会在执行结束时被销毁。

模拟块级作用域，减少闭包占用的内存，避免全局变量和函数冲突。

9.私有变量

this对象引用的是函数据以执行的环境对象。

10.跨域

(1) window.name

iframe+window,name

(2) document.domain

将页面的document.domain设置为相同的值，页面间可以互相访问对方的JavaScript对象。

注意：

不能将值设置为URL中不包含的域；

松散的域名不能再设置为紧绷的域名。

(3) CORS

CORS（Corss-Origin Resource Sharing,跨资源共享），基本思想是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应的成功或失败。即给请求附加一个额外的Origin头部，其中包含请求页面的源信息（协议、域名和端口），以便服务器根据这个头部决定是否给予响应。

(4) 图像Ping

var img=new Image();

img.onload=img.onerror=function(){

... ...

}

img.src="url?name=value";

请求数据通过查询字符串的形式发送，响应可以是任意内容，通常是像素图或204响应。

图像Ping最常用于跟踪用户点击页面或动态广告曝光次数。

缺点：

只能发送GET请求；

无法访问服务器的响应文本，只能用于浏览器与服务器间的单向通信。

(5) Jsonp

var script=document.createElement("script");

script.src="url?callback=handleResponse";

document.body.insertBefore(script,document.body.firstChild);

JSONP由两部分组成：回调函数和数据

回调函数是接收到响应时应该在页面中调用的函数，其名字一般在请求中指定。

数据是传入回调函数中的JSON数据。

优点：

能够直接访问响应文本，可用于浏览器与服务器间的双向通信。

缺点：

JSONP从其他域中加载代码执行，其他域可能不安全；

难以确定JSONP请求是否失败。

(6) Comet

Comet可实现服务器向浏览器推送数据。

Comet是实现方式：长轮询和流

短轮询即浏览器定时向服务器发送请求，看有没有数据更新。

长轮询即浏览器向服务器发送一个请求，然后服务器一直保持连接打开，直到有数据可发送。发送完数据后，浏览器关闭连接，随即又向服务器发起一个新请求。其优点是所有浏览器都支持，使用XHR对象和setTimeout()即可实现。

流即浏览器向服务器发送一个请求，而服务器保持连接打开，然后周期性地向浏览器发送数据，页面的整个生命周期内只使用一个HTTP连接。

(7) WebSocket

WebSocket可在一个单独的持久连接上提供全双工、双向通信。

WebSocket使用自定义协议，未加密的连接时ws://；加密的链接是wss://。

var webSocket=new WebSocket("ws://");

webSocket.send(message);

webSocket .onmessage=function(event){

var data=event.data;

... ....

}

注意：

必须给WebSocket构造函数传入绝对URL；

WebSocket可以打开任何站点的连接，是否会与某个域中的页面通信，完全取决于服务器；

WebSocket只能发送纯文本数据，对于复杂的数据结构，在发送之前必须进行序列化JSON.stringify(message))。

优点：

在客户端和服务器之间发送非常少的数据，减少字节开销。

11.call()和apply()

(1) 作用

在特定的作用域总调用函数，等于设置函数体内this对象的值，以扩充函数赖以运行的作用域。

window.color="red";

var o={color:"blue"};

function getColor(){

console.log(this.color);

}

getColor.call(this);

getColor.call(window);

getColor.call(o);

(2) 区别

接收参数的方式不同：

对于call（），第一个参数是运行函数的作用域，其余参数都直接传递给函数即传递给函数的参数必须逐个列举出来。

对于apply（），第一个参数是 运行函数的作用域 ，另一个参数是参数数组,可以是Array实例或arguments对象。

function sum(num1,num2){

return num1+num2;

}

function callSum(num1,num2){

return sum.call(this,num1,num2);

}

function callSum(num1,num2){

return sum.apply(this,arguments);

}

function callSum(num1,num2){

return sum.apply(this,[num1,num2]);