内附答案各大企业HTML5笔试面试题

今天分享一篇关于百度、阿里巴巴、腾讯HTML+CSS面试笔试题,所有内容来自作者亲身经历,建议看完收藏,对你以后面试会有很大帮助。

注:周一分享文章“各大互联网公司CSS笔试面试题”!

很多面试题是我自己面试BAT亲身经历碰到的。整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益。

而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正确,如有错误或有更好的解法,还请斧正。

前面几题是会很基础,越下越有深度。

HTML5笔试面试题大汇总

1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

IE:trident内核

Firefox:gecko内核

Safari:webkit内核

Opera:以前是presto内核,Opera现已改用GoogleChrome的Blink内核

Chrome:Blink(基于webkit,Google与OperaSoftware共同开发)

2.每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗?

答案:!DOCTYPE声明位于文档中的最前面的位置,处于html标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。(重点:告诉浏览器按照何种规范解析页面)

3.Quirks模式是什么?它和Standards模式有什么区别

答案:

从IE6开始,引入了Standards模式,标准模式中,浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。

在IE6之前CSS还不够成熟,所以IE5等之前的浏览器对CSS的支持很差,IE6将对CSS提供更好的支持,然而这时的问题就来了,因为有很多页面是基于旧的布局方式写的,而如果IE6支持CSS则将令这些页面显示不正常,如何在即保证不破坏现有页面,又提供新的渲染机制呢?

在写程序时我们也会经常遇到这样的问题,如何保证原来的接口不变,又提供更强大的功能,尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支,即当某个参数为真时,我们就使用新功能,而如果这个参数不为真时,就使用旧功能,这样就能不破坏原有的程序,又提供新功能。IE6也是类似这样做的,它将DTD当成了这个“参数”,因为以前的页面大家都不会去写DTD,所以IE6就假定如果写了DTD,就意味着这个页面将采用对CSS支持更好的布局,而如果没有,则采用兼容之前的布局方式。这就是Quirks模式(怪癖模式,诡异模式,怪异模式)。

区别:

总体会有布局、样式解析和脚本执行三个方面的区别。

盒模型:在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在Quirks模式下,IE的宽度和高度还包含了padding和border。

设置行内元素的高宽:在Standards模式下,给span等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效。

设置百分比的高度:在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的用margin:0auto设置水平居中:使用margin:0auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效。

(还有很多,答出什么不重要,关键是看他答出的这些是不是自己经验遇到的,还是说都是看文章看的,甚至完全不知道。)

4.div+css的布局较table布局有什么优点?

改版的时候更方便只要改css文件。

页面加载速度更快、结构化清晰、页面显示简洁。

表现与结构相分离。

易于优化(seo)搜索引擎更友好,排名更容易靠前。

5.a:img的alt与title有何异同?b:strong与em的异同?

答案:

a:

alt(alttext):为不能显示图像、窗体或applets的用户代理(UA),alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成tooltip显示)

title(tooltip):该属性为设置该属性的元素提供建议性的信息。

b:

strong:粗体强调标签,强调,表示内容的重要性

em:斜体强调标签,更强烈强调,表示内容的强调点

6.你能描述一下渐进增强和优雅降级之间的不同吗?

渐进增强progressiveenhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级gracefuldegradation:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。

“优雅降级”观点

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段,并把测试对象限定为主流浏览器(如IE、Mozilla等)的前一个版本。

在这种设计范例下,旧版的浏览器被认为仅能提供“简陋却无妨(poor,butpassable)”的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所   (自由发挥)

7.为什么利用多个域名来存储网站资源会更有效?

CDN缓存更方便

突破浏览器并发限制

节约cookie带宽

节约主域名的连接数,优化页面响应速度

防止不必要的安全问题

8.请谈一下你对网页标准和标准制定机构重要性的理解。

(无标准答案)网页标准和标准制定机构都是为了能让web发展的更‘健康’,开发者遵循统一的标准,降低开发难度,开发成本,SEO也会更好做,也不会因为滥用代码导致各种BUG、安全问题,最终提高网站易用性。

9.请描述一下cookies,sessionStorage和localStorage的区别?

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

webstorage和cookie的区别

WebStorage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。

除此之外,WebStorage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在,而WebStorage仅仅是为了在本地“存储”数据而生。

10.简述一下src与href的区别。

答案:

src用于替换当前元素,href用于在当前文档和引用资源之间确立联系。

src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。

scriptsrc=”js.js”/script

当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是HypertextReference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果我们在文档中添加

linkhref=”







































贵阳治疗白癜风医院
哪家医院治疗白癜风好



转载请注明:http://www.guyukameng.com/html/11154.html