最新HTML面试题.docx

iframe有那些缺点？

▪*iframe会阻塞主页面的Onload事件；

▪*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。

如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以可以绕开以上两个问题。

请描述一下cookies，sessionStorage和localStorage的区别？

▪cookie在浏览器和服务器间来回传递。

▪sessionStorage和localStorage不会sessionStorage和localStorage的存储空间更大；

▪sessionStorage和localStorage有更多丰富易用的接口；

▪sessionStorage和localStorage各自独立的存储空间；

如何实现浏览器内多个标签页之间的通信?

（阿里）

调用localstorge、cookies等本地存储方式

webSocket如何兼容低浏览器？

（阿里）

AdobeFlashSocket、ActiveXHTMLFile（IE）、基于multipart编码发送XHR、基于长轮询的XHR

CSS

介绍一下CSS的盒子模型？

（1）有两种，IE盒子模型、标准W3C盒子模型；IE的content部分包含了border和pading;

（2）盒模型：

内容（content）、填充（padding）、边界（margin）、边框（border）.

CSS选择符有哪些？

哪些属性可以继承？

优先级算法如何计算？

CSS3新增伪类有那些？

▪1.id选择器（#myid）

▪2.类选择器（.myclassname）

▪3.标签选择器（div,h1,p）

▪4.相邻选择器（h1+p）

▪5.子选择器（ul

▪6.后代选择器（lia）

▪7.通配符选择器（*）

▪8.属性选择器（a[rel=“external”]）

▪9.伪类选择器（a:

hover,li:

nth–child）

*可继承的样式：

font-sizefont-familycolor,ULLIDLDDDT;

*不可继承的样式：

borderpaddingmarginwidthheight;

*优先级就近原则，同权重情况下样式定义最近者为准;

*载入样式以最后载入的定位为准;

优先级为:

!

important>id>class>tag

important比内联优先级高

CSS3新增伪类举例

▪p:

first-of-type选择属于其父元素的首个

元素的每个

元素。

▪p:

last-of-type选择属于其父元素的最后

元素的每个

元素。

▪p:

only-of-type选择属于其父元素唯一的

元素的每个

元素。

▪p:

only-child选择属于其父元素的唯一子元素的每个

元素。

▪p:

nth-child

（2）选择属于其父元素的第二个子元素的每个

元素。

▪:

enabled:

disabled控制表单控件的禁用状态。

▪:

checked单选框或复选框被选中。

如何居中div？

1

2

3

4

5

6

//给div设置一个宽度，然后添加margin:

0auto属性

div{

    width:

200px;

    margin:

0auto;

}  

如何居中一个浮动元素？

1

2

3

4

5

6

7

8

9

10

11

12

确定容器的宽高宽500高300的层

设置层的外边距

.div{

  Width:

500px;height:

300px;//高度可以不设

  Margin:

-150px00-250px;

  position:

relative;相对定位

  background-color:

pink;//方便看效果

  left:

50%;

  top:

50%;

}

列出display的值，说明他们的作用。

▪block象块类型元素一样显示。

▪none缺省值。

象行内元素类型一样显示。

▪inline-block象行内元素一样显示，但其内容象块类型元素一样显示。

▪list-item象块类型元素一样显示，并添加样式列表标记。

position的值，relative和absolute定位原点是？

▪*absolute：

生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。

▪*fixed：

生成绝对定位的元素，相对于浏览器窗口进行定位。

▪*relative：

生成相对定位的元素，相对于其正常位置进行定位。

▪*static默认值。

没有定位，元素出现在正常的流中

*（忽略top,bottom,left,rightz-index声明）。

*inherit规定从父元素继承position属性的值。

CSS3有哪些新特性？

CSS3实现圆角（border-radius:

8px），阴影（box-shadow:

10px），

对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

transform:

rotate（9deg）scale（0.85,0.90）translate（0px,-30px）skew（-9deg,0deg）;//旋转,缩放,定位,倾斜

增加了更多的CSS选择器多背景rgba

一个满屏品字布局如何设计?

经常遇到的CSS的兼容性有哪些？

原因，解决方法是什么？

为什么要初始化CSS样式?

–因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

–当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

*最简单的初始化方法就是：

*{padding:

0;margin:

0;}（不建议）

淘宝的样式初始化：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:

0;padding:

0;}

body,button,input,select,textarea{font:

12px/1.5tahoma,arial,\5b8b\4f53;}

h1,h2,h3,h4,h5,h6{font-size:

100%;}

address,cite,dfn,em,var{font-style:

normal;}

code,kbd,pre,samp{font-family:

couriernew,courier,monospace;}

small{font-size:

12px;}

ul,ol{list-style:

none;}

a{text-decoration:

none;}

a:

hover{text-decoration:

underline;}

sup{vertical-align:

text-top;}

sub{vertical-align:

text-bottom;}

legend{color:

#000;}

fieldset,img{border:

0;}

button,input,select,textarea{font-size:

100%;}

table{border-collapse:

collapse;border-spacing:

0;}

absolute的containingblock计算方式跟正常流有什么不同？

position跟display、margincollapse、overflow、float这些特性相互叠加后会怎么样？

对BFC规范的理解？

（W3CCSS2.1规范中的一个概念,它决定了元素如何对其内容进行