web前端加php题,也许你需要点实用的Web前端笔试题

之前发的一篇博客里没有附上答案&＃xff0c;现在有空整理了下发出来&＃xff0c;希望能帮助到正在找工作的你&＃xff0c;还是那句话&＃xff1a;技术只有自己真正理解了才是自己的东西&＃xff0c;共勉。

Web前端笔试题

Html&＃43;css

1.对WEB标准以及w3c的理解与认识。

标签闭合&＃xff0c;标签小写&＃xff0c;不乱嵌套&＃xff1a;提高搜索机器人的搜索几率&＃xff1b;

使用外联的css和js&＃xff0c;结构行为表现的分离&＃xff1a;文件下载与页面加载速度更快&＃xff0c;内容能被更广泛的设备所访问&＃xff1b;

更少的代码和组件&＃xff1a;容易维护&＃xff0c;改版方便&＃xff0c;不需要变动页面内容&＃xff0c;提供打印版本而不需要复制内容&＃xff0c;提高网站的易用性。

2.Xhtml和html有什么区别。

Html(超文本标记语言)是标准通用标记语言下的一个应用&＃xff0c;也是一种规范&＃xff0c;一种标准。

Xhtml(可扩展超文本标记语言)是一种置标语言&＃xff0c;表现方式与html类似&＃xff0c;不过语法上更加严格&＃xff0c;主要不同&＃xff1a;

1&＃xff0c;所有元素必须被正确嵌套&＃xff0c;

2&＃xff0c;所有标记必须闭合&＃xff0c;

3&＃xff0c;标签名&＃xff0c;属性名必须小写字母&＃xff0c;

4&＃xff0c;所有的属性必须用“”括起来&＃xff0c;

5&＃xff0c;所有非标签一部分的>

6&＃xff0c;所有属性必须要有值&＃xff0c;

7&＃xff0c;注释中不要有--

8&＃xff0c;图片必须要有说明文字

3.css的引入方式有哪些&＃xff1f;link和&＃64;import的区别是&＃xff1f;

四种&＃xff1a;内联&＃xff0c;内嵌&＃xff0c;外链&＃xff0c;导入

区别&＃xff1a;

1&＃xff0c;link属于xhtml标签&＃xff0c;&＃64;import完全是css提供的一种方式&＃xff0c;link除了加载css还可以定义rss&＃xff0c;定义rel属性等&＃xff0c;&＃64;import只能加载css。

2&＃xff0c;加载顺序差别&＃xff1a;link引用的css是同时被加载的&＃xff0c;&＃64;import引用的css会等到页面全部被下载完才会再被加载。

3&＃xff0c;兼容性差别&＃xff0c;&＃64;import是css2.1提出&＃xff0c;ie5以上才支持&＃xff0c;link没有兼容问题。

4&＃xff0c;使用dom控制样式的差别&＃xff0c;当用Javascript去控制样式的时候&＃xff0c;只能使用link&＃xff0c;&＃64;import不是dom能控制的。

5&＃xff0c;&＃64;import可以在css中再次引入其他样式表。

4.css选择符有哪些&＃xff1f;哪些属性可以继承&＃xff1f;优先级如何计算&＃xff1f;内联和important哪个优先级高&＃xff1f;

标签选择符&＃xff0c;类选择符&＃xff0c;id选择符

继承的不如指定的&＃xff0c;id>class>Tagname

Important优先级高

5.前端页面由哪三层构成&＃xff0c;分别是什么&＃xff1f;作用是什么&＃xff1f;

结构层&＃xff1a;html

由html或者xhtml负责创建&＃xff0c;运用标签对网页内容的含义作出描述。

表示层&＃xff1a;css

由css负责创建&＃xff0c;对如何显示有关内容做出回答。

行为层&＃xff1a;Javascript

由Javascript负责创建&＃xff0c;负责回答应该如何对事件作出反应。

6.css的基本语句构成是&＃xff1f;

选择器&＃xff0c;属性&＃xff0c;属性值

7.你曾经在哪些浏览器测试过兼容&＃xff1f;这些浏览器的内核分别是什么&＃xff1f;

Ie(ie内核)&＃xff0c;火狐(Gecko)&＃xff0c;谷歌(webkit)&＃xff0c;opera(presto)

8. 、

23.px和em的区别

PX:

PX实际上就是像素&＃xff0c;用PX设置字体大小时&＃xff0c;比较稳定和精确。但是这种方法存在一个问题&＃xff0c;当用户在浏览器中浏览我们制作的Web页面时&＃xff0c;如果改变了浏览器的缩放&＃xff0c;这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说&＃xff0c;就是一个大问题了。因此&＃xff0c;这时就提出了使用“em”来定义Web页面的字体。EM:

EM就是根据基准来缩放字体的大小。EM实质是一个相对值&＃xff0c;而非具体的数值。这种技术需要一个参考点&＃xff0c;一般都是以

另外&＃xff0c;em是相对于父元素的属性而计算的&＃xff0c;如果想计算px和em之间的换算&＃xff0c;这个网站不错&＃xff0c;输入数据就可以px和em相互计算。狠击这里&＃xff1a;px和em换算

Rem:

EM是相对于其父元素来设置字体大小的&＃xff0c;这样就会存在一个问题&＃xff0c;进行任何元素设置&＃xff0c;都有可能需要知道他父元素的大小。而Rem是相对于根元素

浏览器的兼容性

除了IE6-IE8r&＃xff0c;其它的浏览器都支持em和rem属性&＃xff0c;px是所有浏览器都支持。

因此为了浏览器的兼容性&＃xff0c;可“px”和“rem”一起使用&＃xff0c;用"px"来实现IE6-8下的效果&＃xff0c;然后使用“Rem”来实现代浏览器的效果。

24.透明度

html{

filter:alpha(opacity&＃61;50); /* ie 有效*/

-moz-opacity:0.5; /* Firefox 有效*/

opacity: 0.5; /* 通用&＃xff0c;其他浏览器 有效*/

}

Javascript

1.Javascript的typeof返回哪些数据类型&＃xff1f;

Object&＃xff0c;number&＃xff0c;function&＃xff0c;boolean&＃xff0c;undefined&＃xff1b;

2.例举3种强制类型转换和2种隐式类型转换。

强制Number(),String(),Boolean(),Object();

隐式 &＃43; - &＃61;&＃61; if while for in alert

3.Split()和join()的区别。

Join() 函数获取一批字符串&＃xff0c;然后用分隔符字符串将它们联接起来&＃xff0c;从而返回一个字符串。

Split() 函数获取一个字符串&＃xff0c;然后在分隔符处将其断开&＃xff0c;从而返回一批字符串。

split&＃xff0c;是把一串字符(根据某个分隔符)分成若干个元素存放在一个数组里。而Join是把数组中的字符串连成一个长串&＃xff0c;可以大体上认为是split的逆操作。

4.事件绑定和普通事件有什么区别&＃xff1f;

普通添加事件的方法不支持添加多个事件&＃xff0c;最下面的事件会覆盖上面的&＃xff0c;而事件绑定(addEventListener)方式添加事件可以添加多个。

5.数组方法pop() push() unshift() shift()

Push()尾部添加pop()尾部删除

Unshift()头部添加shift()头部删除

6.Ie和dom事件流的区别&＃xff1f;

1.执行顺序不一样

2.参数不一样

3.事件加不加on

4.this指向问题

7.Ie和标准下有哪些兼容性的写法&＃xff1f;

Var ev &＃61; ev || window.event

document.documentElement.clientWidth || document.body.clientWidth

Var target &＃61; ev.srcElement||ev.target

8.Ajax的get和post方式的区别&＃xff1f;

1、使用Get请求时,参数在URL中显示,而使用Post方式是放在虚拟载体里面,不会显示出来。

2、 对于get方式&＃xff0c;服务器端用Request.QueryString获取变量的值&＃xff0c;对于post方式&＃xff0c;服务器端用Request.Form获取提交的数据。两种方式的参数都可以用Request来获得。

3、get传送的数据量较小&＃xff0c;不能大于2KB。post传送的数据量较大&＃xff0c;一般被默认为不受限制。但理论上&＃xff0c;因服务器的不同而异.

4、get安全性非常低&＃xff0c;post安全性较高。

5、get请求需注意缓存问题,post请求不需担心这个问题。

6、post请求必须设置Content-Type值为application/x-form-www-urlencoded

7、发送请求时,因为get请求的参数都在url里,所以send函数发送的参数为null,而post请求在使用send方法时,却需赋予其参数

9.call和apply的区别&＃xff1f;

call方法:

语法&＃xff1a;call(thisObj&＃xff0c;Object)

定义&＃xff1a;调用一个对象的一个方法&＃xff0c;以另一个对象替换当前对象。

说明&＃xff1a;

call 方法可以用来代替另一个对象调用一个方法。call方法可将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象。

如果没有提供 thisObj 参数&＃xff0c;那么Global对象被用作thisObj。

apply方法&＃xff1a;

语法&＃xff1a;apply(thisObj&＃xff0c;[argArray])

定义&＃xff1a;应用某一对象的一个方法&＃xff0c;用另一个对象替换当前对象。

说明&＃xff1a;

如果 argArray 不是一个有效的数组或者不是arguments对象&＃xff0c;那么将导致一个TypeError。

如果没有提供 argArray 和thisObj任何一个参数&＃xff0c;那么Global对象将被用作thisObj&＃xff0c; 并且无法被传递任何参数。

10.Ajax请求时&＃xff0c;如何解析json数据&＃xff1f;

使用eval parse 鉴于安全性考虑 使用parse更靠谱

11.什么是Javascript的本地对象&＃xff0c;内置对象和宿主对象&＃xff1f;

本地对象&＃xff1a;独立于宿主环境的ECMAScript实现提供的对象。它们包括&＃xff1a;Object&＃xff0c;Function&＃xff0c;Array&＃xff0c;String&＃xff0c;Boolean&＃xff0c;Number&＃xff0c;Date&＃xff0c;RegExp&＃xff0c;Error&＃xff0c;EvalError&＃xff0c;RangeError&＃xff0c;ReferenceError&＃xff0c;SyntaxErro&＃xff0c;TypeError URIError可以实例化。

内置对象 Global和Math&＃xff1a;由ECMASscript实现提供的、独立于宿主环境的所有对象不可以实例化。

宿主对象&＃xff1a;所有的非本地对象都是宿主对象即由ECMAscript实现的宿主环境提供的对象。所有BOM和DOM对象都是宿主对象&＃xff0c;document,window等。

12.Document load和document ready的区别&＃xff1f;

页面加载完成有两种事件&＃xff0c;一是ready&＃xff0c;表示文档结构已经加载完成(不包含图片等非文字媒体文件)&＃xff0c;二是onload&＃xff0c;指示页面包含图片等文件在内的所有元素都加载完成。

13.编写一个数组去重的方法。

1.创建一个新的数组存放结果

2.创建一个空对象

3.for循环时&＃xff0c;每次取出一个元素与对象进行对比&＃xff0c;如果这个元素不重复&＃xff0c;则把它存放到结果数组中&＃xff0c;同时把这个元素的内容作为对象的一个属性&＃xff0c;并赋值为1&＃xff0c;存入到第2步建立的对象中。var s &＃61; [0, 2, 3, 4, 4, 0, 2, &＃39;tt&＃39;, 0, 0]; //测试数组

for (var i &＃61; 0, o &＃61; {}, tmp &＃61; [], count &＃61; 0, l &＃61; s.length; i

if (o[s[i]]) {

count&＃43;&＃43;;//重复&＃43;1

} else {

o[s[i]] &＃61; 1;//不重复设置属性

tmp.push(s[i])//加入新数组

}}

alert(count);alert(tmp)

14.事件委托。

利用冒泡的原理&＃xff0c;把事件加到父级上&＃xff0c;触发执行效果。使用事件委托技术能让你避免对特定的每个节点添加事件监听器&＃xff1b;相反&＃xff0c;事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件&＃xff0c;找到是哪个子元素的事件。

15.作用域链。

当代码在一个环境中执行时&＃xff0c;会创建变量对象的的一个作用域链(scope chain)。作用域链的用途&＃xff0c;是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端&＃xff0c;始终都是当前执行的代码所在环境的变量对象。如果这个环境是一个函数&＃xff0c;则将其活动对象作为变量对象。

每一个函数都有自己的执行环境&＃xff0c;当执行流进一个函数时&＃xff0c;函数环境就会被推入一个环境栈中&＃xff0c;而在函数执行之后&＃xff0c;栈将其环境弹出&＃xff0c;把控制权返回给之前的执行环境&＃xff0c;这个栈也就是作用域链。

当执行函数时&＃xff0c;将创建函数的执行环境(调用对象),并将该对象置于链表开头&＃xff0c;然后将父级函数的调用对象链接在之后&＃xff0c;最后是全局对象。

16.闭包。

闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中&＃xff0c;只有函数内部的子函数才能读取局部变量&＃xff0c;因此可以把闭包简单理解成"定义在一个函数内部的函数"。所以&＃xff0c;在本质上&＃xff0c;闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个&＃xff0c;一个是读取函数内部的变量&＃xff0c;另一个就是让这些变量的值始终保持在内存中。

1)由于闭包会使得函数中的变量都被保存在内存中&＃xff0c;内存消耗很大&＃xff0c;所以不能滥用闭包&＃xff0c;否则会造成网页的性能问题&＃xff0c;在IE中可能导致内存泄露。解决方法是&＃xff0c;在退出函数之前&＃xff0c;将不使用的局部变量全部删除。

2)闭包会在父函数外部&＃xff0c;改变父函数内部变量的值。所以&＃xff0c;如果你把父函数当作对象(object)使用&＃xff0c;把闭包当作它的公用方法(Public Method)&＃xff0c;把内部变量当作它的私有属性(private value)&＃xff0c;这时一定要小心&＃xff0c;不要随便改变父函数内部变量的值。

17.如何阻止事件冒泡和默认事件。//如果提供了事件对象&＃xff0c;则这是一个非IE浏览器

if ( e && e.stopPropagation ) {

e.stopPropagation(); //因此它支持W3C的stopPropagation()方法

} else {

window.event.cancelBubble &＃61; true; //否则&＃xff0c;我们需要使用IE的方式来取消事件冒泡

return false;

}

//如果提供了事件对象&＃xff0c;则这是一个非IE浏览器

if ( e && e.preventDefault ) {

e.preventDefault(); //阻止默认浏览器动作(W3C)

} else {

window.event.returnValue &＃61; false; //IE中阻止函数器默认动作的方式

return false;

}

18.Javascript的同源策略。

一段脚本只能读取来自于同一来源的窗口和文档的属性&＃xff0c;这里的同一来源指的是主机名、协议和端口号的组合

19.JS排序算法。var sort &＃61; {

debug: function(str) {

if (window.console && window.console.log) {

console.log(str);

}

},

swap: function(arr, index1, index2) { //数组数据交换

var temp &＃61; arr[index1];

arr[index1] &＃61; arr[index2];

arr[index2] &＃61; temp;

},

bubbleSort: function(arr) { //冒泡排序

this.debug("冒泡排序before:" &＃43; arr);

var len &＃61; arr.length;

for (var outer &＃61; 0; outer

for (var inner &＃61; 0; inner

if (arr[inner] > arr[inner &＃43; 1]) {

this.swap(arr, inner, inner &＃43; 1)

}

}

this.debug("第" &＃43; (outer &＃43; 1) &＃43; "轮后:" &＃43; arr);

}

this.debug("冒泡排序after:" &＃43; arr);

},

selectionSort: function(arr) { //选择排序

this.debug("选择排序before:" &＃43; arr);

var min, len &＃61; arr.length;

for (var outer &＃61; 0; outer

min &＃61; outer;

// 比较最小项目和第outer项之后的剩余数组项, 以寻找更小项

for (var inner &＃61; outer &＃43; 1; inner

if (arr[inner]

min &＃61; inner;

this.debug("min--" &＃43; min);

}

}

this.swap(arr, outer, min);

this.debug("第" &＃43; (outer &＃43; 1) &＃43; "轮后:" &＃43; arr);

}

this.debug("选择排序after:" &＃43; arr);

},

insertionSort: function(arr) { //插入排序

this.debug("插入排序before:" &＃43; arr);

var temp, inner, len &＃61; arr.length;

for (var outer &＃61; 1; outer

temp &＃61; arr[outer];

inner &＃61; outer;

while (inner > 0 && arr[inner - 1] >&＃61; temp) {

arr[inner] &＃61; arr[inner - 1];

--inner;

}

arr[inner] &＃61; temp;

}

this.debug("插入排序after:" &＃43; arr);

},

shellSort: function(arr) { //希尔排序

this.debug("希尔排序before:" &＃43; arr);

var gaps &＃61; [5, 3, 1],

temp;

for (var g &＃61; 0; g

for (var i &＃61; gaps[g]; i

temp &＃61; arr[i];

for (var j &＃61; i; j >&＃61; gaps[g] && arr[j - gaps[g]] > temp; j -&＃61; gaps[g]) {

arr[j] &＃61; arr[j - gaps[g]];

}

arr[j] &＃61; temp;

}

}

this.debug("希尔排序after:" &＃43; arr);

},

shellSortDynamic: function(arr) { //动态计算间隔序列的希尔排序

this.debug("动态计算间隔序列的希尔排序before:" &＃43; arr);

var N &＃61; arr.length,

h &＃61; 1;

while (h

h &＃61; 3 * h &＃43; 1;

}

while (h >&＃61; 1) {

for (var i &＃61; h; i

for (var j &＃61; i; j >&＃61; h && arr[j]

this.swap(arr, j, j - h);

}

}

h &＃61; (h - 1) / 3;

}

this.debug("动态计算间隔序列的希尔排序after:" &＃43; arr);

},

mergeSort: function(arr) { //归并排序

this.debug("归并排序before:" &＃43; arr);

var len &＃61; arr.length,

step &＃61; 1,

left,

right;

var mergeArray &＃61; function(arr, startLeft, stopLeft, startRight, stopRight) {

var rightArr &＃61; new Array(stopRight - startRight &＃43; 1),

leftArr &＃61; new Array(stopLeft - startLeft &＃43; 1),

k &＃61; startRight,

m &＃61; 0,

n &＃61; 0;

for (var i &＃61; 0; i <(rightArr.length - 1); &＃43;&＃43;i) {

rightArr[i] &＃61; arr[k];

&＃43;&＃43;k;

}

k &＃61; startLeft;

for (var i &＃61; 0; i <(leftArr.length - 1); &＃43;&＃43;i) {

leftArr[i] &＃61; arr[k];

&＃43;&＃43;k;

}

rightArr[rightArr.length - 1] &＃61; Infinity; //哨兵值

leftArr[leftArr.length - 1] &＃61; Infinity; //哨兵值

for (var k &＃61; startLeft; k

if (leftArr[m] <&＃61; rightArr[n]) {

arr[k] &＃61; leftArr[m];

m&＃43;&＃43;;

} else {

arr[k] &＃61; rightArr[n];

n&＃43;&＃43;

}

}

}

if (len <2) {

return;

}

while (step

left &＃61; 0;

right &＃61; step;

while (right &＃43; step <&＃61; len) {

mergeArray(arr, left, left &＃43; step, right, right &＃43; step);

left &＃61; right &＃43; step;

right &＃61; left &＃43; step;

}

if (right

mergeArray(arr, left, left &＃43; step, right, len);

}

step *&＃61; 2;

}

this.debug("归并排序after:" &＃43; arr);

},

quickSort: function(arr) { //快速排序

this.debug("快速排序before:" &＃43; arr);

var _quickSort &＃61; function(arr) {

var len &＃61; arr.length,

lesser &＃61; [],

greater &＃61; [],

pivot,

meCall &＃61; arguments.callee;

if (len &＃61;&＃61; 0) {

return [];

}

pivot &＃61; arr[0];

for (var i &＃61; 1; i

if (arr[i]

lesser.push(arr[i])

} else {

greater.push(arr[i])

}

}

return meCall(lesser).concat(pivot, meCall(greater));

}

this.debug("快速排序after:" &＃43; _quickSort(arr));

return _quickSort(arr);

}

}

var search &＃61; {

linearSearch: function(arr, data) { //线性查找

for (var i &＃61; 0; i

if (arr[i] &＃61;&＃61; data) {

return i;

}

}

return -1;

},

binarySearch: function(arr, data) { //二分查找 适用于已排好序的线性结构

var lowerBound &＃61; 0,

upperBound &＃61; arr.length - 1,

mid;

while (lowerBound <&＃61; upperBound) {

mid &＃61; Math.floor((lowerBound &＃43; upperBound) / 2);

if (arr[mid]

lowerBound &＃61; mid &＃43; 1;

} else if (arr[mid] > data) {

upperBound &＃61; mid - 1;

} else {

return mid;

}

return -1;

}

}

}

var tempArr &＃61; [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前端笔试题的内容&＃xff0c;更多相关内容请关注PHP中文网(www.php.cn)&＃xff01;

相关标签&＃xff1a;Web前端

本文原创发布php中文网&＃xff0c;转载请注明出处&＃xff0c;感谢您的尊重&＃xff01;