文档章节

web前端部分面试习题

spademan
 spademan
发布于 2013/09/27 20:07
字数 4267
阅读 294
收藏 0

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

Doctype 是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档。

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

   内联元素(inline element)

* a - 锚点   * abbr - 缩写    * acronym - 首字  * b - 粗体(不推荐)   * big - 大字体     * br - 换行*   em - 强调 *font - 字体设定(不推荐) * i - 斜体 * img - 图片         * input - 输入框   * label - 表格标签       * s - 中划线(不推荐)     * select - 项目选择 * small - 小字体文本         * span - 常用内联容器,定义文本内区块             * strike - 中划线     * strong - 粗体强调           * sub - 下标 * sup - 上标* textarea - 多行文本输入框* tt - 电传文本* u - 下划线* var - 定义变量

块级元素

* address - 地址* blockquote - 块引用* center - 举中对齐块* dir - 目录列表* div - 常用块级容易,也是css layout的主要标签* dl - 定义列表* fieldset - form控制组* form - 交互表单* h1 - 大标题* h2 - 副标题* h3 - 3级标题* h4 - 4级标题* h5 - 5级标题* h6 - 6级标题* hr - 水平分隔线* isindex - input prompt* menu - 菜单列表* noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容* noscript - )可选脚本内容(对于不支持script的浏览器显示此内容)* ol - 排序表单* p - 段落* pre - 格式化文本* table - 表格* ul - 非排序列表

.CSS盒子模型包含四个部分组成:

内容、填充(padding)、边框(border)、外边界(margin)。w3c 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。

 ie 盒子模型的范围也包括 margin、border、padding、content,和标准 w3c 盒子模型不同的是:ie 盒子模型的 content 部分包含了 border 和 pading。

那应该选择哪中盒子模型呢?当然是“标准 w3c 盒子模型”了。怎么样才算是选择了“标准 w3c 盒子模型”呢?很简单,就是在网页的顶部加上 doctype 声明。假如不加 doctype 声明,那么各个浏览器会根据自己的行为去理解网页,即 ie 浏览器会采用 ie 盒子模型去解释你的盒子,而 ff 会采用标准 w3c 盒子模型解释你的盒子,所以网页在不同的浏览器中就显示的不一样了。反之,假如加上了 doctype 声明,那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子,网页就能在各个浏览器中显示一致了。

3 .CSS引入的方式有哪些? 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中再次引入其他样式表,比如可以创建一个主样式表,在主样式表中再引入其他的样式表,
大致就这几种差别了(如果还有什么差别,大家告诉我,我再补充上去),其它的都一样,从上面的分析来看,还是使用link标签比较好。

4.。CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?

id 和class ,其中class可以继承,伪类的标签也可以继承,列表ul li dl dd dt 可以继承,优先级就近原则,样式定义为最近者, 优先级比较:!important>【id>class>tag】

5.前端页面有哪三层构成,分别是什么?作用是什么?

网页的结构层(structural layer)由 HTML 或 XHTML 之类的标记语言负责创建。标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息。例如,P 标签表达了这样一种语义:“这是一个文本段。” 网页的表示层(presentation layer) 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。 网页的行为层(behavior layer)负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

6.css的基本语句构成是?


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

7:面前各大浏览器的内核

Trident:代表浏览器:IE4,IE5,IE6,IE7,IE8,IE9,Maxthon,The World,GreenBrowser,腾讯TT等。

Presto   代表浏览器:Opera,NDSBrowser,Wii Internet Channle,Nokia 770;

Gecko    代表浏览器:Netscape,Mazilla Firefox;
Webkit   代表浏览器:Safari,Chrome;

浏览器hack前缀  例如 

*/ -o-transform: rotate(40deg); /* Opera浏览器 */

    /-webkit-transform: rotate(40deg); /* Webkit内核浏览器 chrome ,safari

                        */-moz-transform: rotate(40deg); /* Firefox浏览器 */

                          */-ms-transform:rotate(-40deg) ;/*IE9*/ 


8..js如何 添加、移除、移动、复制、创建和查找节点

(1)创建新节点

      createDocumentFragment()    //创建一个DOM片段

      createElement_x()   //创建一个具体的元素

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

(2)添加、移除、替换、插入

      appendChild()

      removeChild()

      replaceChild()

      insertBefore()

(3)查找

  

    getElementsByTagName()    //通过标签名称

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

      getElementById()    //通过元素Id,唯一性

(4)复制节点
cloneNode() 方法,用于复制节点, 接受一个布尔值参数, true 表示深复制(复制节点及其所有子节点), false 表示浅复制(复制节点本身,不复制子节点)

1 var ul = document.getElementByIdx_x("myList"); //获得ul 
2 var deepList = ul.cloneNode(true); //深复制

3 var shallowList = ul.cloneNode(false); //浅复制


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

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

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

window.onload=function(){…}
obj.onmouseover=function(e){…}
obj.onclick=function(){…}


 首先这种方式是无论在IE还是Firefox等其他浏览器上都可以成功运行的通用方式。这便是它最大的优势了,而且在Event处理函数内部的this变量无一例外的都只想被绑定的DOM元素,这使得Js程序员可以大大利用this关键字做很多事情。
 
至于它的缺点也很明显,就是传统方式只支持Bubbling,而不支持 Capturing
2、 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浏览器下不可使用这一点。

 3、 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标准的区别用法吧—
1、 当我们需要阻止浏览器某DOM元素的默认行为的时候在W3C下调用e.preventDefault(),而在IE下则通过window.event.returnValue=false来实现。
2、当我们要阻止事件冒泡的时候,在W3C标准里调用e.stopPropagation(),而在IE下通过设置window.event.cancelBubble=true来实现。 

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

(一)对象冒充

function A(name){
    this.name = name;
    this.sayHello = function(){alert(this.name+” say Hello!”);};
}

function B(name,id){
    this.temp = A;
    this.temp(name);        //相当于new A();
    delete this.temp;        //防止在以后通过temp引用覆盖超类A的属性和方法
     this.id = id;   
    this.checkId = function(ID){alert(this.id==ID)};}

当构造对象B的时候,调用temp相当于启动A的构造函数,注意这里的上下文环境中的this对象是B的实例,所以在执行A构造函数脚本时,所有A的变量和方法都会赋值给this所指的对象,即B的实例,这样子就达到B继承了A的属性方法的目的。之后删除临时引用temp,是防止维护B中对A的类对象(注意不是实例对象)的引用更改,因为更改temp会直接导致类A(注意不是类A的对象)结构的变化。

我们看到了,在Js版本更新的过程中,为了更方便的执行这种上下文this的切换以达到继承或者更加广义的目的,增加了call和apply函数。它们的原理是一样的,只是参数不同的版本罢了(一个可变任意参数,一个必须传入数组作为参数集合)。这里就以call为例子,解释一下用call实现的对象冒充继承。

function Rect(width, height){
    this.width = width;
    this.height = height;
    this.area = function(){return this.width*this.height;};
}

function myRect(width, height, name){
    Rect .call(this,width,height);
    this.name = name;
    this.show = function(){
    alert(this.name+” with area:”+this.area());
    }
}

关于Call方法,官方解释:调用一个对象的一个方法,以另一个对象替换当前对象。 
call (thisOb,arg1, arg2…)

这也是一种对象冒充的继承,其实在call方法调用的时候发生的事情也是上下文环境变量this的替换,在myRect函数体中this肯定是指向类myRect对象的实例了,然而用这个this作为上下文环境变量调用名字叫Rect方法,即类Rect的构造函数。于是此时调用Rect时候对this的赋值属性和方法都实际上是对一个myRect的对象进行。所以说尽管call和apply并不是仅仅为了继承而新增的方法,但用它们可以模拟继承。

对象冒充继承就是这么一回事,它可以实现多重继承,只要重复做这一套赋值的流程就可以了。不过目前真正大规模使用得并不多,为什么呢?因为它有一个明显的性能缺陷,这就要说道OO的概念了,我们说对象是成员+成员方法的集合,构造对象实例的时候,这些实例只需要拥有各自的成员变量就可以了,成员方法只是一段对变量操作的可执行文本区域而已,这段区域不用为每个实例而复制一份,所有的实例都可以共享。现在回到Js利用对象冒充模拟的继承里,所有的成员方法都是针对this而创建的,也就是所所有的实例都会拥有一份成员方法的副本,这是对内存资源的一种极度浪费。其它的缺陷比如说对象冒充无法继承prototype域的变量和方法就不用提了,笔者认为前一个致命缺陷就已经足够。不过,我们还是需要理解它,特别是父类的属性和方法是如何继承下来的原理,对于理解Js继承很重要。

(二)原型方式 
第二种继承方式是原型方式,所谓原型方式的继承,是指利用了prototype或者说以某种方式覆盖了prototype,从而达到属性方法复制的目的。其实现方式有很多中,可能不同框架多少会有一点区别,但是我们把握住原理,就不会有任何不理解的地方了。看一个例子(某一种实现):

function Person(){
    this.name = “Mike”;
    this.sayGoodbye = function(){alert(“GoodBye!”);};
}

Person.prototype.sayHello = function(){alert(”Hello!”);};

function Student(){}

Student.prototype = new Person();

关键是对最后一句Student原型属性赋值为Person类构造的对象,这里笔者解释一下父类的属性和方法是如何copy到子类上的。Js对象在读取某个对象属性的时候,总是先查看自身域的属性列表,如果有就返回否则去读取prototype域(每个对象共享构造对象的类的prototype域所有属性和方法),如果找到就返回,由于prototype可以指向别的对象,所以Js解释器会递归的去查找prototype域指向对象的prototype域,直到prototype为本身,查找变成了一种循环,就停止,此时还没找到就成undefined了。

这样看来,最后一句发生的效果就是将父类所有属性和方法连接到子类的prototype域上,这样子类就继承了父类所有的属性和方法,包括name、sayGoodbye和sayHello。这里与其把最后一句看成一种赋值,不如理解成一种指向关系更好一点。这种原型继承的缺陷也相当明显,就是继承时父类的构造函数时不能带参数,因为对子类prototype域的修改是在声明子类对象之后才能进行,用子类构造函数的参数去初始化父类属性是无法实现的,如下所示:

function Person(name){
    this.name = name;
}

function Student(name,id){
    this.id = id;
}

Student.prototype = new Person(this.name);



两种继承方式已经讲完了,如果我们理解了两种方式下子类如何把父类的属性和方法“抓取”下来,就可以自由组合各自的利弊,来实现真正合理的Js继承。下面是个人总结的一种综合方式:

function Person(name){
    this.name = name;
}

Person.prototype.sayHello = function(){alert(this.name+“say Hello!”);};

function Student(name,id){
    Person.call(this,name);
    this.id = id;
}

Student.prototype = new Person();
Student.prototype.show = function(){
    alert(“Name is:”+ this.name+” and Id is:”+this.id);
}

总结就是利用对象冒充机制的call方法把父类的属性给抓取下来,而成员方法尽量写进被所有对象实例共享的prototype域中,以防止方法副本重复创建。然后子类继承父类prototype域来抓取下来所有的方法。如想彻底理清这些调用链的关系,推荐大家多关注Js中prototype的constructor和对象的constructor属性


© 著作权归作者所有

spademan
粉丝 8
博文 92
码字总数 39247
作品 0
广州
前端工程师
私信 提问
《软件性能测试与LoadRunner实战教程》新书上市

作者前三本书《软件性能测试与LoadRunner实战》、《精通软件性能测试与LoadRunner实战》和《精通软件性能测试与LoadRunner最佳实战》面市后,受到广大软件测试和开发人员的关注与好评。鉴于很...

fish_yy
2014/11/14
0
0
一个前端的自我修养

今天给大家分享的主题是前端的自我成长,这是一个关于成长的话题。 很多人都有这样的感觉:听了很多技术圈子的分享,有的有深度,有的循循善诱,深入浅出,但是呢,几年下来,到底哪些用上了...

xrzs
2016/03/24
377
1
web前端面试经历及疑惑

今天去一家公司面试,应聘的是web前端开发的。 在谈到对于自己未来发展的规划时,我很明确的说自己以后还是会一直专注于web前端这方面的发展,因为这是我喜欢、感兴趣的工作。针对我的回答,...

9494
2012/02/29
8K
41
单链表复制你已经会了,如果我们再加个指针...

面试 18:复杂链表的复制(剑指 Offer 第 26 题) 在上一篇推文中,我们留下的习题是来自《剑指 Offer》 的面试题 26:复杂链表的复制。 请实现复杂链表的复制,在复杂链表中,每个结点除了 ...

nanchen2251
2018/08/01
0
0
面试 18:复杂链表的复制(剑指 Offer 第 26 题)

面试 18:复杂链表的复制(剑指 Offer 第 26 题) 在上一篇推文中,我们留下的习题是来自《剑指 Offer》 的面试题 26:复杂链表的复制。 请实现复杂链表的复制,在复杂链表中,每个结点除了 ...

nanchen2251
2018/08/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

拥有有趣灵魂的程序员们,程序员访谈(一)

点击上方关注我们,让小care关爱你! 程序员群体一直都是低调多金的代表,而近段时间以来,程序员在网络上除了高薪之外,总是会和屌丝、苦逼、格子衫、没情趣...联系在一起。黑程序员的段子也...

ITCare
今天
14
0
Linux输入法fcitx的安装问题

Fcitx 总共要安装的包如下 fcitxfcitx-binfcitx-config-commonfcitx-config-gtk | fcitx-config-gtk2fcitx-datafcitx-frontend-allfcitx-frontend-gtk2fcitx-frontend-gtk3......

CHONGCHEN
今天
8
0
网络基础

前言: 最近整理一些以前的学习笔记(有部分缺失,会有些乱,日后再补)。 过去都是存储在本地,此次传到网络留待备用。 计算机网络的功能: 1.数据通信; 2.资源共享; 3.增加数据可靠性; 4....

迷失De挣扎
今天
7
0
spring boot升级到spring cloud

1、先升级spring boot 版本到2.1.3 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-dependencies</artifactId> <version>2.1.3.RELEAS......

moon888
今天
12
0
从蓝鲸视角谈DevOps

DevOps源于Development和Operations的组合 常见的定义 DevOps是一种重视“软件开发人员(Dev)”和“IT运维技术人员(Ops)”之间沟通合作的文化、运动或惯例。透过自动化“软件交付”和“架构变...

嘉为科技
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部