前端面试题及答案（1）

来源：互联网发布：lol物品数据库编辑：程序博客网时间：2024/05/19 11:48

(1) call() 和 apply() 的区别

相同点：改变作用域（借用别人的方法来调用）

a.call(b) a.apply(b) a可调用b的所有方法

a.getName.call(b) a.getName.apply(b) a作执行时上下文对象调用b的getName()方法

不同点：传递参数的方式不同

a.call(b,arg1,arg2,arg3,...) 参数单个传递

a.apply(b,[arg1,arg2,arg3,...]) 参数封装成数组传递

a.getName.call(b,arg1,arg2,arg3) = a.getName.apply(b,arguments)

(2) 谈谈你对web标准的理解，以及对w3c组织的认识

web标准就是将结构（html）、表现（css）、行为（js）三者分离，使其更具模块化

w3c对web标准提出了规范化的要求（代码规范）：

结构：（1）标签字母小写

（2）标签闭合

（3）标签不允许随意嵌套

表现和行为：（1）尽量使用外链css样式表和js脚本，从而达到结构、表现和行为三者分离，符合规范，同时提高页面渲染速度，提高用户的体验

（2）样式与标签的分离，更合理的语义化标签，使内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，从而降低维护成本、改版更方便

（3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性

(3) link和@import导入样式的区别

link：<link rel="stylesheet" type="text/css" href="../main.css">

@import：<style type="text/css" media="screen"> @import url("CSS文件"); </style>

link是一个html标签，而@import是一个css标签；

link除了调用css外还可以有其他作用譬如声明页面链接属性，声明目录，rss等等，而@import就只能调用css；

link引用CSS时，在页面载入时同时加载，@import需要页面网页完全载入以后加载；

link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持；

link支持使用Javascript控制DOM去改变样式，而@import不支持。

(4) doctype的作用，严格模式与混杂模式的区别，有何作用？

<!DOCTYPE>声明位于文档最前面，告知浏览器解析器用什么文档类型规范来解析这个文档。

严格模式的排版和js运作模式是：以该浏览器支持的最高标准运行

混杂模式：页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作

DOCTYPE不存在或格式不正确时会导致文档以混杂模式出现

(5) css中如何设置英文首字母大写

text-transform： capitalize | uppercase | lowercase

（单词首字母大写）（全大写）（全小写）

(6) px和em，rem的区别

px：相对长度单位，px相对当前显示屏幕分辨率而言（屏幕上最小的一个点）

em：相对长度单位，相对于当前对象内文本的字体尺寸，若未设定，则相对于浏览器默认的字体尺寸，会继承父级元素的字体大小，若父元素是16px，子元素是7.5em，则子元素就是12（0.75*16）px

rem（浏览器支持还不是很理想）：相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明：p {font-size:14px; font-size:.875rem;}，这些浏览器会忽略用rem设定的字体大小。

(7) 一个web页面的生命周期是什么

页面的生命周期一般只指从请求页面到卸载页面的过程。这之间又具体分以下几个阶段。

1、页请求：页请求发生在页面生命周期开始之前，用户请求页面时，asp.net将确定是否需要分析和编译页。

2、开始：在开始阶段，将设置页属性，如request和response。在此阶段，页还将确定请求是回发请求还是新请求，并设置ispostback属性。

3、页初始化：在初始化期间可以使用页中的控件。并设置控件的ID属性。

4、加载：在加载期间，如果当前请求是回发请求，则将使用视图状态和控件状态恢复的信息加载控件属性。

5、验证：在验证期间，将调用所有的验证程序控件的validate，此方法将设置各个验证程序控件和页的isvalidate属性。

6、回发事件处理：如果请求是回发请求，则将调用所有的事件处理程序。

7、呈现：在呈现之前，会对页和所有控件保存视图状态。在呈现阶段中，会对每个控件调用render方法，它会提供一个文本编写器，用户将控件的输出写入到response属性和outputstream中。

8、卸载：完全呈现页，并将页面发送到客户端，准备对其该页后，将调用卸载。此时将卸载页属性并执行清理。

(8) 行内元素与块级元素有哪些不同

行内元素：一个元素占一行，可改变宽高；

内联元素：不可设宽高，margin和padding都是左右有效，上下无效

(9) 介绍一下你对浏览器内核的理解

浏览器内核就是用来渲染网页内容的，将网页的代码转换为最终你看得见的页面。

Trident内核：IE浏览器使用的内核，360浏览器、搜狗浏览器等都使用此内核

Gecko内核：火狐浏览器的内核

KHTML(linux):Konqueror

Webkit：Safari、android

Chromium：chorm

Presto：opera

(10) 谈谈你对html语义化的理解

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码，同时让浏览器的爬虫和机器很好地解析

(11) css选择符有哪些？哪些属性可以继承？

   基本可以分为：通配选择器，标签选择器，类选择器（E{}），ID选择器（#ID{}），{简单属性选择，具体属性选择，根据部分属性值选择，特定属性选择（E[attr]{}）}，从结构上来分还有后代选择器（E1 E2{}），子元素选择器（E1>E2{}），相邻兄弟选择器以及伪类（：hover）。   可以继承的有 font-size font-family color     不可以继承的有 border padding margin background-color width height等

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

(13) jquery的优缺点是什么？    优点：实现脚本与页面的分离；最少的代码做最多的事；性能好；很多厂商支持该框架；有大量可用的插件    缺点：不能向后兼容；同时使用多个插件易有冲突；稳定性不强；jQuery核心代码库对动画和特效的支持相对较差

(14) 写出几种IE6 BUG的解决方法

   1.双边距BUG float引起的 使用display：inline或display：block明确其元素类型   2.3像素问题 使用float引起的 使布局在同一行上的元素都加上float浮动   3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active   4.Ie z-index问题 给父级添加position:relative   5.Min-height 最小高度 ！Important 解决   6.select 在ie6下遮盖 使用iframe嵌套   7.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

阅读全文

0 0