前端开发实习⾯试题（Web篇）
1.http有哪些请求⽅式？
GET⽅法
发送⼀个请求来取得服务器上的某⼀资源
POST⽅法
向URL指定的资源提交数据或附加新的数据
PUT⽅法
跟POST⽅法很像，也是想服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，⽽POST没有
HEAD⽅法
只请求页⾯的⾸部
DELETE⽅法
删除服务器上的某资源
OPTIONS⽅法
它⽤于获取当前URL所⽀持的⽅法。如果请求成功，会有⼀个Allow的头包含类似“GET,POST”这样的信息
TRACE⽅法
TRACE⽅法被⽤于激发⼀个远程的，应⽤层的请求消息回路
CONNECT⽅法
把请求连接转换到透明的TCP/IP通道
2.http的状态码有哪⼏种？分别代表什么意思？
1XX：信息状态码
100 Continue 继续，⼀般在发送post请求时，已发送了http header之后服务端将返回此信息，表⽰确认，之后发送具体参数信息。
2XX：成功状态码
200 OK 正常返回信息。
201 Created 请求成功并且服务器创建了新的资源。
202 Accepted 服务器已接受请求，但尚未处理。
3XX：重定向
301 Moved Permanently 请求的⽹页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使⽤ GET 请求新的 URI。
304 Not Modified ⾃从上次请求后，请求的⽹页未修改过。
4XX：客户端错误
400 Bad Request 服务器⽆法理解请求的格式，客户端不应当尝试再次使⽤相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁⽌访问。
404 Not Found 不到如何与 URI 相匹配的资源。
5XX: 服务器错误
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时⽆法处理请求（可能是过载或维护）。
<请求和post请求的区别？
matlab写代码教程get: 从指定的资源请求数据，⽤于获取数据。
post: 向指定的资源提交要被处理的数据，⽤于将数据发送给服务器。
get参数通过url传递，post放在request body中，因此get安全性较差，post相对安全，所以不能⽤get来传递敏感参数
get请求可被缓存，post请求不会被缓存
get请求可被收藏为书签，post不能被收藏为书签特斯拉召回36万辆车
get请求保留在浏览器历史记录中，post请求不会保留在浏览器历史记录中
get请求有长度限制，post请求对数据长度没有要求
get和post本质上就是TCP链接，并⽆差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应⽤过程中体现出⼀些不同get产⽣⼀个TCP数据包；postT产⽣两个TCP数据包
4.介绍⼀下你对浏览器内核的理解？常见浏览器的内核是什么？
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎
渲染引擎：负责取得⽹页的内容（HTML、XML、图像等等）、整理讯息（例如加⼊CSS等），以及计算⽹页的显⽰⽅式，然后会输出⾄显⽰器或打印机。浏览器的内核的不同对于⽹页的语法解释会有不同，所以渲染的效果也不相同。所有⽹页浏览器、电⼦邮件客户端以及其它需要编辑、显⽰⽹络内容的应⽤程序都需要内核
JS引擎则：解析和执⾏javascript来实现⽹页的动态效果
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独⽴，内核就倾向于只指渲染引擎
不同浏览器的内核也不尽相同，所以各个浏览器对⽹页的解析存在⼀定的差异。
浏览器内核主要分为两种，⼀是渲染引擎，另⼀个是js 引擎，内核更加倾向于说渲染引擎。
常见的浏览器内核：
不同浏览器的默认样式存在差异，可以使⽤ Normalize.css 抹平这些差异。
5.如何解决常见浏览器兼容性问题？
（1）不同浏览器的标签默认的外补丁和内补丁不同
问题症状：随便写⼏个标签，不加样式控制的情况下，各⾃的margin 和padding差异较⼤。
碰到频率:100%
解决⽅案：CSS⾥ *{margin:0;padding:0;}
备注：这个是最常见的也是最易解决的⼀个浏览器兼容性问题，⼏乎所有的CSS⽂件开头都会⽤通配符*来设置各个标签的内外补丁是0。
web前端基础面试题（2）块属性标签float后，⼜有横⾏的margin情况下，在IE6显⽰margin⽐设置的⼤
问题症状：常见症状是IE6中后⾯的⼀块被顶到下⼀⾏
碰到频率：90%（稍微复杂点的页⾯都会碰到，float布局最常见的浏览器兼容问题）
解决⽅案：在float的标签样式控制中加⼊ display:inline；将其转化为⾏内属性
备注：我们最常⽤的就是div+CSS布局了，⽽div就是⼀个典型的块属性标签，横向布局的时候我们通常都是⽤div float实现的，横向的间距设置如果⽤margin实现，这就是⼀个必然会碰到的兼容性问题。
（3）设置较⼩⾼度标签（⼀般⼩于10px），在IE6，IE7，遨游中⾼度超出⾃⼰设置⾼度
问题症状：IE6、7和遨游⾥这个标签的⾼度不受控制，超出⾃⼰设置的⾼度
碰到频率：60%
解决⽅案：给超出⾼度的标签设置overflow:hidden；或者设置⾏⾼line-height ⼩于你设置的⾼度。
备注：这种情况⼀般出现在我们设置⼩圆⾓背景的标签⾥。出现这个问题的原因是IE8之前的浏览器都会给标签⼀个最⼩默认的⾏⾼的⾼度。即使你的标签是空的，这个标签的⾼度还是会达到默认的⾏⾼。
（4）⾏内属性标签，设置display:block后采⽤float布局，⼜有横⾏的margin的情况，IE6间距bug
问题症状：IE6⾥的间距⽐超过设置的间距
碰到⼏率：20%
解决⽅案：在display:block；后⾯加⼊display:inline;display:table;
备注：⾏内属性标签，为了设置宽⾼，我们需要设置display:block;(除了input标签⽐较特殊)。在⽤floa
t布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本⾝就是⾏内属性标签，所以我们再加上display:inline的话，它的⾼宽就不可设了。这时候我们还需要在display:inline后⾯加⼊display:talbe。
（5）图⽚默认有间距
问题症状：⼏个img标签放在⼀起的时候，有些浏览器会有默认的间距，加了问题⼀中提到的通配符也不起作⽤。
碰到⼏率：20%
解决⽅案：使⽤float属性为img布局
备注：因为img标签是⾏内属性标签，所以只要不超出容器宽度，img标签都会排在⼀⾏⾥，但是部分浏览器的img标签之间会有个间距。去掉这个间距使⽤float是正道。（我的⼀个学⽣使⽤负margin，虽然能解决，但负margin本⾝就是容易引起浏览器兼容问题的⽤法，所以我禁⽌他们使⽤）
（6）标签最低⾼度设置min-height不兼容
问题症状：因为min-height本⾝就是⼀个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容
碰到⼏率：5%
解决⽅案：如果我们要设置⼀个标签的最⼩⾼度200px，需要进⾏的设置为：{min-height:200px; height:auto !important;
height:200px; overflow:visible;}
备注：在B/S系统前端开时，有很多情况下我们⼜这种需求。当内容⼩于⼀个值（如300px）时。容器的⾼度为300px；当内容⾼度⼤于这个值时，容器⾼度被撑⾼，⽽不是出现滚动条。这时候我们就会⾯临这个兼容性问题。
（7）透明度的兼容CSS设置
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;linspace函数不显示间隔
opacity: 0.5;
}
如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。
IE6认识的hacker 是下划线_ 和星号 *
IE7 遨游认识的hacker是星号 *
⽐如这样⼀个CSS设置：
height:300px;*height:200px;_height:100px;
IE6浏览器在读到height:300px的时候会认为⾼时300px；继续往下读，他也认识*heihgt， 所以当IE6读到*height:200px的时候会覆盖掉前⼀条的相冲突设置，认为⾼度是200px。继续往下读，IE6还认识_height，所以他⼜会覆盖掉200px⾼的设置，把⾼度设置为100px；
IE7和遨游也是⼀样的从⾼度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它
们不认识_height。所以它们会把⾼度解析为200px，剩下的浏览器只认识第⼀个height:300px；所以他们会把⾼度解析为300px。因为优先级相同且想冲突的属性设置后⼀个会覆盖掉前⼀个，所以书写的次序是很重要的。
（8）IE6双边距问题：在 IE6中设置了float , 同时⼜设置margin , 就会出现边距问题
解决⽅案：设置display:inline;
（9）当标签的⾼度设置⼩于10px，在IE6、IE7中会超出⾃⼰设置的⾼度
解决⽅案：超出⾼度的标签设置overflow:hidden，或者设置line-height的值⼩于你的设置⾼度
（10）图⽚默认有间距
解决⽅案：使⽤float 为img 布局
（11）IE9⼀下浏览器不能使⽤opacity
解决⽅案：
opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opa
city = 50);
（12）边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最⼤值，舍弃最⼩值；
exception下载解决⽅案：为了不让边重叠，可以给⼦元素增加⼀个⽗级元素，并设置⽗级元素为overflow:hidden；
（13）cursor:hand 显⽰⼿型在safari 上不⽀持
解决⽅案：统⼀使⽤ cursor:pointer
（14）两个块级元素，⽗元素设置了overflow:auto；⼦元素设置了position:relative ；且⾼度⼤于⽗元素，在IE6、IE7会被隐藏⽽不是溢出；
解决⽅案：⽗级元素设置position:relative
（15）IE6 背景闪烁的问题
问题：链接、按钮⽤ CSSsprites 作为背景，在 ie6 下会有背景图闪烁的现象。原因是 IE6 没有将背景图缓存，每次触发 hover 的时候都会重新加载
解决：可以⽤ JavaScript 设置 ie6 缓存这些图⽚：
（16）解决在 IE6 下，列表与⽇期错位的问题
⽇期<span> 标签放在标题 <a> 标签之前即可
（17）解决 IE6不⽀持 min-height属性的问题
min-height: 350px;
_height: 350px;
（18）让 IE7、IE8 ⽀持 CSS3中background-size属性
由于 background-size 是 CSS3 新增的属性，所以 IE 低版本⾃然就不⽀持了，但是⽼外写了⼀个 htc ⽂件，名叫 ，使⽤该⽂件能够让IE7、IE8 ⽀持 background-size 属性。其原理是创建⼀个 img 元素插⼊到容器中，并重新计算宽度、⾼度、left、top 等值，模拟background-size 的效果。
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-image: url('img/37.png');
background-repeat: no-repeat;
background-size: cover;
-ms-behavior: url('css/backgroundsize.min.htc');
behavior: url('css/backgroundsize.min.htc');
}
（19）IE6-7 line-height失效的问题
问题：在ie 中 img 与⽂字放⼀起时，line-height 不起作⽤
解决：都设置成 float
width:100%
java零基础看什么书width:100%这个东西在 ie ⾥⽤很⽅便，会向上逐层搜索 width 值，忽视浮动层的影响.
Firefox下搜索⾄浮动层结束，如此，只能给中间的所有浮动层加 width:100%才⾏，累啊。
opera这点倒学乖了，跟了 ie
cursor:hand
显⽰⼿型 cursor: hand，ie6/7/8、opera 都⽀持，但是safari 、 ff 不⽀持
cursor: pointer;
（20）td ⾃动换⾏的问题
问题：table 宽度固定，td ⾃动换⾏
解决：设置 Table 为 table-layout: fixed，td 为 word-wrap: break-word
（21）让层显⽰在 FLASH之上
想让层的内容显⽰在 flash 上，把 FLASH 设置透明即可
1、<param name=" wmode " value="transparent" />
2、<param name="wmode" value="opaque"/>
（22）键盘事件 keyCode兼容性写法
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论