html5面试题集合.docx

html5面试题集合.docx

《html5面试题集合.docx》由会员分享，可在线阅读，更多相关《html5面试题集合.docx（34页珍藏版）》请在冰豆网上搜索。

html5面试题集合

一.闭包的理解:

使用闭包主要是为了设计私有的方法和变量。

闭包的优点是可以避免全局变量的污染，缺点是闭包会

常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。

闭包三个特性:

1.函数嵌套函数;2.函数内部可以引用外部的参数和变量;3.参数和变量不会被垃圾回收机制回收

二.Cookie的弊端:

cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的

每个特定的域名下最多生成20个cookie;IE和Opera会清理近期最少使用的cookie，Firefox

理cookie;cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节;

;

会随机清

优点：

极高的扩展性和可用性

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

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

3.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。

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

偷盗者很可能拿到一个过期的

cookie。

缺点:

1.Cookie数量和长度的限制。

每个

domain最多只能有

20条cookie，每个

cookie

长度不能超过

4KB，

否则会被截掉。

2.安全性问题。

如果

cookie被人拦截了，那人就可以取得所有的

session信息。

即使加密也与事无补，

因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。

3.有些状态不可能保存在客户端。

例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。

如果我们把这个计数器保存在客户端，那么它起不到任何作用。

三.浏览器本地存储

在较高版本的浏览器中，js提供了sessionStorage和globalStorage。

在HTML5中提供了localStorage来

取代globalStorage。

html5中的WebStorage包括了两种存储方式：

sessionStorage和localStorage。

sessionStorage:

用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能

访问并且当会话结束后数据也随之销毁。

因此

sessionStorage不是一种持久化的本地存储，

仅仅是会话级别

的存储。

localStorage:

用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

四.webstorage和cookie的区别

WebStorage的概念和cookie相似，区别是

:

Webstorage:

1.是为了更大容量存储设计的。

2.WebStorage拥有

setItem,getItem,removeItem,clear

等方

法.3.WebStorage仅仅是为了在本地“存储”数据而生

Cookie:

1.大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪

费了带宽;2.cookie还需要指定作用域，不可以跨域调用。

3.需要前端开发者自己封装setCookie，getCookie.

4.cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在;

**localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem

等**

五.cookie

和session的区别：

1.cookie数据存放在客户的浏览器上，session数据放在服务器上。

2.cookie不是很安全，别人可以分析存放在本地的COOKIE并进行

COOKIE

欺骗考虑到安全应当使

用session。

3.session会在一定时间内保存在服务器上。

当访问增多，会比较占用你服务器的性能考虑到减轻服务

器性能方面，应当使用COOKIE。

4.单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

5.所以个人建议:

将登陆信息等重要信息存放为SESSION其他信息如果需要保留,可以放在COOKIE中

六.display:

none和visibility:

hidden的区别？

display:

none:

隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。

visibility:

hidden:

隐藏对应的元素，但是在文档布局中仍保留原来的空间。

七.CSS中link和@import的区别是？

1.link属于HTML标签，而@import是CSS提供的;

2.页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

3.import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

4.link方式的样式的权重高于@import的权重.

八.position:

absolute和float属性的异同

共同点：

对内联元素设置`float`和`absolute`属性，可以让元素脱离文档流，并且可以设置其宽高。

不同点：

float仍会占据位置，position会覆盖文档流中的其他元素。

九.介绍一下box-sizing属性？

box-sizing属性主要用来控制元素的盒模型的解析模式。

默认值是

content-box。

content-box：

让元素维持W3C的标准盒模型。

元素的宽度

/高度由border+padding+content的宽度/

高度决定，设置width/height

属性指的是content部分的宽/高

border-box：

让元素维持

IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。

设置

width/height属性

指的是border

+

padding+

content

标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺

寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

十.CSS选择符有哪些？

哪些属性可以继承？

优先级算法如何计算？

CSS3新增伪类有那些？

1.id选择器（#myid）

2.类选择器（.myclassname）3.标签选择器（div,h1,p）

4.相邻选择器（h1

+p）5.子选择器（ul>li）6.后代选择器（lia）

7.通配符选择器（*）8.属性选择器（a[rel="exter

nal"]）9.伪类选择器（a:

hover,li:

nth-child

）

可继承的样式：

font-size

font-family

color,text-indent;

不可继承的样式：

border

paddingmarginwidth

height

;

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

;

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

CSS3新增伪类举例：

p:

first-of-type

选择属于其父元素的首个

;元素的每个

元素。

p:

last-of-type

选择属于其父元素的最后

;元素的每个

;

元素。

p:

only-of-type

选择属于其父元素唯一的

;元素的每个

;

元素。

p:

only-child

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

;

元素。

p:

nth-child

（2）

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

;元素。

:

enabled

:

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

:

checked

:

单选框或复选框被选中。

十一.position的值，relative和absolute分别是相对于谁进行定位的？

absolute:

生成绝对定位的元素，相对于最近一级的定位不是

static的父元素来进行定位。

fixed（老I

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

relative:

生成相对定位的元素，相对于其在普通流中的位置进行定位。

static默认值。

没有定位，元素

出现在正常的流中

十二.CSS3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow），对文字加特效（text-shadow），线性渐变（gradient），旋转（transform）transform:

rotate（9deg）scale（0.85,0.90）translate（0px,-30px）skew（-9deg,0deg）;旋

转,缩放,定位,倾斜增加了更多的

CSS选择器多背景

rgba

在CSS3中唯一引入的伪元素是

:

:

selection.

媒体

查询，多栏布局

border-image

十三.XML和JSON的区别？

1.数据体积方面。

JSON相对于XML来讲，数据的体积小，传递的速度更快些。

2.数据交互方面。

JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。

3.数据描述方面。

JSON对数据的描述性比

4.传输速度方面。

JSON的速度要远远快于

十四.对BFC规范的理解？

XMLXML

较差。

。

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会

影响到外面的元素。

在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会

发生折叠。

（W3CCSS2.1规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的

关系和相互作用

.）

十五.解释下

CSSsprites，以及你要如何在页面或网站中使用它。

CSSSprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-imag

e”，“background-repeat，”“background-position的”组合进行背景定位，background-position可以用数字能精

确的定位出背景图片的位置。

这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并

发，但是也有限制，一般浏览器都是6个。

对于未来而言，就不需要这样做了，因为有了http2。

十六.说说你对语义化的理解？

1.去掉或者丢失样式的时候能够让页面呈现出清晰的结构

2.有利于SEO：

和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：

爬虫依赖于标签来确定上下文和各个关键字的权重；

3.方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

4.便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循

W3C

标准的团队都遵

循这个标准，可以减少差异化。

十七.Doctype作用?

严格模式与混杂模式如何区分？

它们有何意义?

1.

DOCTYPE>声明位于文档中的最前面，处于标签之前。

告知浏览器以何种模式来渲染文档。

2.严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。

3.在混杂模式中，页面以宽松的向后兼容的方式显示。

模拟老式浏览器的行为以防止站点无法工作。

4.DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

十八.你知道多少种Doctype文档类型？

该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML文档。

HTML

4.01规定了三种文档类型：

Strict、Transitional以及Frameset。

XHTML1.0规定了三种XML文档类

型：

Strict、Transitional以及Frameset。

Standards（标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

十九.HTML与XHTML二者有什么区别

1.所有的标记都必须要有一个相应的结束标记;2.所有标签的元素和属性的名字都必须使用小写;3.所有的XML标记都必须合理嵌套;4.所有的属性必须用引号""括起来;5.把所有<和&特殊符号用编码表

示;6.给所有属性赋一个值;7.不要在注释内容中使“--”;8.图片必须有说明文字;二十.常见兼容性问题？

1.png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.

2.浏览器默认的margin和padding不同。

解决方案是加一个全局的*{margin:

0;padding:

0;}来统一。

3.IE6双边距bug:

块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

4.浮动ie产生的双倍距离（IE6双边距问题：

在IE6下，如果对元素设置了浮动，同时又设置了margi

n-left或margin-right，margin值会加倍。

）

之下IE会产生20px的距离，解决方案是在

内属性。

（_这个符号只有ie6会识别）

#box{float:

left;width:

10px;margin:

000100px;}这种情况

float的标签样式控制中加入——_display:

inline;将其转化为行

5.渐进识别的方式，从总体中逐渐排除局部。

首先，巧妙的使用“9”这一标记，将IE游览器从所有情况中分离出来。

接着，再次使用“+”将IE8

和

IE7、IE6分离开来，这样

IE8

已经独立识别。

refox

6.IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute（）获取自定义属性;Fi

下,只能使用getAttribute（）获取自定义属性.解决方法:

统一通过getAttribute（）获取自定义属性.

7.IE下,event对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,

但是没有x,y属性.

8.解决方法：

（条件注释）缺点是在

9.Chrome中文界面下默认会将小于

it-text-size-adjust:

none;解决.

IE浏览器下可能会增加额外的

12px的文本强制按照12px

HTTP请求数。

显示,可通过加入

CSS

属性

-webk

10.超链接访问过后hover样式就不出现了被点击访问过的超链接样式不在具有hover和active了解决

方法是改变CSS属性的排列顺序:

L-V-H-A:

a:

link{}a:

visited{}a:

hover{}a:

active{}

11.怪异模式问题：

漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模

式。

为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。

现在可以使用[html5]（h

ttp:

//www.w3.org/TR/html5/single-page.html）推荐的写法：

12.上下margin重合问题ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是

margin-top和margin-bottom却会发生重合。

解决方法，养成良好的代码编写习惯，同时采用margin-top

或者同时采用margin-bottom。

13.ie6对png图片格式支持不好（引用一段脚本处理）

二十一.解释下浮动和它的工作原理？

清除浮动的技巧

浮动元素脱离文档流，不占据空间。

浮动元素碰到包含它的边框或者浮动元素的边框停留。

1.使用空标签清除浮动。

这种方法是在所有浮动标签后面添加一个空标签定义cssclear:

both.弊端就

是增加了无意义标签。

2.使用overflow。

给包含浮动元素的父标签添加css属性overflow:

auto;zoom:

1;zoom:

1用于兼容IE6。

3.使用after伪对象清除浮动。

该方法只适用于非IE浏览器。

具体写法可参照以下示例。

使用中需注意:

该方法中必须为需要清除浮动元素的伪对象中设置height:

0，否则该元素会比实际高出

若干像素.

二十二.浮动元素引起的问题和解决办法？

浮动元素引起的问题：

1.父元素的高度无法被撑开，影响与父元素同级的元素;2.与浮动元素同级的非浮动元素（内联元素）会跟随其后;3.若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响

页面显示的结构

解决方法：

使用CSS中的clear:

both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下

样式，给父元素添加clearfix样式

二十三.清除浮动的几种方法

1.额外标签法，

both;">