前端面试题汇总
一、HTML和CSS 21
- 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? 21
- 每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？ 21
- Quirks模式是什么？它和Standards模式有什么区别 21
- div+css的布局较table布局有什么优点？ 22
- img的alt与title有何异同？ strong与em的异同？ 22
- 你能描述一下渐进增强和优雅降级之间的不同吗? 23
- 为什么利用多个域名来存储网站资源会更有效？ 23
- 请谈一下你对网页标准和标准制定机构重要性的理解。 24
- 请描述一下cookies，sessionStorage和localStorage的区别？ 24
- 简述一下src与href的区别。 24
- 知道的网页制作会用到的图片格式有哪些？ 25
- 知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？ 25
- 在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？ 25
- 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。 25
- 你如何理解HTML结构的语义化？ 26
- 谈谈以前端角度出发做好SEO需要考虑什么？ 27
- 有哪项方式可以对一个DOM设置它的CSS样式？ 28
- CSS都有哪些选择器？ 28
- CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？ 29
- 超链接访问过后hover样式就不出现的问题是什么？如何解决？ 29
- 什么是Css Hack？ie6,7,8的hack分别是什么？ 30
- 行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？ 30
- 什么是外边距重叠？重叠的结果是什么？ 31
- rgba()和opacity的透明效果有什么不同？ 31
- css中可以让文字在垂直和水平方向上重叠的两个属性是什么？ 31
- 如何垂直居中一个浮动元素？ 31
- px和em的区别。 32
- 描述一个”reset”的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？ 33
- Sass、LESS是什么？大家为什么要使用他们？ 33
- display:none与visibility:hidden的区别是什么？ 33
- CSS中link和@import的区别是： 34
- 简介盒子模型： 34
- 为什么要初始化样式？ 34
- BFC是什么? 35
- html语义化是什么？ 35
- Doctype的作用？严格模式与混杂模式的区别？ 35
- IE的双边距BUG：块级元素float后设置横向margin，ie6显示的margin比设置的较大。 35
- HTML与XHTML——二者有什么区别？ 35
- html常见兼容性问题？ 36
- 对WEB标准以及W3C的理解与认识 36
- 行内元素有哪些?块级元素有哪些?CSS的盒模型? 36
- 前端页面有哪三层构成，分别是什么?作用是什么? 37
- Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 37
- 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？ 37
- CSS的盒子模型？ 37
- CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？ 37
- 如何居中div,如何居中一个浮动元素? 38
- 浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？ 39
- 列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？ 40
- absolute的containing block计算方式跟正常流有什么不同？ 40
- 对WEB标准以及W3C的理解与认识 41
- css的基本语句构成是? 41
- 浏览器标准模式和怪异模式之间的区别是什么? 41
- CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？ 41
- 行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？ 42
- 什么是外边距重叠？重叠的结果是什么？ 42
58、描述一个"reset"的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？ 42 - 说display属性有哪些？可以做什么？ 43
- 哪些css属性可以继承？ 43
- css优先级算法如何计算？ 43
- b标签和strong标签,i标签和em标签的区别？ 43
- 有那些行内元素、有哪些块级元素、盒模型？ 43
- 有哪些选择符，优先级的计算公式是什么？行内样式和！important哪个优先级高？ 45
- 我想让行内元素跟上面的元素距离10px，加margin-top和padding-top可以吗？ 45
- CSS的盒模型由什么组成？ 45
- 说说display属性有哪些？可以做什么？ 46
- 哪些css属性可以继承？ 46
- css优先级算法如何计算？ 46
二、JS基础 46 - javascript的typeof返回哪些数据类型 46
- 例举3种强制类型转换和2种隐式类型转换? 47
- split() 、join() 的区别 47
- 数组方法pop() push() unshift() shift() 47
- 事件绑定和普通事件有什么区别 47
- IE和DOM事件流的区别 48
- IE和标准下有哪些兼容性的写法 48
- call和apply的区别 49
- b继承a的方法 49
- 如何阻止事件冒泡和默认事件 50
- 添加 删除 替换 插入到某个接点的方法 50
- javascript的本地对象，内置对象和宿主对象 50
- window.onload 和document ready的区别 50
- ””和“=”的不同 51
- javascript的同源策略 51
- JavaScript是一门什么样的语言，它有哪些特点？ 51
- JavaScript的数据类型都有什么？ 52
- 已知ID的Input输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架) 53
- 希望获取到页面中所有的checkbox怎么做？(不使用第三方框架) 53
- 设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色(不使用第三方框架) 53
- 当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？ 53
- 看下列代码输出为何？解释原因。 54
- 看下列代码,输出什么？解释原因。 54
- 看下列代码,输出什么？解释原因。 54
- 看代码给答案。 56
- 已知数组var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert出”This is Baidu Campus”。 56
- 已知有字符串foo=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”。 56
- var numberArray = [3,6,2,4,1,5]; （考察基础API） 57
- 输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26 57
- 将字符串”{ KaTeX parse error: Expected 'EOF', got '}' at position 3: id}̲</td><td>{ name}”中的{ KaTeX parse error: Expected 'EOF', got '}' at position 3: id}̲替换成10，{ name}替换成Tony （使用正则表达式） 58
- 为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将<, >, &, “进行转义 58
- foo = foo||bar ，这行代码是什么意思？为什么要这样写？ 59
- 看下列代码，将会输出什么?(变量声明提升) 59
- 用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。 60
- 把两个数组合并，并删除第二个元素。 61
- 怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步） 61
- 有这样一个URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定)，将其按key-value形式返回到一个json结构中，如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。 62
- 正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量var reg=//有什么不同？匹配邮箱的正则表达式？ 63
- 看下面代码，给出输出结果。 63
- 写一个function，清除字符串前后的空格。（兼容所有浏览器） 64
- Javascript中callee和caller的作用？ 65
- Javascript中, 以下哪条语句一定会产生运行错误？ 答案( B C ) 66
- 以下两个变量a和b，a+b的哪个结果是NaN？ 答案( AC ) 66
- var a=10; b=20; c=4; ++b+c+a++ 以下哪个结果是正确的？答案( B ) 66
- 下面的JavaScript语句中，（ D ）实现检索当前页面中的表单元素中的所有文本框，并将它们全部清空 66
- 要将页面的状态栏中显示“已经选中该文本框”，下列JavaScript语句正确的是（ A ） 67
- 以下哪条语句会产生运行错误：（AD） 67
- 以下哪个单词不属于javascript保留字：（B） 67
- 请选择结果为真的表达式：（C） 68
- Javascript中, 如果已知HTML页面中的某标签对象的id=”username”，用____document.getElementById(‘username’)___ _方法获得该标签对象。 68
- typeof运算符返回值中有一个跟javascript数据类型不一致，它是________”function”_________。 68
- 定义了一个变量，但没有为该变量赋值，如果alert该变量，javascript弹出的对话框中显示___undefined______ 。 68
- 分析代码，得出正确的结果。 68
- 写出函数DateDemo的返回结果，系统时间假定为今天 68
- 写出程序运行的结果？ 69
- 阅读以下代码，请分析出结果： 69
- 补充按钮事件的函数，确认用户是否退出当前页面，确认之后关闭窗? 69
- 写出简单描述html标签（不带属性的开始标签和结束标签）的正则表达式，并将以下字符串中的html标签去除掉 70
- 完成foo()函数的内容，要求能够弹出对话框提示当前选中的是第几个单选框。 70
- 完成函数showImg()，要求能够动态根据下拉列表的选项变化，更新图片的显示 71
- 截取字符串abcdefg的efg 72
- 列举浏览器对象模型BOM里常用的至少4个对象，并列举window对象的常用方法至少5个 72
- 简述列举文档对象模型DOM里document的常用的查找访问节点的方法并做简单说明 72
- 希望获取到页面中所有的checkbox怎么做？(不使用第三方框架) 72
- 简述创建函数的几种方式 73
- Javascript如何实现继承？ 73
- Javascript创建对象的几种方式？ 73
- iframe的优缺点？ 75
- 请你谈谈Cookie的弊端？ 75
- js延迟加载的方式有哪些？ 76
- documen.write和 innerHTML 的区别？ 76
- 哪些操作会造成内存泄漏？ 76
- 判断一个字符串中出现次数最多的字符，统计这个次数 77
- 写一个获取非行间样式的函数 77
- 事件委托是什么 78
- 闭包是什么，有什么特性，对页面有什么影响 78
- 解释jsonp的原理，以及为什么不是真正的ajax 79
- javascript的本地对象，内置对象和宿主对象 79
- 字符串反转，如将 ‘12345678’ 变成 ‘87654321’ 79
- 将数字 12345678 转化成 RMB形式 如： 12,345,678 79
- 生成5个不同的随机数； 80
- 去掉数组中重复的数字 方法一； 81
- 阶乘函数； 82
- window.location.search() 返回的是什么？ 83
- window.location.hash 返回的是什么？ 83
- window.location.reload() 作用？ 83
- 、javascript 中的垃圾回收机制？ 83
- 看题做答： 84
- 下面输出多少？ 84
- 再来一个 85
- a输出多少？ 86
- 看程序，写结果 87
- JS的继承性 87
- 精度问题: JS 精度不能精确到 0.1 所以 。。。。同时存在于值和差值中 88
- 加减运算 88
- 什么是同源策略？ 88
- 为什么不能定义1px左右的div容器？ 89
- 结果是什么？ 89
- 输出结果 89
- 计算字符串字节数： 90
- 结果是： 90
- 声明对象，添加属性，输出属性 91
- 匹配输入的字符：第一个必须是字母或下划线开头，长度5-20 91
- 检测变量类型 92
- 如何在HTML中添加事件，几种方法？ 92
- BOM对象有哪些，列举window对象？ 92
- 请问代码实现 outerHTML 93
- JS中的简单继承 call方法！ 94
- bind(), live(), delegate()的区别 95
- 看下列代码输出什么？ 96
- 看下列代码,输出什么？ 96
- 你如何优化自己的代码？ 96
- 请描述出下列代码运行的结果 96
- 怎样实现两栏等高？ 97
- 使用js实现这样的效果：在文本域里输入文字时，当按下enter键时不换行，而是替换成“{ {enter}}”,(只需要考虑在行尾按下enter键的情况). 98
- 以下代码中end字符串什么时候输出 98
- specify(‘hello,world’)//=>’h,e,l,l,o,w,o,r,l,d’实现specify函数 99
- 请将一个URL的search部分参数与值转换成一个json对象 99
- 请用原生js实现jquery的get\post功能，以及跨域情况下 99
- 请简要描述web前端性能需要考虑哪方面，你的优化思路是什么？ 99
- 、简述readyonly与disabled的区别 99
- 写出3个使用this的典型应用 100
- 请尽可能详尽的解释ajax的工作原理 100
- 、为什么扩展javascript内置对象不是好的做法？ 100
- 什么是三元表达式？“三元”表示什么意思？ 100
- 浏览器标准模式和怪异模式之间的区别是什么？ 100
- modulo(12,5)//2 实现满足这个结果的modulo函数 101
- HTTP协议中，GET和POST有什么区别？分别适用什么场景 ？ 101
- HTTP状态消息200 302 304 403 404 500分别表示什么 101
- HTTP协议中，header信息里面，怎么控制页面失效时间（last-modified,cache-control,Expires分别代表什么） 101
- HTTP雷锋议目前常用的有哪几个？KEEPALIVE从哪个版本开始出现的？ 101
- 业界常用的优化WEB页面加载速度的方法（可以分别从页面元素展现，请求连接，css,js,服务器等方面介绍） 101
- 列举常用的web页面开发，调试以及优化工具 101
- 解释什么是sql注入，xss漏洞 101
- 如何判断一个js变量是数组类型 101
- 请列举js数组类型中的常用方法 101
- FF与IE中如何阻止事件冒泡，如何获取事件对象，以及如何获取触发事件的元素 101
- 列举常用的js框架以及分别适用的领域 102
- js中如何实现一个map 103
- js可否实现面向对象编程，如果可以如何实现js对象的继承 103
- 约瑟夫环—已知n个人（以编号1，2，3…分别表示）围坐在一张圆桌周围。从编号为k的人开始报数，数到m的那个人出列；他的下一个人又从1开始报数，数到m的那个人又出列；依此规律重复下去，直到圆桌周围的人全部出列。 103
- 有1到10w这个10w个数，去除2个并打乱次序，如何找出那两个数？ 103
- 如何获取对象a拥有的所有属性（可枚举的、不可枚举的，不包括继承来的属性） 103
- 有下面这样一段HTML结构，使用css实现这样的效果： 103
- 下面这段代码想要循环输出结果01234，请问输出结果是否正确，如果不正确，请说明为什么，并修改循环内的代码使其输出正确结果 103
- 以下哪些是javascript的全局函数：（ABC） 104
- 关于IE的window对象表述正确的有：（ACD） 104
- 下面正确的是 A 105
- 错误的是 B 105
- 不用任何插件，如何实现一个tab栏切换？ 105
- 变量的命名规范以及命名推荐 106
- 三种弹窗的单词以及三种弹窗的功能 106
- console.log( 8 | 1 ); 输出值是多少？ 107
- 只允许使用 + - * / 和 Math.* ，求一个函数 y = f(x, a, b);当x > 100 时返回 a 的值，否则返回 b 的值，不能使用 if else 等条件语句，也不能使用|,?:,数组。 107
- JavaScriptalert(0.4*0.2);结果是多少？和你预期的一样吗？如果不一样该如何处理？ 108
- 一个div，有几种方式得到这个div的jQuery对象？ 想直接获取这个div的dom对象，如何获取？dom对象如何转化为jQuery对象？ 108
- 、主流浏览器内核 108
- 如何显示/隐藏一个dom元素？请用原生的JavaScript方法实现 108
- jQuery框架中$.ajax()的常用参数有哪些？写一个post请求并带有发送数据和返回数据的样例 109
- JavaScript的循环语句有哪些？ 109
- 作用域-编译期执行期以及全局局部作用域问题 109
- 闭包：下面这个ul，如何点击每一列的时候alert其index？ 110
- 列出3条以上ff和IE的脚本兼容问题 111
- 如现在有一个效果，有显示用户头像、用户昵称、用户其他信息；当用户鼠标移到头像上时，会弹出用户的所有信息；如果是你，你会如何实现这个功能，请用代码实现？ 111
- 用正则表达式，写出由字母开头，其余由数字、字母、下划线组成的6~30的字符串？ 111
- 列举浏览器对象模型BOM里常用的至少4个对象，并列举window对象的常用方法至少5个 （10分） 112
- 在Javascript中什么是伪数组？如何将伪数组转化为标准数组？ 112
- 写一个函数可以计算 sum(5,0,-5);输出0; sum(1,2,3,4);输出10; 112
- 《正则》写出正确的正则表达式匹配固话号，区号3-4位，第一位为0，中横线，7-8位数字，中横线，3-4位分机号格式的固话号 113
- 《算法》 一下A,B可任选一题作答，两题全答加分 113
- 请写一个正则表达式：要求最短6位数，最长20位，阿拉伯数和英文字母（不区分大小写）组成 114
- 统计1到400亿之间的自然数中含有多少个1？比如1-21中，有1、10、11、21这四个自然数有5个1 115
- 删除与某个字符相邻且相同的字符，比如fdaffdaaklfjklja字符串处理之后成为“fdafdaklfjklja” 115
- 请写出三种以上的Firefox有但，InternetExplorer没有的属性或者函数 115
- 请写出一个程序，在页面加载完成后动态创建一个form表单，并在里面添加一个input对象并给它任意赋值后义post方式提交到：http://127.0.0.1/save.php 115
- 用JavaScript实现冒泡排序。数据为23、45、18、37、92、13、24 116
- 前端代码优化的方法 116
- 下列JavaScript代码执行后，依次alert的结果是 117
- 下列JavaScript代码执行后，iNum的值是 118
- 输出结果是多少？ 119
- 用程序实现找到html中id名相同的元素？ 123
- 下列JavaScript代码执行后，运行的结果是 125
- 下列JavaScript代码执行后，依次alert的结果是 125
- 下列JavaScript代码执行后的效果是 126
- 下列JavaScript代码执行后的li元素的数量是 128
- 程序中捕获异常的方法？ 128
- 将字符串”{ KaTeX parse error: Expected 'EOF', got '}' at position 3: id}̲</td><td>{ name}”中的{ KaTeX parse error: Expected 'EOF', got '}' at position 3: id}̲替换成10，{ name}替换成Tony （使用正则表达式） 129
- 给String对象添加一个方法，传入一个string类型的参数，然后将string的每个字符间价格空格返回，例如：addSpace(“hello world”) // -> ‘h e l l o ?w o r l d’ 129
- 数组和字符串 129
- 下列控制台都输出什么 131
第2题： 131
第3题： 132
第4题： 132
第5题： 132
第6题： 133
第7题： 133
第8题： 133
第9题： 134
第10题： 134
第11题：考点：函数声明提前 134
第12题： 135
第13题： 135
第14题： 135
第15题 136
第16题：以下执行会有什么输出 136
三、HTML5 CSS3 137 - CSS3有哪些新特性？ 137
- html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？ 137
- 本地存储（Local Storage ）和cookies（储存在用户本地终端上的数据）之间的区别是什么？ 138
- 如何实现浏览器内多个标签页之间的通信? 138
- 你如何对网站的文件和资源进行优化？ 138
- 什么是响应式设计？ 138
- 新的 HTML5 文档类型和字符集是？ 139
- HTML5 Canvas 元素有什么用？ 139
- HTML5 存储类型有什么区别？ 139
- 用H5+CSS3解决下导航栏最后一项掉下来的问题 139
- CSS3新增伪类有那些？ 139
- 请用CSS实现：一个矩形内容，有投影，有圆角，hover状态慢慢变透明。 139
- 描述下CSS3里实现元素动画的方法 140
- html5\CSS3有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？ 140
- 你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏 品 字布局 如何设计? 140
- 你能描述一下渐进增强和优雅降级之间的不同吗? 141
- 为什么利用多个域名来存储网站资源会更有效？ 141
CDN缓存更方便 141 - 请谈一下你对网页标准和标准制定机构重要性的理解。 142
- 请描述一下cookies，sessionStorage和localStorage的区别？ 142
- 知道css有个content属性吗？有什么作用？有什么应用？ 142
- 如何在 HTML5 页面中嵌入音频? 143
143 - 如何在 HTML5 页面中嵌入视频？ 143
143 - HTML5 引入什么新的表单属性？ 143
- CSS3新增伪类有那些？ 143
- (写)描述一段语义的html代码吧。 144
- cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage区别 144
- html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？ 144
- 如何区分： DOCTYPE声明\新增的结构元素\功能元素 145
- 语义化的理解？ 145
- HTML5的离线储存？ 145
- 写出HTML5的文档声明方式 145
- HTML5和CSS3的新标签 145
- 自己对标签语义化的理解 146
四、移动web开发 146
1、移动端常用类库及优缺点 146
2、Zepto库和JQ区别 146
五、Ajax 146
1、Ajax 是什么? 如何创建一个Ajax？ 146
}else{ 146
2、同步和异步的区别? 147
3、如何解决跨域问题? 147
4、页面编码和被请求的资源编码如果不一致如何处理？ 147
5、简述ajax 的过程。 147
6、阐述一下异步加载。 148
7、请解释一下 JavaScript 的同源策略。 148
8、GET和POST的区别，何时使用POST？ 148
POST：一般用于修改服务器上的资源，对所发送的信息没有限制 148
9、ajax 是什么?ajax 的交互模型?同步和异步的区别?如何解决跨域问题? 148
10、 Ajax的最大的特点是什么。 149
11、ajax的缺点 149
12、ajax请求的时候get 和post方式的区别 149
13、解释jsonp的原理，以及为什么不是真正的ajax 149
14、什么是Ajax和JSON，它们的优缺点。 149
15、http常见的状态码有那些？分别代表是什么意思？ 149
16、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？ 150
17、ajax请求的时候get 和post方式的区别 150
18、ajax请求时，如何解释json数据 150
19、.javascript的本地对象，内置对象和宿主对象 150
20、为什么利用多个域名来存储网站资源会更有效？ 151
21、请说出三种减低页面加载时间的方法 151
22、HTTP状态码都有那些。 151
六、JS高级 151
1、 JQuery一个对象可以同时绑定多个事件，这是如何实现的？ 151
2、 知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么? 151
3、 如何测试前端代码? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit…)? 152
5、 简述一下 Handlebars 的基本用法？ 152
6、 简述一下 Handlerbars 的对模板的基本处理流程， 如何编译的？如何缓存的？ 152
7、 用js实现千位分隔符? 152
8、 检测浏览器版本版本有哪些方式？ 152
9、 我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执行几次事件，然后会先执行冒泡还是捕获 152
10、实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制 152
11、如何消除一个数组里面重复的元素？ 154
12、小贤是一条可爱的小狗(Dog)，它的叫声很好听(wow)，每次看到主人的时候就会乖乖叫一声(yelp)。从这段描述可以得到以下对象： 154
13、下面这个ul，如何点击每一列的时候alert其index?（闭包） 155
14、编写一个JavaScript函数，输入指定类型的选择器(仅需支持id，class，tagName三种简单CSS选择器，无需兼容组合选择器)可以返回匹配的DOM节点，需考虑浏览器兼容性和性能。 156
15、请评价以下代码并给出改进意见。 158
16、给String对象添加一个方法，传入一个string类型的参数，然后将string的每个字符间价格空格返回，例如： 158
17、定义一个log方法，让它可以代理console.log的方法。 159
18、在Javascript中什么是伪数组？如何将伪数组转化为标准数组？ 159
19、对作用域上下文和this的理解，看下列代码： 160
20、原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同？如何用原生JS实现Jq的ready方法？ 161
21、（设计题）想实现一个对页面某个节点的拖曳？如何做？（使用原生JS） 163
22、请实现如下功能 163
23、说出以下函数的作用是？空白区域应该填写什么？ 164
24、 Javascript作用链域? 165
25、 谈谈This对象的理解。 165
26、 eval是做什么的？ 165
27、 关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？ 165
28、 什么是闭包（closure），为什么要用它？ 166
29、javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？ 166
30、如何判断一个对象是否属于某个类？ 166
31、new操作符具体干了什么呢? 166
32、用原生JavaScript的实现过什么功能吗？ 166
33、Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？ 166
HasOwnProperty 167
34、对JSON的了解？ 167
35、js延迟加载的方式有哪些？ 167
36、模块化开发怎么做？ 167
37、AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？ 167
38、requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何 缓存的？） 167
39、让你自己设计实现一个requireJS，你会怎么做？ 168
40、谈一谈你对ECMAScript6的了解？ 168
ES6新的语法糖，类，模块化等新特性 168
41、ECMAScript6 怎么写class么，为什么会出现class这种东西? 168
42、异步加载的方式有哪些？ 168
43、documen.write和 innerHTML的区别? 168
44、DOM操作——怎样添加、移除、移动、复制、创建和查找节点? 169
45、call() 和 .apply() 的含义和区别？ 169
46、数组和对象有哪些原生方法，列举一下？ 169
Array.concat( ) 连接数组 169
Object.hasOwnProperty( ) 检查属性是否被继承 170
47、JS 怎么实现一个类。怎么实例化这个类 170
48、JavaScript中的作用域与变量声明提升？ 170
49、如何编写高性能的Javascript？ 170
50、那些操作会造成内存泄漏？ 171
51、javascript对象的几种创建方式？ 171
52、javascript继承的 6 种方法？ 171
53、eval是做什么的？ 171
54、JavaScript 原型，原型链 ? 有什么特点？ 171
55、事件、IE与火狐的事件机制有什么区别？ 如何阻止冒泡？ 172
56、简述一下Sass、Less，且说明区别？ 172
57、关于javascript中apply()和call()方法的区别？ 172
58、简述一下JS中的闭包？ 172
59、说说你对this的理解？ 172
60、分别阐述split(),slice(),splice(),join()？ 173
61、事件委托是什么？ 173
62、如何阻止事件冒泡和默认事件？ 173
63、添加 删除 替换 插入到某个接点的方法？ 173
64、你用过require.js吗？它有什么特性？ 174
65、谈一下JS中的递归函数，并且用递归简单实现阶乘？ 174
66、请用正则表达式写一个简单的邮箱验证。 174
67、简述一下你对web性能优化的方案？ 174
68、在JS中有哪些会被隐式转换为false 174
Undefined、null、关键字false、NaN、零、空字符串 174
69、定时器setInterval有一个有名函数fn1，setInterval（fn1,500）与setInterval（fn1(),500）有什么区别？ 174
70、外部JS文件出现中文字符，会出现什么问题，怎么解决？ 174
71、谈谈浏览器的内核，并且说一下什么是内核？ 175
72、JavaScript原型，原型链 ? 有什么特点？ 175
73、写一个通用的事件侦听器函数 175
74、事件、IE与火狐的事件机制有什么区别？ 如何阻止冒泡？ 178
75、什么是闭包（closure），为什么要用？ 178
76、如何判断一个对象是否属于某个类？ 178
77、new操作符具体干了什么呢? 178
78、JSON 的了解 179
79、js延迟加载的方式有哪些 179
80、模块化怎么做？ 179
81、异步加载的方式 179
82、告诉我答案是多少？ 180
83、JS中的call()和apply()方法的区别？ 180
84、Jquery与jQuery UI 有啥区别？ 180
85、jquery 中如何将数组转化为json字符串，然后再转化回来？ 180
$.fn.stringifyArray = function(array) { 180
86、JavaScript中的作用域与变量声明提升？ 181
87、前端开发的优化问题（看雅虎14条性能优化原则）。 181
88、http状态码有那些？分别代表是什么意思？ 181
89、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好） 182
七、流行框架 182
1、JQuery的源码看过吗？能不能简单概况一下它的实现原理？ 182
2、jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？ 182
3、 jquery中如何将数组转化为json字符串，然后再转化回来？ 182
4、 jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？ 182
5、 jquery.extend 与 jquery.fn.extend的区别？ 182
Jquery.extend用来扩展jQuery对象本身；jquery.fn.extend用来扩展jQuery实例 182
6、谈一下Jquery中的bind(),live(),delegate(),on()的区别？ 182
7、JQuery一个对象可以同时绑定多个事件，这是如何实现的？ 182
10、 Jquery与jQuery UI有啥区别？ 182
11、 jQuery和Zepto的区别？各自的使用场景？ 183
12、 针对 jQuery 的优化方法？ 183
13、 Zepto的点透问题如何解决？ 183
14、知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能讲出他们各自的优点和缺点么? 183
15、Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法？ 184
Underscore的熟悉程度 184
16、使用过angular吗？angular中的过滤器是干什么用的 184
八、移动APP开发 184
1、移动端最小触控区域是多大？ 184
九、NodeJs 184 - 对Node的优点和缺点提出了自己的看法： 184
- 需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？ 184
- Node.js的适用场景？ 185
- (如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么? 185
Nodejs相关概念的理解程度 185 - 解释一下 Backbone 的 MVC 实现方式？ 185
- 什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点? 185
- 对Node的优点和缺点提出了自己的看法？ 185
十、前端概括性问题 186 - 常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？ 186
- 对BFC规范的理解？ 186
- 99%的网站都需要被重构是那本书上写的？ 186
- WEB应用从服务器主动推送Data到客户端有那些方式？ 186
- 加班的看法 187
- 平时如何管理你的项目，如何设计突发大规模并发架构？ 187
- 那些操作会造成内存泄漏？ 187
- 你说你热爱前端，那么应该WEB行业的发展很关注吧？ 说说最近最流行的一些东西吧？ 187
Node.js、Mongodb、npm、MVVM、MEAN、react、angularjs 187 - 你有了解我们公司吗？说说你的认识？ 187
- 移动端（比如：Android IOS）怎么做好用户体验? 187
- 你所知道的页面性能优化方法有那些？ 188
- 除了前端以外还了解什么其它技术么？你最最厉害的技能是什么？ 188
- AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？ 188
- 谈谈你认为怎样做能使项目做的更好？ 188
- 你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？ 188
- php中下面哪个函数可以打开一个文件，以对文件进行读和写操作？ 188
- php中rmdir可以直接删除文件夹吗？该目录必须是空的，而且要有相应的权限–来自api 188
- phpinset和empty的区别，举例说明 188
- php中$_SERVER变量中如何得到当前执行脚本路劲 189
- 写一个php函数，要求两个日期字符串的天数差，如2012-02-05~2012-03-06的日期差数 189
- 一个衣柜中放了许多杂乱的衬衫，如果让你去整理一下，使得更容易找到你想要的衣服；你会怎么做？请写出你的做法和思路？ 189
- 如何优化网页加载速度？ 189
- 工作流程，你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 190
- 介绍项目经验、合作开发、独立开发。 190
- 开发过程中遇到困难，如何解决。 190
- 对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？ 190
一、HTML和CSS
1.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
IE: trident内核
Firefox：gecko内核
Safari:webkit内核
Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome:Blink(基于webkit，Google与Opera Software共同开发)
2.每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？
3.Quirks模式是什么 ？它和Standards模式有什么区别
从IE6开始，引入了Standards模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。
在IE6之前CSS还不够成熟，所以IE5等之前的浏览器对CSS的支持很差， IE6将对CSS提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如果IE6 支持CSS则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的渲染机制呢？
在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支，即当某个参数为真时，我们就使用新功能，而如果这个参数 不为真时，就使用旧功能，这样就能不破坏原有的程序，又提供新功能。IE6也是类似这样做的，它将DTD当成了这个“参数”，因为以前的页面大家都不会去写DTD，所以IE6就假定 如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。
区别：
总体会有布局、样式解析和脚本执行三个方面的区别。
盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。
设置行内元素的高宽：在Standards模式下，给等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。
设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用margin:0 auto设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。
（还有很多，答出什么不重要，关键是看他答出的这些是不是自己经验遇到的，还是说都是看文章看的，甚至完全不知道。）
4.div+css的布局较table布局有什么优点？
改版的时候更方便 只要改css文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化（seo）搜索引擎更友好，排名更容易靠前。
5.img的alt与title有何异同？ strong与em的异同？
a:alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)
title(tool tip):该属性为设置该属性的元素提供建议性的信息。
strong:粗体强调标签，强调，表示内容的重要性
em:斜体强调标签，更强烈强调，表示内容的强调点
6.你能描述一下渐进增强和优雅降级之间的不同吗?
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
“优雅降级”观点
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。
在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
“渐进增强”观点
“渐进增强”观点则认为应关注于内容本身。
内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
那么问题来了。现在产品经理看到IE6,7,8网页效果相对高版本现代浏览器少了很多圆角，阴影（CSS3），要求兼容（使用图片背景，放弃CSS3），你会如何说服他？
7.为什么利用多个域名来存储网站资源会更有效？
CDN缓存更方便（Content Delivery Network，即内容分发网络）
突破浏览器并发限制
节约cookie带宽
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题
8.请谈一下你对网页标准和标准制定机构重要性的理解。
网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。
9.请描述一下cookies，sessionStorage和localStorage的区别？
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
web storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。
1.cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
2.存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。存储大小：localStorage=sessionStorage>cookie
3.数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。数据持久：localStorage>cookie>sessionStorage
4.作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。作用域：localStorage=cookie>sessionStorage
10.简述一下src与href的区别。
1.src 是指向物件的来源地址，是引入。在 img、script、iframe 等元素上使用。
2.href 是超文本引用，指向需要连结的地方，是与该页面有关联的，是引用。在 link和a 等元素上使用。
使用区别：
src通常用作“拿取”（引入），href 用作 “连结前往”（引用）。
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
是粗体，字体大小2em，加粗；是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。 屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页. 例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音. PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱） 使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页. 语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况（包括现有的或者将来新的设备）.例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面. 搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重 过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问. 你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记. 因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为. SEO主要还是靠你网站的内容和外部链接的。 便于团队开发和维护 W3C给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。 16.谈谈以前端角度出发做好SEO需要考虑什么？ 了解搜索引擎如何抓取网页和如何索引网页 你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE robot 或叫 web crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。 Meta标签优化 主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等。 如何选取关键词并在网页中放置关键词 搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词（一般在5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。 了解主要的搜索引擎 虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系，比如AOL网页搜索用的是Google的搜索技术，MSN用的是Bing的技术。 主要的互联网目录 Open Directory自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集的，除了主页外还抓取大量的内容页面。 按点击付费的搜索引擎 搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。最典型的有Overture和百度，当然也包括Google的广告项目Google Adwords。越来越多的人通过搜索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，你得学会用最少的广告投入获得最多的点击。 搜索引擎登录 网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网站提交（submit）到搜索引擎。如果你的是商业网站，主要的搜索引擎和目录都会要求你付费来获得收录（比如Yahoo要299美元），但是好消息是（至少到目前为止）最大的搜索引擎Google目前还是免费，而且它主宰着60％以上的搜索市场。 链接交换和链接广泛度（Link Popularity） 网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜索引擎以外，人们也每天通过不同网站之间的链接来Surfing（“冲浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。 合理的标签使用 17.有哪项方式可以对一个DOM设置它的CSS样式？ DOM文档对象模型(Document Object model,DOM)， BOM浏览器对象模型(Browser Object model,BOM) 外部样式表，引入一个外部css文件 内部样式表，将css代码放在 标签内部 内联样式，将css样式直接定义在 HTML 元素内部 18.CSS都有哪些选择器？ 派生选择器（用HTML标签申明） id选择器（用DOM的ID申明） 类选择器（用一个样式类名申明） 属性选择器（用DOM的属性申明，属于CSS2，IE6不支持，不常用，不知道就算了） 除了前3种基本选择器，还有一些扩展选择器，包括 后代选择器（利用空格间隔，比如div .a{ }） 群组选择器（利用逗号间隔，比如p,div,#a{ }） 那么问题来了，CSS选择器的优先级是怎么样定义的？ 基本原则： 一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。 复杂的计算方法： 用1表示派生选择器的优先级 用10表示类选择器的优先级 用100标示ID选择器的优先级 div.test1 .span var 优先级 1+10 +10 +1 span#xxx .songs li 优先级1+100 + 10 + 1 #xxx li 优先级 100 +1 那么问题来了，看下列代码，标签内的文字是什么颜色的？
123
答案：red。与样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，与在
33.为什么要初始化样式？
由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间的显示差异，但是初始化CSS会对搜索引擎优化造成小影响
34.BFC是什么?
BFC（块级格式化上下文），一个创建了新的BFC的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题
BFC是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用
35.html语义化是什么？
当页面样式加载失败的时候能够让页面呈现出清晰的结构
有利于seo优化，利于被搜索引擎收录（更便于搜索引擎的爬虫程序来识别）
便于项目的开发及维护，使html代码更具有可读性，便于其他设备解析。
36.Doctype的作用？严格模式与混杂模式的区别？
严格模式下：页面排版及JS解析是以该浏览器支持的最高标准来执行
混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容
37.IE的双边距BUG：块级元素float后设置横向margin，ie6显示的margin比设置的较大。
解决：加入_display：inline
38.HTML与XHTML——二者有什么区别？
- 所有的标记都必须要有一个相应的结束标记
- 所有标签的元素和属性的名字都必须使用小写
- 所有的 XML 标记都必须合理嵌套
- 所有的属性必须用引号 “” 括起来
- 把所有 < 和 & 特殊符号用编码表示
- 给所有属性赋一个值
- 不要在注释内容中使用 “–”
- 图片必须有说明文字
39.html常见兼容性问题？
1.双边距BUG float引起的 使用display
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）
9.IE5-8不支持opacity，解决办法：
.opacity {
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 /
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=60)”; / for IE 8*/
} - IE6不支持PNG透明背景，解决办法: IE6下使用gif图片
40.对WEB标准以及W3C的理解与认识
答：标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。
41.行内元素有哪些?块级元素有哪些?CSS的盒模型?
答：块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border ,margin，padding
42.前端页面有哪三层构成，分别是什么?作用是什么?
答：结构层 Html 表示层 CSS 行为层 js。
43.Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
（1）、<!DOCTYPE> 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
44.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。
（2）行内元素有：a b span img input select strong（强调的语气） 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）知名的空元素：
鲜为人知的是：
45.CSS的盒子模型？
（1）两种， IE 盒子模型、标准 W3C 盒子模型；IE 的content部分包含了 border 和 pading;
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).
46.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？- 1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul < li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = “external”]）
9.伪类选择器（a: hover, li: nth - child） - 可继承： font-size font-family color, UL LI DL DD DT;
- 不可继承 ：border padding margin width height ;
- 优先级就近原则，样式定义最近者为准;
- 载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag
important 比 内联优先级高
CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个元素的每个
元素。
p:last-of-type 选择属于其父元素的最后元素的每个
元素。
p:only-of-type 选择属于其父元素唯一的元素的每个
元素。
p:only-child 选择属于其父元素的唯一子元素的每个元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。
47.如何居中div,如何居中一个浮动元素?
给div设置一个宽度，然后添加margin:0 auto属性
div{
width:200px;
margin:0 auto;
}
居中一个浮动元素
确定容器的宽高 宽500 高 300 的层
设置层的外边距
.div {
Width:500px ; height:300px;//高度可以不设
Margin: -150px 0 0 -250px;
position:relative;相对定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
48.浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？ - IE浏览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto；
- png24为的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
- 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
- IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css
.bb{
background-color:#f1ee18;/所有识别/
.background-color:#00deff\9; /IE6、7、8识别/
+background-color:#a200ff;/IE6、7识别/
_background-color:#1e0bd1;/IE6识别/
} - IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性. - IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. - （条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
- Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
49.列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？
- 1.id选择器（ # myid）
- block 象块类型元素一样显示。
none 缺省值。向行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。 - position的值
*absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
*fixed （老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。
- relative
生成相对定位的元素，相对于其正常位置进行定位。 - static 默认值。没有定位，元素出现在正常的流中
*（忽略 top, bottom, left, right z-index 声明）。 - inherit 规定从父元素继承 position 属性的值。
50.absolute的containing block计算方式跟正常流有什么不同？
lock-level boxes
一个 block-level element (‘display’ 属性值为 ‘block’, ‘list-item’ 或是 ‘table’) 会生成一个 block-level box，这样的盒子会参与到 block-formatting context (一种布局的方式) 中。
block formatting context
在这种布局方式下，盒子们自所在的 containing block 顶部起一个接一个垂直排列，水平方向上撑满整个宽度 (除非内部的盒子自己内部建立了新的 BFC)。
containing block
一般来说，盒子本身就为其子孙建立了 containing block，用来计算内部盒子的位置、大小，而对内部的盒子，具体采用哪个 containing block 来计算，需要分情况来讨论：
若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；
否则则由这个祖先元素的 padding box 构成。
根元素所在的 containing block 被称为 initial containing block，在我们常用的浏览器环境下，指的是原点与 canvas 重合，大小和 viewport 相同的矩形；
对于 position 为 static 或 relative 的元素，其 containing block 为祖先元素中最近的 block container box 的 content box (除 margin, border, padding 外的区域)；
对于 position:fixed 的元素，其 containing block 由 viewport 建立；
对于 position:absolute 的元素，则是先找到其祖先元素中最近的 position 属性非 static 的元素，然后判断：
如果都找不到，则为 initial containing block。
51.对WEB标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；
52.css的基本语句构成是?
选择器{属性1:值1;属性2:值2;……}
53.浏览器标准模式和怪异模式之间的区别是什么?
盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可显示为什么模式
54.CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？
1.Display:none; 不占位
2.Visibility:hidden; 占位
3.设置宽高为0，设置透明度为0，设置z-index位置在-1000
55.行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？
块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。
那么问题来了，浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？
答案： 、 、 、 、
事件绑定方式添加事件：
var btn = document.getElementById(“hello”);
btn.addEventListener(“click”,function(){
alert(1);
},false);
btn.addEventListener(“click”,function(){
alert(2);
},false);
执行上面的代码会先alert 1 再 alert 2
普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个。
addEventListener不兼容低版本IE
普通事件无法取消
addEventLisntener还支持事件冒泡+事件捕获
IE和DOM事件流的区别
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题
IE和标准下有哪些兼容性的写法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
call和apply的区别
call方法:
语法：call(thisObj，Object1,Object2…)
定义：调用一个对象的一个方法，以另一个对象替换当前对象。
说明：
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。
apply方法：
语法：apply(thisObj，[argArray])
定义：应用某一对象的一个方法，用另一个对象替换当前对象。
说明：
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。
b继承a的方法
function A( age, name ){
this.age = age;
this.name = name;
}
A.prototype.show = function(){
alert(‘父级方法’);
}
function B(age,name,job){
A.apply( this, arguments );
this.job = job;
}
B.prototype = new A();
var b = new A(14,‘侠客行’);
var a = new B(15,‘狼侠’,‘侠客’);
如何阻止事件冒泡和默认事件
canceBubble()只支持IE,return false,stopPropagation()
添加 删除 替换 插入到某个接点的方法
obj.appendChid()
obj.insertBefore()
obj.replaceChild()
obj.removeChild()
javascript的本地对象，内置对象和宿主对象
本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等
window.onload 和document ready的区别
window.onload 是在dom文档树加载完和所有文件加载完之后执行一个函数Document.ready原生种没有这个方法，jquery中有 $().ready(function),在dom文档树加载完之后执行一个函数（注意，这里面的文档树加载完不代表全部文件加载完）。
( d o c u m e n t ) . r e a d y 要 比 w i n d o w . o n l o a d 先 执 行 w i n d o w . o n l o a d 只 能 出 来 一 次 ， (document).ready要比window.onload先执行 window.onload只能出来一次， (document).ready要比window.onload先执行windo
最低0.47元/天 解锁文章
612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
