前端开发面试题及答案

1、前端开发面试题及答案【篇一： web 前端开发工程师笔试题及答案】xt>1.html的含义是什么，其主体部分由什么标记构成？html 是一种标准，一种规范，它通过标记符号来标记要显示在网页中的各个部分，被称为超文本标记语言。标记和之间的内容构成了 html 的主体部分。网页中所有内容，包括文字，图片，连接都包含在此标记符内。2. 说明在网页设计中 div 标签的作用div 中文名被称为 “层次 ”可以把文档分割成独立的，不同的部分。它可以用作严格的组织工具，并且不适用任何格式与其他关联。3.css 指的是什么？在网页设计中为什么要用到 css 技术？ css 是级联样式表，用来进行网页风

2、格设计。使用样式表可以统一的控制 html 中各标志的显示属性。精确的确定元素的位置，扩充网页外观和特殊效果的显示能力。4.css 中 id 和 class怎么定义，哪个定义的优先级别高？如果class 定义一个 html 元素没边框，而 id 定义这个元素有边框，结果呢？ div class= ”a1”,id= ”a2”/div先听 id 的。5.ie6 下为什么不能第一1px 左右高度的容器？ie6 默认的行高造成的。6. 怎样才能让层显示在 flash 之上？给 flash 设置透明， param value=transparent。7. 怎样使一个层垂直剧中于浏览器中？8. firef

3、ox 嵌套 div 标签的剧中问题假定有如下情况：div id=”a”div id=”b”/div/div 如果要实现b 在 a 中剧中放置该如何实现？解决办法就是除了需要在a 中设置 text-align属性为center之后，还需要设置b 的横向 margin为 auto 。例如设置b 的 css 样式为：margin: 0 auto;所以，设置如下就可以实现居中：div id=a style=width:200px;border:1px solid red;text-align:center;div id=b style=background-color:blue;width:30px;

4、margin:0 autonbsp;/div /div9.web 标准网站有哪些优点？下载浏览速度快。被更多的用户访问。推广时被更多的机器访问。更少的代码，易于维护，宽带要求降低，降低成本，更容易被搜索引擎搜索到。改版方便，不需要改变内容。提供打印页面不用复制。10. 怎样解决超链接访问过后 hover 样式就不出现的问题。 改变css 属性排列的顺序 l-v-h-a （link ,visted,hover,active.）【篇二： web 前端研发工程师笔试题(选择题带答案 )】a)innerhtmlb)innertextc) 通过设置层的隐藏和显示来实现d) 通过设置层的样式属性的 dis

5、play 属性2. 当按键盘 a 时，使用 onkeydown 事件打印 event.keycode 的结果是（ a ）a)65b)13c)97d)373. 在 javascript里，下列选项中不属于数组方法的是（b）；a)sort()b)length()c)concat()d)reverse()4. 下列哪一个选项可以用来检索被选定的选项的索引号?(b)a)disabledb)selectedindexc)optiond)multiple5. 希望图片具有 ”提交 ”按钮同样的功能 ,该如何编写表单提交 ?(a ) a) 在图片的 onclick 事件中手动提交b) 在图片上添加 onsu

6、bmit 事件c) 在图片的 onsubmit 事件中手动提交 d) 在表单中自动提交6. 使 div 层和文本框处在同一行的代码正确的是(d );a)b)c)d)7. 下列选项中 ,描述正确的是 (选择两项 ) 。 ( ad )a)options.add(new option(?a?,a?)可以动态添加一个下拉列表选项b)option.add(new option(?a?,a?)可以动态添加一个下拉列表选项c)new option(?a?,a?)中 ?a 表示列表选项的值,?a 用于在页面中显示d)new option(?a?,a?)中 ?a 表示列表选项的值,?a 用于在页面中显示8. 、

7、 var emp = new array(3);for(var i in emp)以下答案中能与for 循环代码互换的是: （选择一项）。 (d )a for(var i =0; iemp; i+)b for(var i =0; iarray(3); i+)c for(var i =0; iemp.length(); i+)d for(var i =0; iemp.length; i+)9. 制作级联菜单功能时调用的是下拉列表框的（a ）事件。a)onchangeb)onfocusc)selectedd)onclick10. 下列声明数组的语句中，错误的选项是（c ）。a)var arry=

8、new array()b)var arry=new array(3)c)var arry=new array(3)(4)d)var arry=new array(?3?,?4?)11. 下列属性哪一个能够实现层的隐藏 ? （ c ）a)display:falsb)display:hiddenc)display:noned)display:” ”12. 下列哪一个选项不属于 document 对象的方法 ? （d ）a)focus()b)getelementbyid()c)getelementsbyname()d)bgcolor()13. 下列哪项是按下键盘事件 (ab ) a)onkeydow

9、nb)onkeypressc)keycoded)onmouseover是（ b ）a) 把用户的正确信息提交给服务器b) 检查提交的数据必须符合实际c) 使得页面变得美观、大方d) 减轻服务器端的压力15. 、 display 属性值的常用取值不包括 (c )a)inlineb)blockc)hiddend)none16. 以下有关 pixeltop 属性与 top 属性的说法正确的是。 (d ) a) 都是 location 对象的属性b) 使用时返回值都是字符串c) 都是返回以像素为单位的数值 d) 以上都不对17. 使用 open 方法打开具有浏览器工具条 ,地址栏 ,菜单栏的窗口，下列

10、选项正确的是 _d_a)open(x.html,hi,toolbas=1,scrollbars=1,status=1); b)open(hi,scrollbars=1,location=1,status=1); c)open(x.html,status=yes,menubar=1,location=1); d)open(x.html,hi,toolbas=yes,menubar=1,location=1);18. 下面关闭名为 mydiv 的层的代码正确的是 (c ) a)document.getelementbyid(mydiv).style.display=none; b)document

11、.getelementbyid(mydiv).style.display=none; c)document.getelementbyid(mydiv).style.display=none; d)document.getelementbyid(mydiv).style.display=none;19. 为什么要使用 div+css 布局形式与内容分离大大减少页面代码，提高页面浏览速度结构清晰，有利于seo缩短改版时间，布局更方便一次设计，多次使用20. block 元素的特点是什么 ? 哪些元素默认为 block 元素总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的 1

12、00% ，除非设定一个宽度是块元素的有： , 和 21. 、 inline 元素的特点是什么 ?哪些元素属于 inline 元素 ? 和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。是 inline 元素的有： , , , ,和。22. 、 javascript 中表达式 parseint( “x8x8 ”)+pasefloat(?8?)的结果是什么 ?( c)a)8+8b)88c)16d) “8”+?823. string 对象的方法不包括 (c ) a)charat() ；b)substring()c)lengthd)touppercase()2

13、4. 关于 settimeout( “check ”,10)中说法正确的是 ( d) a) 程序循环执行10次b)check函数每 10 秒执行一次c)10 做为参数传给函数checkd)check函数每 10 毫秒执行一次25. 以下哪个单词不属于 javascript 关键字：（ c） a)with b)parentc)classd)void【篇三： 2015 前端面试题 (含答案 )】面试题 -答案产品部 beijing前端开发面试知识点大纲：htmlcss：对 web 标准的理解、浏览器内核差异、兼容性、布局、盒子模型、选择器优先级及使用、html5javascript：hack 、

14、css3、css 基本功：、移动端适应数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、 nodejs 、json 、ajax 等。其他：http 、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、 seo 、 ued 、架构、职业生涯作为一名前端工程师，无论工作年头长短都应该必须掌握的知识点：1、dom 结构 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。2、dom 操作 如何添加、移除、移动、复制、创建和查找节点等。3、事件 如何使用事件，以及ie 和标准 dom 事件模型之间存在的差别。4、xm

15、lhttprequest 这是什么、怎样完整地执行一次get请求、怎样检测错误。5、严格模式与混杂模式 如何触发这两种模式，区分它们有何意义。6、盒模型 外边距、内边距和边框之间的关系，及ie8以下版本的浏览器中的盒模型7、块级元素与行内元素 怎么用 css 控制它们、以及如何合理的使用它们8、浮动元素 怎么使用它们、它们有什么问题以及怎么解决这些问题。9、html 与 xhtml 二者有什么区别，你觉得应该使用哪一个并说出理由。10 、json 作用、用途、设计结构。2/28html一、 doctype作用 ? 严格模式与混杂模式如何区分？它们有何意义?（1）、 !doctype声明位于文档

16、中的最前面，处于html 标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。（ 2）、严格模式的排版和 js 运作模式是 以该浏览器支持的最高标准运行。（ 3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。（ 4）、 doctype 不存在或格式不正确会导致文档以混杂模式呈现。二、 行内元素有哪些？块级元素有哪些？空 (void) 元素有那些？（ 1） css 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认的 display 值，比如 div 默认 display 属性值为“block ”，成为 “块级

17、”元素； span 默认 display属性值为 “inline是“行内 ”元素。（2）行内元素有： a b span img input select strong（强调的语气） 块级元素有： div ul ol li dl dt dd h1 h2 h3 h4 p（3）知名的空元素：brhrimginputlinkmeta鲜为人知的是：，”areabasecolcommandembedkeygenparamsourcetrackwbr 三、 link 和import 的区别是？（ 1） link 属于 xhtml 标签，而 import 是 css 提供的 ;（ 2）页面被加载的时， lin

18、k 会同时被加载，而 import 引用的 css 会等到页面被加载完再加载 ;（ 3） import 只在 ie5 以上才能识别，而 link 是 xhtml 标签，无兼容问题 ;（ 4） link 方式的样式的权重 高于 import 的权重 .四、 浏览器的内核分别是什么?* ie 浏览器的内核 trident 、 mozilla 的 gecko 、chrome 的 blink （webkit 的分支）、 opera 内核原为 presto ，现为 blink ；3/28五、 常见兼容性问题？* png24位的图片在ie6 浏览器上出现背景，解决方案是做成png8.* 浏览器默认的 ma

19、rgin 和 padding 不同。解决方案是加一个全局的*margin:0;padding:0;来统一。* ie6 双边距 bug: 块属性标签 float 后，又有横行的 margin 情况下，在 ie6 显示 margin 比设置的大。浮动 ie 产生的双倍距离 #box float:left; width:10px; margin:0 0 0 100px;这种情况之下 ie 会产生 20px 的距离，解决方案是在 float 的标签样式控制中加入 _display:inline; 将其转化为行内属性。 (_ 这个符号只有 ie6 会识别 )渐进识别的方式，从总体中逐渐排除局部。首先，巧

20、妙的使用 “9”这一标记，将 ie 游览器从所有情况中分离出来。接着，再次使用 “+”将 ie8 和 ie7 、 ie6 分离开来，这样 ie8 已经独立识别。css.bbbackground-color:#f1ee18;/*所有识别 */.background-color:#00deff9; /*ie6、7、8 识别 */+background-color:#a200ff;/*ie6、7 识别 */_background-color:#1e0bd1;/*ie6识别 */* ie 下 ,可以使用获取常规属性的方法来获取自定义属性,也可以使用getattribute() 获取自定义属性 ;fir

21、efox 下 ,只能使用 getattribute() 获取自定义属性 . 解决方法 :统一通过 getattribute() 获取自定义属性 .* ie 下,even 对象有 x,y 属性 ,但是没有 pagex,pagey 属性 ; firefox 下 ,event 对象有 pagex,pagey 属性 ,但是没有 x,y 属性 .* 解决方法：（条件注释）缺点是在 ie 浏览器下可能会增加额外的 http 请求数。4/28* chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 css 属性-webkit-text-size-adjust: none;解决 .超链接访问过后不在具有 hoverhover 样式就不出现了被点击