web前端面试题及答案

1、web前端面试题及答案【篇一：2016前端面试题第一套含答案】高度a.display:inlineb.display:nonec.display:blockd.display:inherit2）css属性overflow属性定义溢出元素内容区的内容会如何处理。如果值为scroll,不论是否需要，用户代理都会提供一种滚动机制。truefalse3）新窗口打开网页，用到以下哪个值（）。a._selfb._blankc._topd._parent4）下面有关jquery事件的响应，描述错误的是？a.b.c.d.onclick鼠标点击某个对象onfocus元素失去焦点onload是某个页面的cssjs

2、html文档结构和图像被完成加载onmousedown某个鼠标按键被按下5）元素的alt和title有什么异同，选出正确的说法？不同的浏览器，表现一样a.alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字b.alt和title同时设置的时候，title作为图片的替代文字出现，alt是图片的解释文字c.以上说法都不正确6）下列js可以让一个input的背景颜色变成红色的是？a.inputelement.style.backgroundcolor=red;b.inputelement.backgroundcolor=red;c.inputelement.st

3、yle.backgroundcolor=#0000;d.inputelement.backgroundcolor=#0000;7）下面有关html5标签说法错误的有？a.audio标签定义声音，比如音乐或其他音频流b.canvas比如来自一个外部的新闻提供者的一篇新的文章，或者来自blog的文本，或者是来自论坛的文本。亦或是来自其他外部源内容c.menu标签定义菜单列表。当希望列出表单控件时使用该标签mand标签定义命令按钮，比如单选按钮、复选框或按钮8）下述有关css属性position的属性值的描述，说法错误的是？a.b.c.d.static:没有定位，元素出现在正常的流中fixed:生成

4、绝对定位的元素，相对于父元素进行定位relative:生成相对定位的元素，相对于元素本身正常位置进行定位。absolute:生成绝对定位的元素，相对于static定位以外的第一个祖先元素进行定位。9）下面符合一个有效的javascript变量定义规则的是？a.b.c.d._$te$t2withabc2a10）下面有关javascript中call和apply的描述，错误的是？a.b.c.d.call与aplly都属于totype的一个方法，所以每个function实例都有call、apply属性两者传递的参数不同，call函数第一个参数都是要传入给当前对象的对象，app

5、ly不是apply传入的是一个参数数组，也就是将多个参数组合成为一个数组珞入call传入的则是直接的参数列表。call方法可将一个函数的对象上下文从初始的上下文改变为由thisobj指定的新对象。11)什么会被打印在控制台上？b是局部变量还是全局变量(function()(vara=b=5;)();console.log(b);12)执行这段代码，输出什么结果。functiontest()(console.log(a);console.log(foo();vara=1;functionfoo()(return2;test();13)执行这段代码，输出什么结果。varfullname=johnd

6、oe;varobj=(fullname:colinihrig,prop:(fullname:aurelioderosa,getfullname:function()(returnthis.fullname;console.log(p.getfullname();vartest=p.getfullname;console.log(test();14)下面这个js程序的输出是什么：functionfoo()(vari=0;returnfunction()(console.log(i+);varf1=foo(),f2=foo();f1();f1();f2();15)下面这

7、个js程序的输出是什么：scriptlanguage=javascriptvarbb=1;functionaa(bb)(bb=2;alert(bb);aa(bb);alert(bb);/script16)doctype作用？严格模式与混杂模土-如何触发这两种模式，区分它们有何意义？17)css选择符有哪些？哪些属性可以继承？优先级算法如何计算？css3新增伪类有那些？18)谈谈this对象的理解。19)请用js实现全选和取消全选的功能，只需要写出js代码(可以使用jquery框架)inputtype=”checkbox”id=”checkall全选/divclass=”list”inputty

8、pe=”checkbox”name=”type”value=笑魂1inputtype=”checkbox”name=”type”value=这是2/div20)面试官问你有没有女/男朋友？答案1,c。内联元素加上display:block;后被块级化。块级元素一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。因此，可以定义其宽度和高度。,2,true。参数是scroll时候，必会出现滚动条。参数是auto时候，子元素内容大于父元素时出现滚动条。参数是visible时候，溢出的内容出现在父元素之外。参数是hidd

9、en时候，溢出隐藏。,选b。在html中通过a标签打开一个链接，通过a标签的target属性规定在何处打开链接文档。如果在标签a中写入target属性，则浏览器会根据target的属性值去打开与其命名或名称相符的框架frame或者窗口.在target中还存在四个保留的属性值如下，属性值值描述_blank在新窗口中打开被链接文档。_self默认。在相同的框架中打开被链接文档。_parent在父框架集中打开被链接文档。_top在整个窗口中打开被链接文档。framename在指定的框架中打开被链接文档。4,选b。onfocus获得焦点onblur失去隹占八、八、a这两个属性是有些重复了。在不同浏览器

10、里面表现有些不同。在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字。6,a#0000是不正确的写法，至少要为六位，应该是#ff0000a写法是正确的，有两种写法：document.getelementbyid(input).style.backgroundcolor=red;inputelement.style.backgroundcolor=#ff0000;7,b这里考察html标签的使用：audio标签定义声音，比如音乐或其他音频流。a正确。canvas标签定义图形，比如图表和其他图像。canvas标签只是图形容器，您必须使用脚本来绘制图形。b错

11、误，article标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自blog的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。menu标签定义命令的列表或菜单。menu标签用于上下文菜单、工具栏以及用于列出表单控件和命令。c正确command元素表示用户能够调用的命令。command标签可以定义命令按钮，比如单选按钮、复选框或按钮。只有当command元素位于menu元素内时，该元素才是可见的。否则不会显示这个元索，但是可以用它规定键盘快捷键。d正确。8,bstatic元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元索则会创建一个或多个行框，置于其

12、父元素中。relative元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。absolute元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。fixed元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。9,a正确;b是关键字；c有空格；d开头为数字；第一个字符必须是一个ascii字母(大小写均可)，或一个下划线(_)。注意第一个字符不能是数字。后续的字符必须是字母、

13、数字或下斯线。变量名称一定不能是保留字。10,b;call()方法和apply()方法的作用相同，他们的区别在于接收参数的方式不同。对于call(),第一个参数是this值没有变化，变化的是其余参数都直接传递给函数。(在使用call()方法时，传递给函数的参数必须逐个列举出来。使用apply()时，传递给函数的是参数数组)如下代码做出解释：functionadd(c,d)(returnthis.a+this.b+c+d;【篇二：web前端开发面试题赋答案】txt第一部分：用css实现布局让我们一起来做一个页面首先，我们需要一个布局。请使用css控制3个div,实现如下图的布局。第二部分：用ja

14、vascript优化布局由于我们的用户群喜欢放大看页面于是我们给上一题的布局做一次优化。当鼠标略过某个区块的时候，该区块会放大25%,并且其他的区块仍然固定不动。提示：也许，我们其他的布局也会用到这个放大的效果哦。可以使用任何开源代码，包括曾经你自己写的。关键字：javascript、封装、复用第三部分：处理紧急情况好了，我们的页面完成了。于是我们将页面发布上网。突然，晴天霹雳，页面无法访问了，这时候，你会怎么做？面试题到此为止，你是否能够对答如流呢，仔细想一下，然后在翻页看一下答案。答案部分第一题：主要考虑几个问题：1.ie6的3像素bug；2.清楚浮动；css代码：divbackgroun

15、d:#cccccc;#firstfloat:left;width:100px;height:150px#secondclear:left;float:left;margin-top:10px;width:100px;height:150px#thirdzoom:1;width:200px;margin-left:110px;_margin-left:107px;height:310px-xml/html代码divid=first/divdivid=second/divdivid=third/div第二题：用javascript优化布局提示：也许，我们其他的布局也会用到这个放大的效果哦。可以使用

16、任何开源代码，包括曾经你自己写的。关键字：javascript、封装、复用惭愧啊，用上边那个布局我怎么也没把它优化出来，硬这头皮用绝对定位改了布局；所以样式改成了这样：body(margin:0;padding:0div(background:#cccccc;position:absolute#first(width:100px;height:150px#secondtop:160px;width:100px;height:150px#third(width:200px;height:310px;left:110pxjavascript要考虑封装、复用functionzoom(id,x,y)/

17、设置缩放函数参数：容器id、横向缩放倍数、纵向缩放倍数(莓比例缩放时也可以设定一个参数)varobj=document.getelementbyid(id);/获取元素对象值vardw=obj.clientwidth;/获取元素宽度vardh=obj.clientheight;/获取元素高度/varotop=obj.offsettop;/varoleft=obj.offsetleft;obj.onmouseover=function()/鼠标移入this.style.width=dw*x+px;/横向缩放this.style.height=dh*y+px;/纵向缩放this.style.bac

18、kgroundcolor=#f00"泼置调试背景this.style.zindex=1;/设置z轴优先obj.onmouseout=function()/鼠标移出，设回默认值this.style.width=;this.style.height=;this.style.padding=;this.style.backgroundcolor=;this.style.zindex=;zoom(first,1.25,1.25);zoom(second,1.25,1.25);zoom(third,1.25,1.25);第三题也许是js代码没有放在页面的后面，加载速度慢尚未显示出来。或者是页面

19、地址出错了。【篇三：web前端开发面试题集锦】>3、如何用css分别单独定义ie6、7、8的width属性。所有浏览器通用height:100px;ie6专用_height:100px;ie6专用*height:100px;ie7专用*+height:100px;ie7、ff共用height:100pximportant;4、css中哪些属性可以同父元素继承。继承：（x）html元素可以从其父元素那里继承部分css属性，即使当前元素并没有定义该属性color;font-size;5、你如何理解html结构的语意化。1. 去掉或样式丢失的时候能让页面呈现清晰的结构：html本身是没有表现的

20、，我们看到例如h1是粗体，字体大小2em，加粗；strong是加粗的，不要认为这是html这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的html点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和html结构是不可分割的。2. 屏幕阅读器（如果访客有视障）会完全根据你的标记来读”你的网页.3. 例如,如果你使用的含语义的标记，屏幕阅读器就会逐个拼出”你的单词,而不是试着去对它完整发首pda、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对css的支持较弱）.使用语义标

21、记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下，观看设备的任务是符合设备本身的条染网页.语义标记为设备提供了所需的相关信息，就省去了你自己去考虑所有可能的显示情况（包括现有的或者将来新的设备一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显7K.无论哪种方式一文本标记为标题，您就可以确信读取设备将根据其自身的条件来合适地显示页面.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重过去你可能还没有考虑搜索引擎的爬虫也是网站的访客”但现在它们他们实际上是极其宝贵的用户.没有他们的引擎将无法索引你的网站,然后一般用户将很难过来访问.4. 你的页面是

22、否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记，而只注重语义标记.因此,如果页面文件的标题被标记，而不是，那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外，语利于正确使用css和javascript,因为其本身提供了许多钩钩”来应用页面的样式与行为.便于团队开发和维护w3c给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，效率，甚至实现模块化开发。6、谈谈以前端角度出发做好seo需要考虑什么。1、了解搜索引擎如何抓取网页和如何索引网页你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（serobo

23、t或叫webcra何进行工作，搜索引擎如何对搜索结果进行排序等等。2、meta标签优化主要包括主题（title），网站描述（description）,和关键词（keywords）。还有一些其它的隐藏文字比如au者），category（目录），language（编码语种）等。3、如何选取关键词并在网页中放置关键词搜索就得用关键词。关键词分析和选择是seo最重要的工作之一。首先要给网站确定主关键词（一般在5个上后针对这些关键词进行优化，包括关键词密度（density），相关度（relavancy）,突出性（prominency）等等。4、了解主要的搜索引擎虽然搜索引擎有很多，但是对网站流量起决定作

24、用的就那么几个。比如英文的主要有google,yahoo,bing等有百度，搜狗，有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索的关系，比如aol网页搜索用的是google的搜索技术，msn用的是bing的技术。5、主要的互联网目录opendirectory自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区别是网站内容的收集方目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集的，除了主页外还抓取大量的内容页面。6、按点击付费的搜索引擎搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。最典型的有overture当

25、然也包括google的广告项目googleadwords。越来越多的人通过搜索引擎的点击广告来定位商业网站，这里面化和排名的学问，你得学会用最少的广告投入获得最多的点击。7、搜索引擎登录网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网站提交（submit）擎。如果你的是商业网站，主要的搜索引擎和目录都会要求你付费来获得收录（比如yahoo要299美元），但是好消少到目前为止）最大的搜索引擎google目前还是免费，而且它主宰着60%以上的搜索市场。8、链接交换和链接广泛度（linkpopularity）网页内容都是以超文本（hypertext）的方式来互相链接的

26、，网站之间也是如此。除了搜索引擎以外，人们也不同网站之间的链接来surfing（神浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。9、标签的合理使用7、我们知道可以以外链的方式引入css文件，请谈谈外链引入css有哪些方式，这些方式的性能有区别吗。要说出css的引入方式，没有什么难度，但要说到为什么使用不同的引入方式，就有些学问在里面了。css的引入方式最常用的有三种，第一：在head部分加入linkrel=stylesheettype=text/csshref=my.css/,引入外部的css文

27、件。这种方法可以说是现在占统治地位的引入方法。如同ie与浏览器。这也是最能体现css特点的方法；最能体现div+css中的内容离的思想，也最易改版维护，代码看起来也是最美观的一种。第二：在head部分加入styletype=text/cssdiv(margin:0;padding:0;border:1pxredsolid;/style这种方法的使用情况要少的多，最长见得就是访问量大的门户网站。或者访问量较大的企业网站的首页。与第一种方法比起来，优弊端也明显。优点：速度快，所有的css控制都是针对本页面标签的，没有多余的CSS命令；再者不用外链CSS文件。直接在文档中读取样式。缺点就是改版麻烦些

28、，单个页面显得臃肿，CSS不能被其他HTML引用造成代码量相对较多，维护也麻烦些采用这种方法的公司大多有钱，对他们来说用户量是关键，他们不缺人进行复杂的维护工作。第三：直接在页面的标签里加divstyle=border:1pxredsolid;测试信息/div这种方法现在用的很少，很多公司不了解前端技术的领导还对这种写法很痛恨。认为HTML里不能出现CSS命令。其实有时候没有什么大不了。比如通用性差，效果特殊，使用CSS命令较少，并且不常改动的地方，使用这种方法反而是很好的选择。除了这三种常用的CSS引入方式，还有种很多人都没有见过的引入方式styletype=text/cssimportur

29、l(my.css);/style这就是第四种引入方式。在IBM工作的时候，只能使用一种ajax框架，就是DOJO。而DOJO的css引用，就是采用了im式。这种情况非常少，主要用在css文件数量庞大的负责的系统中。另外important本身是一个css命令，是放在css文件里的link标签有很大的区别。8、csssprite是什么，谈谈这个技术的优缺点。加速的关键，不是降低重量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可越大。利用csssprites

30、能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是cssspri的优点，也是其被广泛传播和应用的主要原因；csssprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的和。解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素名，从而提高了网页的制作效率。更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起方便。诚然csssprites是如此的强大，但是也存在一些不可忽视的缺点，如下：在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内不不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容背景断裂；csssprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位是针线活，没什么难度，但是很繁琐；幸好腾讯的鬼哥用ria开发了一个csssprites样式生成工具，虽然些使用上的不灵活，但是已经比photoshop测量来的方便多了，而且样式直接