美文网首页
我面试被问到几个问题整理答案

我面试被问到几个问题整理答案

作者: myfocus | 来源:发表于2016-08-11 17:00 被阅读0次

关于问题的答案都是找到的比较正确的,仅起到参考作用,关于问题100%面试题...

就这样


1.doctype有什么用?

有什么用?

声明位于文档中的最前面的位置,处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

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

HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。

1)HTML Strict DTD:

如果您需要干净的标记,免于表现层的混乱,请使用此类型。不支持Frameset。请与层叠样式表(CSS)配合使用:

http://www.w3.org/TR/html4/strict.dtd">

2)HTML Transitional DTD:

Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。不支持Frameset。如果您的读者使用了不支持层叠样式表(CSS)的浏览器以至于您不得不使用 HTML 的呈现特性时,请使用此类型:

http://www.w3.org/TR/html4/loose.dtd">

3)Frameset DTD:

Frameset DTD 应当被用于带有框架的文档。除 frameset 元素取代了 body 元素之外,Frameset DTD 等同于 Transitional DTD:

http://www.w3.org/TR/html4/frameset.dtd">

PS:同时XHTML 1.0 也规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。


2.Quicks模式和Strict模式对比

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


3.cookie  localStoragesessionStorage 前端储存的方式

转载网址:http://mp.weixin.qq.com/s?__biz=MzIwNjQwMzUwMQ==&mid=2247484013&idx=1&sn=270295c8a6fe604d22e71d8087297d35&scene=2&srcid=0725MecycQlJwqHEuiYMRaas#rd

微信公众号  前端之巅 可自行关注

侯禹,现就职于百度,从事Web前端开发,热爱技术分享。本文将和大家一起聊一聊前端存储那些事儿。

在Web开发越来越复杂的今天,前端拥有的能力也越来越多。其中最重要的一项莫过于Web存储。开发者们如果使用得当,这些存储可以帮助我们提升网页的性能与灵活度。本文不讲个中的细节,只讲各种前端存储的利弊,与各类存储的应用场景。毕竟这些技术的细节在网上随处可见,如果读者你决定使用的话,再去细查也不迟。


4 跨域的方式

参考地址:http://www.cnblogs.com/2050/p/3191744.html


5.闭包Closure

转载地址:http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html

学习Javascript闭包(Closure)

作者:阮一峰


6.MVC设计模式

转载地址:http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html

作者:阮一峰

注:MVC 阮老师的这篇博客争议较大

相关文章

网友评论

      本文标题:我面试被问到几个问题整理答案

      本文链接:https://www.haomeiwen.com/subject/ldrssttx.html