前端面试面试官会问的问题以及答案

时间  2019-12-08
标签 前端 面试 问题 以及 答案 栏目 快乐工作 繁體版
原文   原文链接

[HTML && CSS]



1.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 

浏览器根据DOCTYPE是否存在以及使用的哪一种DTD来选择要使用的呈现方法。若是XHTML文档包含形 经常致使页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也致使页面以标准模式呈现，可是有过 渡DTD而没有URI会致使页面以混杂模式呈现。DOCTYPE不存在或形式不正确会致使HTML和XHTML文档以混杂模式呈现。javascript

根据DOCTYPE是否存在选择呈现模式，被称为DOCTYPE切换或DOCTYPE侦测。并不是全部浏览器都采用这些规则，可是这些规则很好地说明了DOCTYPE切换的工做方式。要了解更全面的内容，可查阅网站http://hsivonen.iki.fi/doctype/，这里的图表说明了不一样浏览器如何根据DOCTYPE声明来选择呈现方法。php

DOCTYPE切换是浏览器用来区分遗留文档和符合标准的文档的手段。不管是否编写了有效的CSS，若是选择了错误的DOCTYPE，那么页面就将以混杂 模式呈现，其行为就可能会有错误或不可预测。所以，必定要在站点的每一个页面上包含形式完整的DOCTYPE声明，而且在使用HTML时选择严格的DTD。css

注意：<!DOCTYPE html PUBLIC……>的组成解释  可查阅http://my.oschina.net/u/1040928/blog/169779html




2.行内元素有哪些？块级元素有哪些？CSS的盒模型？

 内联：a(锚点 超连接)，abbr （缩写）， acronym （首字），b（粗体），big（大致字）前端

    br（换行），em（强调），font（字体），i(斜体)，img（图片），input(输入框)，label（表格标签），s（中划线）html5

    Select（项目选项），small（小字体文本），span（内联容器），strike（中划线），strong（粗体增强），sub(下标)java

 Sup（上标） textarea（多行文本输入框），tt（电传文本）,u（下划线），var（定义变量）块级：e address(地址)，blockquote（块引用），dir（目录列表），div （经常使用块级元素），dl（定义列表）程序员

      ，fieldset-form（控制组）form （交互表单），h1~h6（1-6级标题），hr（水平线），menu（菜单列表），ol（有序列表）web

。      Ul（无序列表），p（段落），table（表格），pre（格式化文本），noscript（可选脚本内容---不支持script的浏览器用的）ajax

盒子自己的大小是这样计算的：

Width

width + padding-left + padding-right + border-left + border-right

Height

height + padding-top + padding-bottom + border-top + border-bottom


3.CSS引入的方式有哪些? link和@import 的区别是?

 引入方式：内联 ，嵌入 ，外接（link、@import ）   

本质上，这两种方式都是为了加载CSS文件，但仍是存在着细微的差异。
差异1：老祖宗的差异。link属于XHTML标签，而@import 彻底是CSS提供的一种方式。
link标签除了能够加载CSS外，还能够作不少其它的事情，好比定义RSS，定义rel链接属性等，@import 就只能加载CSS了。
差异2：加载顺序的差异。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import 引用的CSS会等到页面所有被下载完再被加载。因此有时候浏览@import 加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS的方式就是使用@import ，我一边下载一边浏览梦之都网页时，就会出现上述问题）。
差异3：兼容性的差异。因为@import 是CSS2.1提出的因此老的浏览器不支持，@import 只有在IE5以上的才能识别，而link标签无此问题。
差异4：使用dom控制样式时的差异。当使用javascript控制dom去改变样式的时候，只能使用link标签，由于@import 不是dom能够控制的。
差异5：@import 能够在css中再次引入其余样式表，好比能够建立一个主样式表，在主样式表中再引入其余的样式表，

4.CSS选择符有哪些？哪些属性能够继承？优先级算法如何计算？内联和important哪一个优先级高？ 


HTML selector 标签选择符

　　HTML selector就是HTML的标签，如：DIV，TD，P，H1等等，如你用 CSS 定义了它们，在CSS文章所控制的页面中这个标签的性质就按照你的定义来显示。

　　好比咱们想叫H1的颜色是红的，则：H1 {color: red}。这里咱们学习一个CSS的特色，它可定义好几个 selector在一个rule里。如：H1, H2, TD {color: red}。这个定义就能让全部的 H1, H2, 和 TD 的颜色都为红色。在具体使用中，能够将几个设置相同的属于合并起来编写，减少咱们的代码。

　　Class selector 类选择符

　　Class selector有两种，一种叫相关 class selector，它跟一个 HTML 的标签有关系它的语法是tag.Classname {property:value}。如：咱们想设置一些而不是所有 H1 的颜色是红的 H1.redone {color: red}则：第一个 H1 是红色的，而第二个就不是了　第二种是独立class selector。它可被任何 HTML标签所应用。它的语法以下 .Classname {property:value}假如咱们有下面这个定义.blueone {color: blue}那么咱们能够把他应用到不一样的标签中去。很是明显class selector 给了咱们更多的自由与发挥的空间。

　　ID selector ID选择符

　　ID selector 其实跟独立 class selector 的功能很类似。而区别在于它们的语法和用法不一样，以及对于 javascript 操纵 HTML元素有帮助。咱们在布局中，对不一样的结构区域的定义，每每用ID选择符。

　　它的语法以下#IDname {property:value}。假如咱们有下面的定义#yelowone {color: yellow}。咱们能够运用这个定义到任何的有一样 ID 名字的标签，如：text here你可能以为既然 ID selector 和独立 class selector 功能同样，为何二者都存在呢？有 ID 的 HTML元素能够被JavaScript来操纵。

Class 可继承

伪类A标签能够继承

列表 UL LI DL DD DT 可继承

优先级就近原则，样式定义最近者为准

载入样式以最后载入的定位为准

优先级为

!important > [ id > class > tag ]  

Important 比 内联优先级高

优先级算法：
1. 行内样式优先级Specificity值为1,0,0,0，高于外部定义。
如：<div style=”color: red”>sjweb</div>
外部定义指经由<link>或<style>标签订义的规则；
2.!important声明的Specificity值最高；
3.Specificity值同样的状况下，按CSS代码中出现的顺序决定，后者CSS样式居上；
4.由继续而获得的样式没有specificity的计算，它低于一切其余规则(好比全局选择符*定义的规则)。

实例分析：
1.div { font-size:12px;}
分析：
1个元素{ div}，Specificity值为0,0,0,1

2.body div p{color: green;}
分析：
3个元素{ body div p }，Specificity值为0,0,0,3

3.div .sjweb{ font-size:12px;}
分析：
1个元素{ div }，Specificity值为0,0,0,1
1个类选择符{.sjweb}，Specificity值为0,0,1, 0
最终：Specificity值为 0,0,1,1
4.Div # sjweb { font-size:12px;}
分析：
1个元素{ div }，Specificity值为0,0,0,1
1个类选择符{.sjweb}，Specificity值为0,1,0, 0
最终：Specificity值为 0,1,0,1
5.html > body div [id=”totals”] ul li > p {color:red;}
分析：
6个元素{ html body div ul li p}  Specificity值为0,0,0,6
1个属性选择符{ [id=”totals”] }      Specificity值为0,0,1,0
2个其余选择符{ >  > }            Specificity值为0,0,0,0
最终：Specificity值为 0,0,1,6
!important 的优先级最高


5:前端页面有哪三层构成，分别是什么？做用是什么？


① 网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责建立。标签，也就是那些出如今尖括号里的单词，对网页内容的语义含义作出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”

② 网页的表示层（presentation layer） 由 CSS 负责建立。 CSS 对“如何显示有关内容”的问题作出了回答。

③ 网页的行为层（behavior layer）负责回答“内容应该如何对事件作出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。


6:css的基本语句构成是？

   选择器{属性1:值1;属性2:值2;……}

7.你作的页面在哪些流览器测试过？这些浏览器的内核分别是什么?常常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？

1，使用Trident的是internet explorer，国产的绝大部分浏览器。Trident是就是ie内核
2，使用Gecko的是Mozilla Firefox，使用 Gecko 内核的浏览器也有很多，如 Netscape MozillaSuite/SeaMonkey 等
3，使用Presto的是opera，这是目前公认网页浏览速度最快的浏览器内核
4，使用WebKit的有苹果的safari，谷歌的chrome，还有国产的大部分双核浏览器其中一核就是WebKit

浏览器兼容问题一：不一样浏览器的标签默认的外补丁和内补丁不一样

问题症状：随便写几个标签，不加样式控制的状况下，各自的margin 和padding差别较大。

碰到频率:100%

解决方案：CSS里    *{margin:0;padding:0;}

备注：这个是最多见的也是最易解决的一个浏览器兼容性问题，几乎全部的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

浏览器兼容问题二：块属性标签float后，又有横行的margin状况下，在IE6显示margin比设置的大

问题症状:常见症状是IE6中后面的一块被顶到下一行

碰到频率：90%（稍微复杂点的页面都会碰到，float布局最多见的浏览器兼容问题）

解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性

备注：咱们最经常使用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候咱们一般都是用div float实现的，横向的间距设置若是用margin实现，这就是一个必然会碰到的兼容性问题。

浏览器兼容问题三：设置较小高度标签（通常小于10px），在IE6，IE7，遨游中高度超出本身设置高度

问题症状：IE六、7和遨游里这个标签的高度不受控制，超出本身设置的高度

碰到频率：60%

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

备注：这种状况通常出如今咱们设置小圆角背景的标签里。出现这个问题的缘由是IE8以前的浏览器都会给标签一个最小默认的行高的高度。即便你的标签是空的，这个标签的高度仍是会达到默认的行高。

浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的状况，IE6间距bug

问题症状：IE6里的间距比超过设置的间距

碰到概率：20%

解决方案：在display:block;后面加入display:inline;display:table;

备注：行内属性标签，为了设置宽高，咱们须要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具备了块属性float后的横向margin的bug。不过由于它自己就是行内属性标签，因此咱们再加上display:inline的话，它的高宽就不可设了。这时候咱们还须要在display:inline后面加入display:talbe。

浏览器兼容问题五：图片默认有间距

问题症状：几个img标签放在一块儿的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起做用。

碰到概率：20%

解决方案：使用float属性为img布局

备注：由于img标签是行内属性标签，因此只要不超出容器宽度，img标签都会排在一行里，可是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（个人一个学生使用负margin，虽然能解决，但负margin自己就是容易引发浏览器兼容问题的用法，因此我禁止他们使用）

浏览器兼容问题六：标签最低高度设置min-height不兼容

问题症状：由于min-height自己就是一个不兼容的CSS属性，因此设置min-height时不能很好的被各个浏碰到概率：5%

解决方案：若是咱们要设置一个标签的最小高度200px，须要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

备注：在B/S系统前端开时，有不少状况下咱们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候咱们就会面临这个兼容性问题。

浏览器兼容问题七：透明度的兼容CSS设置

作兼容页面的方法是：每写一小段代码（布局中的一行或者一块）咱们都要在不一样的浏览器中看是否兼容，固然熟练到必定的程度就没这么麻烦了。建议常常会碰到兼容性问题的新手使用。不少兼容性问题都是由于浏览器对标签的默认属性解析不一样形成的，只要咱们稍加设置都能轻松地解决这些兼容问题。若是咱们熟悉标签的默认属性的话，就能很好的理解为何会出现兼容问题以及怎么去解决这些兼容问题。

1 /* CSS hack*/ 

我不多使用hacker的，多是我的习惯吧，我不喜欢写的代码IE不兼容，而后用hack来解决。不过hacker仍是很是好用的。使用hacker我能够把浏览器分为3类：IE6 ；IE7和遨游；其余（IE8 chrome ff safari opera等）

◆IE6认识的hacker 是下划线_ 和星号 *

◆IE7 遨游认识的hacker是星号 *

好比这样一个CSS设置：

2 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.如何居中一个浮动元素?

width:500px; height:300px; float:left; margin-left:50%;  position:relative; left:-250px; 

background-color:#CCC; 

 

首先设置块元素的宽度和高度，这里宽度是必须的，高度能够不设，我设置了块的背景色，以给你们看效果。实现居中关键在于 margin-left:50%; position:relative; left:-250px;

9.有没有关注HTML5和CSS3?若有请简单说一些您对它们的了解状况！

10.你怎么来实现下面这个设计图,主要讲述思路 （效果图省略）

11.若是让你来制做一个访问量很高的大型网站，你会如何来管理全部CSS文件、JS与图片？

 先期团队必须肯定好全局样式（globe.css），编码模式(utf-8) 等

 编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；

 标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；

 页面进行标注（例如 页面 模块 开始和结束）；

 CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）

 JS 分文件夹存放 命民以该JS 功能为准英文翻译；

 图片采用整合的 images.png png8 格式文件使用 尽可能整合在一块儿使用方便未来的管理，使用图片精灵讲一些图片合成、

 


12.你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

 前端开发工程师是Web前端开发工程师的简称，是近五年才真正开始受到重视的一个新兴职业。Web前端开发技术是一个先易后难的过程，主要包括三个要素：HTML、CSS和JavaScript，这就要求前端开发工程师不只要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，并且要学会运用各类工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。

1.掌握各类修图软件，如PS\AI，不要求专业设计师水平，但要会用会改，今天是一专多能的时代，光会编程讨很差饭碗的。

2.掌握FLASH，能制做出动态flash相册，会Flash AS3.0编程。

3.精通JavaScript、jQuery、ExtJS等页面效果框架，这是前端工程师的最核心技能，是专作页面效果的技术。其实精通了JavaScript，后端编程语言，如.NET、PHP、Ruby都很容易掌握，由于其原理是同样的

4.精通一二种模板语言，并能修改，如织梦或wordpress的模板

5.掌握thinkphp与zend框架，能修改此类开源源码

6.掌握html5与sencha，这是作手机等移动设备的页面前端技术

7.掌握一二种后端编程语言，如PHP、.NET、JAVA，能读懂后端源码，实际上其原理跟JS差很少


[Javascript]

1：js是什么，js和html 的开发如何结合？
2.怎样添加、移除、移动、复制、建立和查找节点

（1）建立新节点

      createDocumentFragment()    //建立一个DOM片断

      createElement()   //建立一个具体的元素

      createTextNode()   //建立一个文本节点

（2）添加、移除、替换、插入

      appendChild()

      removeChild()

      replaceChild()

      insertBefore()

（3）查找

      getElementsByTagName()    //经过标签名称

      getElementsByName()    //经过元素的Name属性的值

      getElementById()    //经过元素Id，惟一性


3.怎样使用事件以及IE和DOM事件模型之间存在哪些主要差异

在浏览器解析事件的时候，有两种触发方式，一种叫作Bubbling(冒泡)，另一种叫作Capturing(捕获)。由上图能够看出来，冒泡的方式效果就是当一个DOM元素的某事件例如click事件被fire时，依次它的父元素的click事件也被fire(触发)，一直传递到最顶层的body元素为止。而捕获的触发方式正好相反，当某个元素的click事件被触发时，先从最顶层的body元素click事件被触发开始，一直传递到真正被触发的元素为止。

****************************************************************************

 

此次我将讨论W3C的标准DOM事件模型和IE独立门户的DOM事件模型到底有多少区别，首先咱们能够回想一下目前大多数Js程序员习惯如何绑定事件到DOM元素上，最多见的就是obj.onclick=handler这种方式(更恶劣的是在Html代码的元素标签中直接加上onclick属性，彻底没达到视图和动做分开的原则)。咱们暂时称这种方式的事件添加为Traditional(传统方式)吧，IE有本身的IE Event Module，而火狐等浏览器则遵循的W3C方式的Event Module，下面看看这三者各自的优缺点在哪里——

 

一、 Traditional Module

传统方式的事件模型即直接在DOM元素上绑定事件处理器，例如—

window.onload=function(){…}

obj.onmouseover=function(e){…}

obj.onclick=function(){…}

 

首先这种方式是不管在IE仍是Firefox等其余浏览器上均可以成功运行的通用方式。这即是它最大的优点了，并且在Event处理函数内部的this变量无一例外的都只想被绑定的DOM元素，这使得Js程序员能够大大利用this关键字作不少事情。

 

至于它的缺点也很明显，就是传统方式只支持Bubbling，而不支持Capturing，而且一次只能绑定一个事件处理器在DOM元素上，没法实现多Handler绑定。最后就是function参数中的event参数只对非IE浏览器有效果(由于IE浏览器有特制的window.event)。

 

二、 W3C (Firefox.e.g) Event Module

Firefox等浏览器很坚定的遵循W3C标准来制定浏览器事件模型，使用addEventListener和removeEventListener两个函数，看几个例子—

window.addEventListener(‘load’,function(){…},false);

document.body.addEventListener(‘keypress’,function{…},false);

obj.addEventListener(‘mouseover’,MV,true);

function MV(){…}

 

addEventListener带有三个参数，第一个参数是事件类型，就是咱们熟知的那些事件名字去掉前面的’on’，第二个参数是处理函数，能够直接给函数字面量或者函数名，第三个参数是boolean值，表示事件是否支持Capturing。

 

W3C的事件模型优势是Bubbling和Capturing都支持，而且能够在一个DOM元素上绑定多个事件处理器，各自并不会冲突。而且在处理函数内部，this关键字仍然可使用只想被绑定的DOM元素。另外function参数列表的第一个位置(无论是否显示调用)，都永远是event对象的引用。

 

至于它的缺点，很不幸的就只有在市场份额最大的IE浏览器下不可以使用这一点。

 

三、 IE Event Module

IE本身的事件模型跟W3C的相似，但主要是经过attachEvent和detachEvent两个函数来实现的。依旧看几个例子吧—

window.attachEvent(‘onload’,function(){…});

document.body.attachEvent(‘onkeypress’,myKeyHandler);

 

能够发现它跟W3C的区别是没有第三个参数，并且第一个表示事件类型的参数也必须把’on’给加上。这种方式的优势就是能绑定多个事件处理函数在同一个DOM元素上。

 

至于它的缺点，为何现在在实际开发中不多见呢？首先IE浏览器自己只支持Bubbling不支持Capturing；并且在事件处理的function内部this关键字也没法使用，由于this永远都只想window object这个全局对象。要想获得event对象必须经过window.event方式，最后一点，在别的浏览器中，它显然是没法工做的。

 

最后我在推荐两个必须知道的IE和W3C标准的区别用法吧—

一、 当咱们须要阻止浏览器某DOM元素的默认行为的时候在W3C下调用e.preventDefault()，而在IE下则经过window.event.returnValue＝false来实现。

二、当咱们要阻止事件冒泡的时候，在W3C标准里调用e.stopPropagation()，而在IE下经过设置window.event.cancelBubble=true来实现。


4.面向对象编程:b怎么继承a 

一、每一个函数都包含两个非继承而来的方法：apply()和call()。
二、他们的用途相同，都是在特定的做用域中调用函数。
三、接收参数方面不一样，apply()接收两个参数，一个是函数运行的做用域(this)，另外一个是参数数组。
call()方法第一个参数与apply()方法相同，但传递给函数的参数必须列举出来。

四、bind()方法　　支持此方法的浏览器有IE9+、Firefox4+、Safari5.1+、Opera12+、Chrome。它是属于ECMAScript5的方法。直接看例子： 

5.看看下面alert的结果是什么

view sourceprint?1.function b(x, y, a) { 
.arguments[2] = 10; 
alert(arguments[2] );

6.请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象

 如：

var url = "http://www.taobao.com/index.php?key0=0&key1=1&key2=2";


function parseQueryString(url) {

var str = url.split("?")[1], items = str.split("&");

var result = {};

var arr;

for (var i = 0; i < items.length; i++) {

arr = items[i].split("=");

result[arr[0]] = arr[1];

}

return result;

}


var obj = parseQueryString(url);

console.log(obj.key2);


// 还能够经过正则表达式来作

function parse_url(_url) {//定义函数


}  

 

7.ajax是什么?  ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?


8.什么是闭包？下面这个ul，如何点击每一列的时候alert其index?

<ul id= ” test ” > 
<li> 这是第一条 </li><li> 这是第二条 </li><li> 这是第三条 </li> 
</ul>


9.最近看的一篇Javascript的文章是？


10.常使用的库有哪些？经常使用的前端开发工具？开发过什么应用或组件？


11.说说YSlow(能够详细一点)

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程