欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

前端面试题

程序员文章站 2022-04-18 21:54:44
...
HTML+CSS
1.对WEB标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；

2.xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
XHTML 属性值必须在引号中，即使是以数字形式的属性。
XML不支持属性最小化.属性-属性值必须完整成对的写出.像disabled,checked这样的属性名不能在不指定属性值的情况下出现.
空元素必须有结束标签,或者起始标签必须以/>结束.例如,<br/>或<hr></hr>
别用name用id

3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。（html/Xhtml）一般为严格 过度 基于框架的html文档
加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug

4.行内元素有哪些？块级元素有哪些？CSS的盒模型？
块级元素：div p h1 h2 h3 h4 form ul table menu
行内元素: a b br i span input select img
Css盒模型:内容，border ,margin，padding

5.CSS引入的方式有哪些? link和@import的区别是?
内联 内嵌 外链 导入   
区别 ：同时加载
           前者无兼容性，后者CSS2.1以下浏览器不支持
           Link 支持使用javascript改变样式，后者不可

6.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？
标签选择符  类选择符 id选择符
class可以继承 伪类A标签可以继承 列表 UL LI DL DD DT可以继承
优先级就近原则，样式定义最近者为准  载入样式以最后载入的定位为准。
优先级为 ！Important > id > class > tag。Important比内联优先级高

7.前端页面有哪三层构成，分别是什么？作用是什么？
结构层 Html：显示什么内容
表示层 CSS：如何显示内容
 行为层 js：内容如何让对事件做出反应。

8.css的基本语句构成是？
选择器{属性1:值1;属性2:值2;……}

9.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
Ie(Ie内核)  火狐（Gecko） 谷歌（webkit） opear(Presto)

10.写出几种IE6 BUG的解决方法
1.双边距BUG float引起的  使用display：inline
2.3像素问题 使用多个float和注释引起的 使用dislpay:inline -3px  
3.超链接hover 点击后失效  使用正确的书写顺序 link visited hover active
4.Ie z-index问题 给父级添加position:relative
5.Png 透明 使用js代码 改
6.Min-height 最小高度 ！Important 解决’
7.select 在ie6下遮盖 使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

11.标签上title与alt属性的区别是什么？
alt属性的功能是不能显示图像信息时候的替换文字，Alt属性值的长度必须少于100个英文字符
Title 为该属性提供信息。额外的说明信息和非本质的信息请使用title属性

12.描述css reset的作用和用途。
Reset重置浏览器的css默认属性        浏览器的品种不同，样式不同，然后重置，让他们统一。
例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。

13.解释css sprites，如何使用。
Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

14.浏览器标准模式和怪异模式之间的区别是什么？
盒子模型 渲染模式的不同

如何设置为标准模式： 
加入以下任意一种：HTML4提供了三种DOCTYPE可选择：
<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd“>  

<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01//EN” ”http://www.w3.org/TR/html4/strict.dtd“>   

<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01 Frameset//EN” ”http://www.w3.org/TR/html4/frameset.dtd“> 
 
XHTML1.0提供了三种DOCTYPE可选择： 
(1)过渡型（Transitional ）
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> 

(2)严格型（Strict ）
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

“> 

(3)框架型（Frameset ）
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Frameset//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd
“>
 
如何判定现在是标准模式还是怪异模式： 
方法一：执行以下代码
alert(window.top.document.compatMode) ;
//BackCompat  表示怪异模式
//CSS1Compat  表示标准模式 
方法二：jquery为我们提供的方法，如下：
alert(.boxModel)alert(.support.boxModel)



15.你如何对网站的文件和资源进行优化？期待的解决方案包括：

文件合并
文件最小化/文件压缩
使用CDN托管（多个域名来提供缓存）
缓存的使用

16.为什么利用多个域名来提供网站资源会更有效？
①CDN缓存更方便
②突破浏览器的并发限制。（浏览器同一时间从一个域名可以下载的资源，浏览器同时保持对一个域名的连接数都是有限制的）
③对静态资源文件使用了独立的无cookie域名。避免域名污染，节省带宽。
④对于UGC的内容和主站隔离，防止不必要的安全问题。（例上传js获取主站cookie）
⑤数据分流，甚至分到了不同的物理集群。通过子域名分流比较方便
关于域名也不是越多越好，虽然服务器端可以做范解释，浏览器端dns也是耗时间的，如果走https的话还要买证书。
16.什么是语义化的HTML？
语义化的html就是使用语义化的标记来构造文档内容标题用h1-h6，段落用p，列表用ul,li。比如不要用<div>来代替<p>标记标题。
直观的认识标签  对于搜索引擎的抓取有好处，去掉或样式丢失的时候能让页面呈现清晰的结构。

17.清除浮动的几种方式，各自的优缺点
先来说说浮动的原理和清除浮动的原因：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于(或脱离了)文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响行内元素(如span、a、em)的排列，即行内元素浮动后就会表现得像块级元素一样。当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（或者可以称为“高度塌陷”现象）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。

清除浮动方法：

（1）添加额外(空)标签
通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>
优点：通俗易懂，容易掌握；
缺点：增加无意义的标签，有违结构与表现的分离。

（2）父元素设置 overflow：hidden
通过设置父元素overflow值为hidden；在IE6中还需要触发 hasLayout ，例如定义width或 zoom：1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度；
优点：不存在结构和语义化问题，代码量极少；
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

（3）父元素也设置浮动
优点：不存在结构和语义化问题，代码量极少;
缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用。

（4）给父元素添加clearfix类
由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
优点：结构和语义化完全正确,代码量居中;
缺点：复用方式不当会造成代码量增加。

clearfix类代码如下：

    

  1. 

    

    //:after会在元素内容——而不是元素后面插入一个伪素，该规则只添加了一个清除的包含句点作为非浮动元素，注意，:after不是伪类，而是伪元素
    

    2. 

  2. 

    

    
.clearfix:after { 
    

    3. 

  3. 

    

        content: “.”;
    

    4. 

  4. 

    

        display: block;
    

    5. 

  5. 

    

        height: 0;
    

    6. 

  6. 

    

        visibility: hidden;
    

    7. 

  7. 

    

        clear: both;
    

    8. 

  8. 

    

    }
    

    9. 

  9. 

    

    // 触发IE6、7下的haslayout

    

    10. 

  10. 

    

    
.clearfix {
    

    11. 

  11. 

    

        *zoom: 1;
    

    12. 

  12. 

    

    }
    

    13.



Javascript
1.javascript的typeof返回哪些数据类型
Object number function boolean underfind

2.例举3种强制类型转换和2种隐式类型转换？
强制（parseInt,parseFloat,number）
隐式（== - +）

3.split() join() 的区别
前者是切割成数组的形式，后者是将数组转换成字符串

4.数组方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除
Unshift()头部添加  shift()头部删除

5.事件绑定和普通事件有什么区别

普通事件：覆盖问题、可读性问题、this 传递问题

W3C 的现代事件绑定比我们自定义的好处就是：1.不需要自定义了；2.可以屏蔽相同的函数；3.可以设置冒泡和捕获。

IE:1.不支持捕获，只支持冒泡；2.IE 添加事件不能屏蔽重复的函数；3.IE 中的this 指向的是window 而不是DOM 对象,如果要传递this，改成call 即可。4.在传统事件上，IE 是无法接受到event 对象的，但使用了attchEvent()却可以，但有些区别。

6.IE和DOM事件流的区别
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题

7.IE和标准下有哪些兼容性的写法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
(http://blog.csdn.net/hnyysly/article/details/31819629)

8.ajax请求的时候get 和post方式的区别
一个在url后面 一个放在虚拟载体里面
有大小限制
安全问题
应用不同 一个是论坛等只需要请求的，一个是类似修改密码的

9.call和apply的区别

相同点：都可以在特定作用域(环境)下调用函数；

不同点：传递的参数形式不同，call方法的参数必须一个个列举出来，而apply方法的参数是以一个数组的形式进行传递，也支持arguments参数。

Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)



10.ajax请求时，如何解释json数据

使用eval parse 鉴于安全性考虑 使用parse更靠谱(http://blog.csdn.net/hnyysly/article/details/32176577)
11.b继承a的方法
13.事件委托是什么
让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！可以提高性能。



14.闭包是什么，有什么特性，对页面有什么影响

闭包就是能够读取其他函数内部变量的函数。当内部函数 在定义它的作用域 的外部 被引用时,就创建了该内部函数的闭包 ,如果内部函数引用了位于外部函数的变量,当外部函数调用完毕后,这些变量在内存不会被释放.
它的最大用处:1.保护函数内的变量安全
    2.在内存中维持一个变量
    3通过保护变量的安全实现JS私有属性和私有方法
总结：1，闭包外层是个函数.
         2，闭包内部都有函数.
3，闭包会return内部函数.
4，闭包返回的函数内部不能有return.(因为这样就真的结束了)。
5，执行闭包后,闭包内部变量会存在,而闭包内部函数的内部变量不会存在.
http://blog.csdn.net/gaoshanwudi/article/details/7355794 此链接可查看（问这个问题的不是一个公司）



15.如何阻止事件冒泡和默认事件

canceBubble   return false
(http://blog.csdn.net/hnyysly/article/details/31374603)



16.添加 删除 替换 插入到某个接点的方法

obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild



17.解释jsonp的原理，以及为什么不是真正的ajax

利用在页面中创建<script>节点的方法向不同域提交HTTP请求的方法称为JSONP，这项技术可以解决跨域提交Ajax请求的问题。
Ajax是页面无刷新请求数据操作，ajax不允许跨域通信



18.javascript的本地对象，内置对象和宿主对象

本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等



19.document load 和document ready的区别

Document.ready原生种没有这个方法，jquery中有 $().ready(function)
一般情况先一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。
页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的所有元素都加载完成。



20.”==”和“===”的不同

前者会自动转换类型
后者不会，比较时除了对值进行比较以外,还比较两边的数据类型



21.javascript的同源策略

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组
22.编写一个数组去重的方法
http://blog.csdn.net/hnyysly/article/details/32717175
23.排序算法




相关标签： 前端 前端面试

上一篇： 乐凯撒披萨1024程序员节暗号代码

下一篇： 桶排序

推荐阅读