之前发的一篇博客里没有附上答案，现在有空整理了下发出来，希望能帮助到正在找工作的你，还是那句话：技术只有自己真正理解了才是自己的东西，共勉。
Web 前端笔试题
Html+css
1. 对 WEB 标准以及 w3c 的理解与认识。
标签闭合，标签小写，不乱嵌套：提高搜索机器人的搜索几率；
使用外联的 css 和 js ，结构行为表现的分离：文件下载与页面加载速度更快，内容能被更广泛的设备所访问；
更少的代码和组件：容易维护，改版方便，不需要变动页面内容，提供打印版本而不需要复制内容，提高网站的易用性。
2. Xhtml 和 html 有什么区别。
Html （超文本标记语言）是标准通用标记语言下的一个应用，也是一种规范，一种标准。
Xhtml （可扩展超文本标记语言）是一种置标语言，表现方式与 html 类似，不过语法上更加严格，主要不同：
1 ，所有元素必须被正确嵌套，
2 ，所有标记必须闭合，
3 ，标签名，属性名必须小写字母，
4 ，所有的属性必须用“”括起来，
5 ，所有非标签一部分的 ><& 都必须以编码形式，
6 ，所有属性必须要有值，
7 ，注释中不要有 --
8 ，图片必须要有说明文字
3. css 的引入方式有哪些？ link 和 @import 的区别是？
四种：内联，内嵌，外链，导入
区别：
1 ， link 属于 xhtml 标签， @import 完全是 css 提供的一种方式， link 除了加载 css 还可以定义 rss ，定义 rel 属性等， @import 只能加载 css 。
2 ，加载顺序差别： link 引用的 css 是同时被加载的， @import 引用的 css 会等到页面全部被下载完才会再被加载。
3 ，兼容性差别， @import 是 css2.1 提出， ie5 以上才支持， link 没有兼容问题。
4 ，使用 dom 控制样式的差别，当用 javascript 去控制样式的时候，只能使用 link ， @import 不是 dom 能控制的。
5 ， @import 可以在 css 中再次引入其他样式表。
4. css 选择符有哪些？哪些属性可以继承？优先级如何计算？内联和 important 哪个优先级高？
标签选择符，类选择符， id 选择符
继承的不如指定的， id>class>Tagname
Important 优先级高
5. 前端页面由哪三层构成，分别是什么？作用是什么？
结构层： html
由 html 或者 xhtml 负责创建，运用标签对网页内容的含义作出描述。
表示层： css
由 css 负责创建，对如何显示有关内容做出回答。
行为层： javascript
由 javascript 负责创建，负责回答应该如何对事件作出反应。
6. css 的基本语句构成是？
选择器，属性，属性值
7. 你曾经在哪些浏览器测试过兼容？这些浏览器的内核分别是什么？
Ie （ ie 内核），火狐（ Gecko ），谷歌（ webkit ）， opera （ presto ）
8. 标签上 title 与 alt 属性的区别是什么？
Alt 是在你的图片因为某种原因不能加载的时候在页面显示的提示信息，它会直接 输出在原本加载图片的地方， title 是在鼠标悬停在图片上的显示的小提示，鼠标离开就没了，绝大数 html 标签都支持 title 。
9. 写出几种 IE6 BUG 的解决方法
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 ）
10. 描述 css reset 的作用和用途。
Css reset 重置浏览器的默认 css 样式，浏览器种类不同，默认样式不一样，通过使用 css reset 重置，让他们统一，方便开发。
11. 你如何对网站的文件和资源进行优化？期待的解决方案包括 :
1 ，尽可能减少 http 请求数（文件合并）
2 ，使用 CDN （内容分发网络）
3 ，添加 Expire/Cache-Control 头
4 ，启用 Gzip 压缩
5 ， css 放在页面最上面
6 ， scrip 放在页面最下面
7 ，避免在 css 中使用 Expressions
8 ，把 js 和 css 放在外部文件中
9 ，减少 dns 查询
10 ，压缩 javascript 和 css
11 ，避免重定向
12 ，移除重复脚本
13 ，配置实体标签
14 ，使用 ajax 缓存
12. 什么是语义化的 html ？
根据内容的结构化（内容语义化），选择合式的标签（代码语义化），便于开发者的阅读和写出更加优雅的代码的同时让浏览器的爬虫和机器更好地解析。
13. 清除浮动有几种方式？各自的优缺点是？
1, 父级定义 height （优点：代码少，简单易掌握；缺点：只适合固定高度元素，无法高度自适应）
2 ，结尾处使用空标签清除浮动： Clear:both （优点：理论上能清除所有标签的浮动，简单代码少浏览器支持好；缺点：增加了无意义的标签）
3 ，父级定义伪类 after 和 zoom （优点：浏览器支持好；缺点：代码多，两句代码结合使用才能让主流浏览器都支持）
4 ，父级定义 overflow:hidden （优点：代码少，简单，浏览器支持好；缺点：必须定义 width 或者 zoom ，同时不能定义 height ，不能和 position 配合使用）
5 ，父级定义 overflow:auto （优点：代码少，简单，浏览器支持好；缺点：必须定义 width 或者 zoom ，同时不能定义 height ，内部元素高度超过父级会出现滚动条）
还有，父级一起浮动，父级定义 display:table ，结尾加 br 的 clear ： both 等
14. 浏览器标准模式和怪异模式之间的区别是什么？
所谓的标准模式是指，浏览器按 W3C 标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模式，与你网页中的 DTD 声明直接相关， DTD 声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略 DTD 声明 , 将使网页进入怪异模式 (quirks mode) 。
标准模式中
IE6 不认识 !important 声明， IE7 、 IE8 、 Firefox 、 Chrome 等浏览器认识；而在怪异模式中， IE6/7/8 都不认识 !important 声明
15. 解释下 CSS sprites ，以及你要如何在页面或网站中使用它
是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
页面 icon 很多的情况下使用合适。
16. 讨论 CSS hacks ，条件引用或者其他 ?
各个浏览器都认识，这里给 firefox 用；
\9 所有的 ie 浏览器可识别；
\0 是留给 ie8 的
+ + ie7 定了；
_ _ 专门留给神奇的 ie6 ；
:root #test { } :root 是给 ie9 的，
@media all and (min-width:0px){ #test {} } 这个是老是跟 ie 抢着认 \0 的神奇的 opera ，必须加个 \0, 不然 firefox ， chrome ， safari 也都认识。。。
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {} } 最后这个是浏览器新贵 chrome 和 safari 的。
这种注释的方式只有 IE 浏览器支持，其他浏览器只会把它当做 html 注释，不起任何作用。一般使用 JavaScript 或者服务器端程序判断 User Agent 。
17. 解释下浏览器是如何判断元素是否匹配某个 CSS 选择器 ?
从后往前判断。浏览器先产生一个元素集合，这个集合往往由最后一个部分的索引产生（如果没有索引就是所有元素的集合）。然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，直到真个选择器都匹配完，还在集合中的元素就匹配这个选择器了。
18. 你能描述一下渐进增强和优雅降级之间的不同吗 ?
渐进增强 progressive enhancement ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
19. CSS 字母大写 ?
text-transform 值： Capitalize 英文拼音的首字母大写 Uppercase 英文拼音字母全大写 Lowercase 英文拼音字母全小写
20. CSS 选择器都有哪些
派生选择器（用 HTML标签申明）
id选择器（用DOM的ID申明）
类选择器（用一个样式类名申明）
属性选择器（用 DOM的属性申明，属于CSS2，IE6不支持，不常用，不知道就算了）
除了前 3种基本选择器，还有一些扩展选择器，包括
后代选择器（利用空格间隔，比如 p .a{ }）
群组选择器（利用逗号间隔，比如 p,p,#a{ }）
21. 超链接访问过后 hover 样式就不出现的问题是什么？如何解决？
答案：被点击访问过的超链接样式不在具有 hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）
22. 浏览器还有默认的天生 inline-block 元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？
答案： 、 、
23. px 和 em 的区别
PX:
PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体。EM:
EM就是根据基准来缩放字体的大小。EM实质是一个相对值，而非具体的数值。这种技术需要一个参考点，一般都是以
另外， em是相对于父元素的属性而计算的，如果想计算px和em之间的换算，这个网站不错，输入数据就可以px和em相互计算。狠击这里：px和em换算
Rem:
EM是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而Rem是相对于根元素
浏览器的兼容性
除了 IE6-IE8r，其它的浏览器都支持em和rem属性，px是所有浏览器都支持。
因此为了浏览器的兼容性，可 “px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。
24. 透明度
html{
filter:alpha(opacity=50); /* ie 有效*/
-moz-opacity:0.5; /* Firefox 有效*/
opacity: 0.5; /* 通用，其他浏览器 有效*/
}
Javascript
1. javascript 的 typeof 返回哪些数据类型？
Object ， number ， function ， boolean ， undefined ；
2. 例举 3 种强制类型转换和 2 种隐式类型转换。
强制 Number(),String(),Boolean(),Object();
隐式 + - == if while for in alert
3. Split() 和 join() 的区别。
Join() 函数获取一批字符串，然后用分隔符字符串将它们联接起来，从而返回一个字符串。
Split() 函数获取一个字符串，然后在分隔符处将其断开，从而返回一批字符串。
split ，是把一串字符（根据某个分隔符）分成若干个元素存放在一个数组里。而 Join 是把数组中的字符串连成一个长串，可以大体上认为是 split 的逆操作。
4. 事件绑定和普通事件有什么区别？
普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（ addEventListener ）方式添加事件可以添加多个。
5. 数组方法 pop() push() unshift() shift()
Push() 尾部添加 pop() 尾部删除
Unshift() 头部添加 shift() 头部删除
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
8. Ajax 的 get 和 post 方式的区别？
1 、使用 Get 请求时 , 参数在 URL 中显示 , 而使用 Post 方式是放在虚拟载体里面 , 不会显示出来。
2 、 对于 get 方式，服务器端用 Request.QueryString 获取变量的值，对于 post 方式，服务器端用 Request.Form 获取提交的数据。两种方式的参数都可以用 Request 来获得。
3 、 get 传送的数据量较小，不能大于 2KB 。 post 传送的数据量较大，一般被默认为不受限制。但理论上，因服务器的不同而异 .
4 、 get 安全性非常低， post 安全性较高。
5 、 get 请求需注意缓存问题 ,post 请求不需担心这个问题。
6 、 post 请求必须设置 Content-Type 值为 application/x-form-www-urlencoded
7 、发送请求时 , 因为 get 请求的参数都在 url 里 , 所以 send 函数发送的参数为 null, 而 post 请求在使用 send 方法时 , 却需赋予其参数
9. call 和 apply 的区别？
call 方法 :
语法： call(thisObj ， Object)
定义：调用一个对象的一个方法，以另一个对象替换当前对象。
说明：
call 方法可以用来代替另一个对象调用一个方法。 call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj 。
apply 方法：
语法： apply(thisObj ， [argArray])
定义：应用某一对象的一个方法，用另一个对象替换当前对象。
说明：
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError 。
如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj ， 并且无法被传递任何参数。
10. Ajax 请求时，如何解析 json 数据？
使用 eval parse 鉴于安全性考虑 使用 parse 更靠谱
11. 什么是 javascript 的本地对象，内置对象和宿主对象？
本地对象：独立于宿主环境的 ECMAScript 实现提供的对象。它们包括： Object ， Function ， Array ， String ， Boolean ， Number ， Date ， RegExp ， Error ， EvalError ， RangeError ， ReferenceError ， SyntaxErro ， TypeError URIError 可以实例化。
内置对象 Global 和 Math ：由 ECMASscript 实现提供的、独立于宿主环境的所有对象不可以实例化。
宿主对象：所有的非本地对象都是宿主对象即由 ECMAscript 实现的宿主环境提供的对象。所有 BOM 和 DOM 对象都是宿主对象， document,window 等。
12. Document load 和 document ready 的区别？
页面加载完成有两种事件，一是 ready ，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是 onload ，指示页面包含图片等文件在内的所有元素都加载完成。
13. 编写一个数组去重的方法。
1. 创建一个新的数组存放结果
2. 创建一个空对象
3.for 循环时，每次取出一个元素与对象进行对比，如果这个元素不重复，则把它存放到结果数组中，同时把这个元素的内容作为对象的一个属性，并赋值为 1 ，存入到第 2 步建立的对象中。
var s = [0, 2, 3, 4, 4, 0, 2, 'tt', 0, 0]; //测试数组
for (var i = 0, o = {}, tmp = [], count = 0, l = s.length; i < l; i++) {
if (o[s[i]]) {
count++;//重复+1
} else {
o[s[i]] = 1;//不重复设置属性
tmp.push(s[i])//加入新数组
}}
alert(count);alert(tmp)
14. 事件委托。
利用冒泡的原理，把事件加到父级上，触发执行效果。使用事件委托技术能让你避免对特定的每个节点添加事件监听器；相反，事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。
15. 作用域链。
当代码在一个环境中执行时，会创建变量对象的的一个作用域链（ scope chain ）。作用域链的用途，是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端，始终都是当前执行的代码所在环境的变量对象。如果这个环境是一个函数，则将其活动对象作为变量对象。
每一个函数都有自己的执行环境，当执行流进一个函数时，函数环境就会被推入一个环境栈中，而在函数执行之后，栈将其环境弹出，把控制权返回给之前的执行环境，这个栈也就是作用域链。
当执行函数时，将创建函数的执行环境 ( 调用对象 ), 并将该对象置于链表开头，然后将父级函数的调用对象链接在之后，最后是全局对象。
16. 闭包。
闭包就是能够读取其他函数内部变量的函数。由于在 Javascript 语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成 " 定义在一个函数内部的函数 " 。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个，一个是读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
1 ）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在 IE 中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2 ）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（ object ）使用，把闭包当作它的公用方法（ Public Method ），把内部变量当作它的私有属性（ private value ），这时一定要小心，不要随便改变父函数内部变量的值。
17. 如何阻止事件冒泡和默认事件。
//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation ) {
e.stopPropagation(); //因此它支持W3C的stopPropagation()方法
} else {
window.event.cancelBubble = true; //否则，我们需要使用IE的方式来取消事件冒泡
return false;
}
//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.preventDefault ) {
e.preventDefault(); //阻止默认浏览器动作(W3C)
} else {
window.event.returnValue = false; //IE中阻止函数器默认动作的方式
return false;
}
18. javascript 的同源策略。
一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合
19. JS 排序算法。
var sort = {
debug: function(str) {
if (window.console && window.console.log) {
console.log(str);
}
},
swap: function(arr, index1, index2) { //数组数据交换
var temp = arr[index1];
arr[index1] = arr[index2];
arr[index2] = temp;
},
bubbleSort: function(arr) { //冒泡排序
this.debug("冒泡排序before:" + arr);
var len = arr.length;
for (var outer = 0; outer < len - 1; outer++) { //比较的轮数
for (var inner = 0; inner < len - outer - 1; inner++) { //每轮比较的次数
if (arr[inner] > arr[inner + 1]) {
this.swap(arr, inner, inner + 1)
}
}
this.debug("第" + (outer + 1) + "轮后:" + arr);
}
this.debug("冒泡排序after:" + arr);
},
selectionSort: function(arr) { //选择排序
this.debug("选择排序before:" + arr);
var min, len = arr.length;
for (var outer = 0; outer < len - 1; outer++) {
min = outer;
// 比较最小项目和第outer项之后的剩余数组项, 以寻找更小项
for (var inner = outer + 1; inner < len; inner++) {
if (arr[inner] < arr[min]) {
min = inner;
this.debug("min--" + min);
}
}
this.swap(arr, outer, min);
this.debug("第" + (outer + 1) + "轮后:" + arr);
}
this.debug("选择排序after:" + arr);
},
insertionSort: function(arr) { //插入排序
this.debug("插入排序before:" + arr);
var temp, inner, len = arr.length;
for (var outer = 1; outer < len; outer++) {
temp = arr[outer];
inner = outer;
while (inner > 0 && arr[inner - 1] >= temp) {
arr[inner] = arr[inner - 1];
--inner;
}
arr[inner] = temp;
}
this.debug("插入排序after:" + arr);
},
shellSort: function(arr) { //希尔排序
this.debug("希尔排序before:" + arr);
var gaps = [5, 3, 1],
temp;
for (var g = 0; g < gaps.length; g++) {
for (var i = gaps[g]; i < arr.length; i++) {
temp = arr[i];
for (var j = i; j >= gaps[g] && arr[j - gaps[g]] > temp; j -= gaps[g]) {
arr[j] = arr[j - gaps[g]];
}
arr[j] = temp;
}
}
this.debug("希尔排序after:" + arr);
},
shellSortDynamic: function(arr) { //动态计算间隔序列的希尔排序
this.debug("动态计算间隔序列的希尔排序before:" + arr);
var N = arr.length,
h = 1;
while (h < N / 3) {
h = 3 * h + 1;
}
while (h >= 1) {
for (var i = h; i < N; i++) {
for (var j = i; j >= h && arr[j] < arr[j - h]; j -= h) {
this.swap(arr, j, j - h);
}
}
h = (h - 1) / 3;
}
this.debug("动态计算间隔序列的希尔排序after:" + arr);
},
mergeSort: function(arr) { //归并排序
this.debug("归并排序before:" + arr);
var len = arr.length,
step = 1,
left,
right;
var mergeArray = function(arr, startLeft, stopLeft, startRight, stopRight) {
var rightArr = new Array(stopRight - startRight + 1),
leftArr = new Array(stopLeft - startLeft + 1),
k = startRight,
m = 0,
n = 0;
for (var i = 0; i < (rightArr.length - 1); ++i) {
rightArr[i] = arr[k];
++k;
}
k = startLeft;
for (var i = 0; i < (leftArr.length - 1); ++i) {
leftArr[i] = arr[k];
++k;
}
rightArr[rightArr.length - 1] = Infinity; //哨兵值
leftArr[leftArr.length - 1] = Infinity; //哨兵值
for (var k = startLeft; k < stopRight; ++k) {
if (leftArr[m] <= rightArr[n]) {
arr[k] = leftArr[m];
m++;
} else {
arr[k] = rightArr[n];
n++
}
}
}
if (len < 2) {
return;
}
while (step < len) {
left = 0;
right = step;
while (right + step <= len) {
mergeArray(arr, left, left + step, right, right + step);
left = right + step;
right = left + step;
}
if (right < len) {
mergeArray(arr, left, left + step, right, len);
}
step *= 2;
}
this.debug("归并排序after:" + arr);
},
quickSort: function(arr) { //快速排序
this.debug("快速排序before:" + arr);
var _quickSort = function(arr) {
var len = arr.length,
lesser = [],
greater = [],
pivot,
meCall = arguments.callee;
if (len == 0) {
return [];
}
pivot = arr[0];
for (var i = 1; i < len; i++) {
if (arr[i] < pivot) {
lesser.push(arr[i])
} else {
greater.push(arr[i])
}
}
return meCall(lesser).concat(pivot, meCall(greater));
}
this.debug("快速排序after:" + _quickSort(arr));
return _quickSort(arr);
}
}
var search = {
linearSearch: function(arr, data) { //线性查找
for (var i = 0; i < arr.length; i++) {
if (arr[i] == data) {
return i;
}
}
return -1;
},
binarySearch: function(arr, data) { //二分查找 适用于已排好序的线性结构
var lowerBound = 0,
upperBound = arr.length - 1,
mid;
while (lowerBound <= upperBound) {
mid = Math.floor((lowerBound + upperBound) / 2);
if (arr[mid] < data) {
lowerBound = mid + 1;
} else if (arr[mid] > data) {
upperBound = mid - 1;
} else {
return mid;
}
return -1;
}
}
}
var tempArr = [3, 6, 4, 2, 11, 10, 5];
//sort.bubbleSort(tempArr);
//sort.selectionSort(tempArr);
//sort.insertionSort(tempArr);
//sort.shellSort(tempArr);
//sort.shellSortDynamic(tempArr);
//sort.mergeSort(tempArr);
//sort.quickSort(tempArr);
以上就是也许你需要点实用的-Web前端笔试题的内容，更多相关内容请关注PHP中文网（HdhCmsTestgxlcms测试数据）！
查看更多关于也许你需要点实用的-Web前端笔试题的详细内容...