web前端开发笔试题收集

A. web前端笔试题，如图，说下思路即可

用01背包的算法改下就行啊，数字大小看做物品重量，最大数字为背包大小，问题相当于能不能恰好装满，所以初始数组为得设为0（网络搜一下01背包就行了）

B. web前端面试经常问到的面试题有哪些

Web前端经常被问到的面试题及答案

一、HTML+CSS

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

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外
链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维
护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;

2.xhtml和html有什么区别

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言

最主要的不同：

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

用于声明文档使用那种规范(html/Xhtml)一般为 严格 过度 基于框架的html文档

加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug

4.行内元素有哪些?块级元素有哪些?CSS的盒模型?

块级元素：div p h1 h2 h3 h4 form ul

行内元素: a b br i span input select

Css盒模型:内容，border ,margin，padding

5.CSS引入的方式有哪些? link和@import的区别是?

内联 内嵌 外链 导入

区别 ：同时加载

前者无兼容性，后者CSS2.1以下浏览器不支持

Link 支持使用javascript改变样式，后者不可

6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?

标签选择符 类选择符 id选择符

继承不如指定 Id>class>标签选择

后者优先级高

7.前端页面有哪三层构成，分别是什么?作用是什么?

结构层 Html 表示层 CSS 行为层 js

8.css的基本语句构成是?

选择器{属性1:值1;属性2:值2;……}

9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)

二、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.事件绑定和普通事件有什么区别

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方式的区别

一个在url后面 一个放在虚拟载体里面

有大小限制

安全问题

应用不同 一个是论坛等只需要请求的，一个是类似修改密码的

9.call和apply的区别

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

Object.apply(this,arguments)

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

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

11.b继承a的方法

12.写一个获取非行间样式的函数

function getStyle(obj,attr,value)

{

if(!value)

{

if(obj.currentStyle)

{

return obj.currentStyle(attr)

}

else

{

obj.getComputedStyle(attr,false)

}

}

else

{

obj.style[attr]=value

}

}

C. 求推荐一下关于Web前端的相关资料！

一）前端基本功

前端相关的基础知识

• 《HTTP/3 来了 ！未来可期》

• 《你可能已经忽略的 git commit 规范》

• 《手写一个 WebSocket 协议》

• 《5000字解析：前端五种跨平台技术》

• 《一篇搞定移动端适配》

• 《Chrome DevTools中的这些骚操作，你都知道吗？》

• 《Chrome 运行时性能瓶颈分析》

• 《当浏览器全面禁用三方 Cookie》

• 《无形中提高工作效率的 Chrome 插件》

• 《还分不清 Cookie、Session、Token、JWT？》

• 《你连 HTTPS 原理都不懂，还讲“中间人攻击”？》

• 《npm install 原理分析》

• 《不容错过的 Babel 7 知识汇总》

• 《一文搞懂 Web 中暗藏的密码学》

• 《解读HTTP/2与HTTP/3 的新特性》

CSS

• 《那些不常见，但却非常实用的 CSS 属性》

• 《面试官：你可以用纯 CSS 判断鼠标进入的方向吗？》

• 《二营长，快掏个CSS出来给我画个井字棋游戏》

• 《CSS 故障艺术》

• 《我写CSS的常用套路(附demo的效果实现与源码）》

• 《来自新时代的 CSS》

• 《你还不会 CSS 动画？》

JavaScript

• 《谁说前端不需要懂二进制》

• 《你不知道的 Blob》

• 《Javascript常用的 60 余种工具方法》

• 《你可以这样优化 if-else 代码结构》

• 《JS 图片压缩的实现思路》

• 《一个简洁、有趣的无限下拉方案》

• 《请你实现一个大文件上传和断点续传》

• 《从 ES6 到 ES10 的新特性万字大总结》

• 《JavaScript 手写代码无敌秘籍》

TypeScript

• 《通俗易懂的 TypeScript 入门教程》

• 《用 TypeScript 编写 React 的最佳实践》

• 《一文读懂 JS 装饰器》

• 《你真的懂 Promise 吗？》

• 《Typescript 那些好用的技巧》

• 《Typescript 严格模式有多严格？》

二）前端框架、工具、库

React

• 《用 TypeScript 编写 React 的最佳实践》

• 《2020 年你应该知道的 React 库》

• 《5 个技巧助你编写更好的 React 代码》

• 《10个案例让你彻底理解React hooks的渲染逻辑》

• 《组件演进史：从Mixin到HOC，再到Hook》

Vue

• 《1.1万字从零解读Vue3.0源码响应式系统》

• 《重头来过的 Vue 3 带来了什么？》

Nodejs

• 《一杯茶的时间，上手 Node.js》

• 《深入理解 Node.js 进程与线程》

Deno

• 《Deno 会取代 Node.js 吗？》

• 《了不起的 Deno 入门教程》

• 《推倒 Node 重做，Deno 1.0 来了》

Webpack

• 《一文搞懂 Webpack 多入口配置》

GraphQL

• 《GraphQL-前端开发的利剑与桥梁》

• 《GraphQL 入门看这篇就够了》

• 《前端工程师应该了解的 GraphQL》

VS Code
《动图演示11个必备 VS Code 插件》

三）面试题精选

• 《高频前端面试题》

• 《吐血整理！再来一打 Webpack 面试题》

• 《前端同学经常忽视的一个 JavaScript 面试题》

• 《如何轻松拿到淘宝前端 offer》

• 《三年大厂面试官：二面题》

• 《十几道含答案的大厂面试题总结》

• 《如何答一道惊艳面试官的数组去重问题？》

• 《10 个 CSS 高频面试题，你都会吗？》

• 《经常被面试官考的 JS 数据类型知识你真的懂吗？》

• 《面试须知：浏览器相关原理详细总结》

• 《2019 大龄前端如何准备面试？》

• 《2018 大厂高级前端面试题汇总》

四）前端开发的职业修炼

• 《前端如何在项目中做出亮点》

• 《Facebook 前端技术栈重构分享》

• 《当前端基建任务落到你身上，该如何推动协作？》

• 《使用 docker 高效部署你的前端应用》

• 《关于前端学习路线的一些建议》

• 《各种场景唤起 App 的骚操作》

• 《Web 视频播放前前后后那些事》

• 《你必须要注意的依赖安全漏洞》

• 《从 12.67s 到 1.06s 的网站性能优化实战》

• 《网易云音乐前端性能监控实践》

• 《一个阿里前端工程师的成长之路》

• 《非常全面的前端协作规范》

• 《一名合格前端工程师的自检清单》

• 《从 0 到 1 再到 100：搭建、编写、构建一个前端项目》

希望对你有用，望采纳~

D. 有哪些经典的 Web 前端或者 JavaScript 面试笔试题

一、不定项选择题 （每题3分，共30分）
1. 声明一个对象，给它加上name属性和show方法显示其name值，以下代码中正确的是（ D ）
A. var obj = [name:"zhangsan",show:function(){alert(name);}];
B. var obj = {name:”zhangsan”,show:”alert(this.name)”};
C. var obj = {name:”zhangsan”,show:function(){alert(name);}};
D. var obj = {name:”zhangsan”,show:function(){alert(this.name);}};
2. 以下关于Array数组对象的说法不正确的是（ CD ）
A. 对数组里数据的排序可以用sort函数，如果排序效果非预期，可以给sort函数加一个排序函数的参数
B. reverse用于对数组数据的倒序排列
C. 向数组的最后位置加一个新元素，可以用pop方法
D. unshift方法用于向数组删除第一个元素
3. 要将页面的状态栏中显示“已经选中该文本框”，下列JavaScript语句正确的是（ A ）
A. window.status=”已经选中该文本框”
B. document.status=”已经选中该文本框”
C. window.screen=”已经选中该文本框”
D. document.screen=”已经选中该文本框”
4. 点击页面的按钮，使之打开一个新窗口，加载一个网页，以下JavaScript代码中可行的是（ AD ）
A. <input type=”button” value=”new”
onclick=”open(‘new.html’, ‘_blank’)”/>
B. <input type=”button” value=”new”
onclick=”window.location=’new.html’;”/>
C. <input type=”button” value=”new”
onclick=”location.assign(‘new.html’);”/>
D. <form target=”_blank”action=”new.html”>
<inputtype=”submit” value=”new”/>
</form>

E. 《web前端开发基础》作业考核试题有答案

1
请为元素①⑤选择右例最合适的使用场景，将配对好的a-cô写到括号中
收集用户捅入的文字信息

F. 有哪些经典的 Web 前端或者 JavaScript 面试笔试题

一、不定项选择题 （每题3分，共30分）
1. 声明一个对象，给它加上name属性和show方法显示其name值，以下代码中正确的是（ D ）
A. var obj = [name:"zhangsan",show:function(){alert(name);}];
B. var obj = {name:”zhangsan”,show:”alert(this.name)”};
C. var obj = {name:”zhangsan”,show:function(){alert(name);}};
D. var obj = {name:”zhangsan”,show:function(){alert(this.name);}};
2. 以下关于Array数组对象的说法不正确的是（ CD ）
A. 对数组里数据的排序可以用sort函数，如果排序效果非预期，可以给sort函数加一个排序函数的参数
B. reverse用于对数组数据的倒序排列
C. 向数组的最后位置加一个新元素，可以用pop方法
D. unshift方法用于向数组删除第一个元素
3. 要将页面的状态栏中显示“已经选中该文本框”，下列JavaScript语句正确的是（ A ）
A. window.status=”已经选中该文本框”
B. document.status=”已经选中该文本框”
C. window.screen=”已经选中该文本框”
D. document.screen=”已经选中该文本框”
4. 点击页面的按钮，使之打开一个新窗口，加载一个网页，以下JavaScript代码中可行的是（ AD ）
A.
onclick=”open(‘new.html’, ‘_blank’)”/>
B.
onclick=”window.location=’new.html’;”/>
C.
onclick=”location.assign(‘new.html’);”/>
D.

5. 使用JavaScript向网页中输出
hello
，以下代码中可行的是（ BD ）
A.
document.write(
hello
);

B.
document.write(“
hello
”);

C.

hello

D.

document.write(“hello”);

6. 分析下面的代码：

function writeIt (value) { document.myfm.first_text.value=value;}

以下说法中正确的是（ CD ）
A. 在页面的第二个文本框中输入内容后，当鼠标离开第二个文本框时，第一个文本框的内容不变
B. 在页面的第一个文本框中输入内容后，当鼠标离开第一个文本框时，将在第二个文本框中复制第一个文本框的内容
C. 在页面的第二个文本框中输入内容后，当鼠标离开第二个文本框时，将在第一个文本框中复制第二个文本框的内容
D. 在页面的第一个文本框中输入内容后，当鼠标离开第一个文本框时，第二个文本框的内容不变
7. 下面的JavaScript语句中，（ D ）实现检索当前页面中的表单元素中的所有文本框，并将它们全部清空
A. for(vari=0;i< form1.elements.length;i++) {
if(form1.elements.type==”text”)
form1.elements.value=”";}
B. for(vari=0;i
if(forms[0].elements.type==”text”)
forms[0].elements.value=”";
}
C. if(document.form.elements.type==”text”)
form.elements.value=”";
D. for(vari=0;i
for(var j=0;j
if(document.forms.elements[j].type==”text”)
document.forms.elements[j].value=”";
}
}
8. 在表单(form1)中有一个文本框元素(fname)，用于输入电话号码，格式如：010-82668155，要求前3位是010，紧接一个“-”，后面是8位数字。要求在提交表单时，根据上述条件验证该文本框中输入内容的有效性，下列语句中，（ A ）能正确实现以上功能
A. var str= form1.fname.value;
if(str.substr(0,4)!=”010-”|| str.substr(4).length!=8 ||
isNaN(parseFloat(str.substr(4))))
alert(“无效的电话号码！”);
B. var str= form1.fname.value;
if(str.substr(0,4)!=”010-” && str.substr(4).length!=8 &&
isNaN(parseFloat(str.substr(4))))
alert(“无效的电话号码！”);
C. var str= form1.fname.value;
if(str.substr(0,3)!=”010-”|| str.substr(3).length!=8 ||
isNaN(parseFloat(str.substr(3))))
alert(“无效的电话号码！”);
D. var str= form1.fname.value;
if(str.substr(0,4)!=”010-”&& str.substr(4).length!=8 &&
!isNaN(parseFloat(str.substr(4))))
alert(“无效的电话号码！”);
9. 关于正则表达式声明6位数字的邮编，以下代码正确的是（ C ）
A. var reg = /\d6/;
B. var reg = \d{6}\;
C. var reg = /\d{6}/;
D. var reg = new RegExp(“\d{6}”);
10. 关于JavaScript里的xml处理，以下说明正确的是（ BCD ）
A. Xml是种可扩展标记语言，格式更规范，是作为未来html的替代
B. Xml一般用于传输和存储数据，是对html的补充，两者的目的不同
C. 在JavaScript里解析和处理xml数据时，因为浏览器的不同，其做法也不同
D. 在IE浏览器里处理xml，首先需要创建ActiveXObject对象
二、问答题
1. 列举浏览器对象模型BOM里常用的至少4个对象，并列举window对象的常用方法至少5个 （10分）
对象：Window document location screen history navigator
方法：Alert() confirm() prompt() open() close()
2. 简述列举文档对象模型DOM里document的常用的查找访问节点的方法并做简单说明 （10分）
Document.getElementById 根据元素id查找元素
Document.getElementByName 根据元素name查找元素
Document.getElementTagName 根据指定的元素名查找元素
三、程序题
1、补充按钮事件的函数，确认用户是否退出当前页面，确认之后关闭窗口； （10分）

function closeWin(){
//在此处添加代码
if(confirm(“确定要退出吗？”)){
window.close();
}
}

2、写出简单描述html标签（不带属性的开始标签和结束标签）的正则表达式，并将以下字符串中的html标签去除掉（15分）
var str = “
这里是div
里面的段落
”;
//

varreg = /<\/?\w+\/?>/gi;
varstr = “
这里是div
里面的段落
”;
alert(str.replace(reg,”"));

3、完成foo()函数的内容，要求能够弹出对话框提示当前选中的是第几个单选框。（10分）

function foo() {
//在此处添加代码
var rdo =document.form1.radioGroup;
for(var i =0 ;i
if(rdo.checked){
alert(“您选择的是第”+(i+1)+”个单选框”);
}
}
}

4、完成函数showImg()，要求能够动态根据下拉列表的选项变化，更新图片的显示 （15分）

function showImg (oSel) {
//在此处添加代码
var str = oSel.value;
document.getElementById(“pic”).src= str+”.jpg”;
}

G. 有哪些经典的 Web 前端或者 JavaScript 面试笔试题

JavaScript面试题:字符串处理
在应聘前端程序员时，在笔试部分经常会考到字符串处理的问题。这些题有一个特点，站在考官的角度去考虑，它考的不是你会不会，而是你能不能在不借用XX手册或者XX指南再或者网络谷歌的情况下，用比较简洁的方式写出答案来。就具体的字符串处理问题，郑州尚学堂给大家分享一下。
1、字符串转换

字符串转换是最基础的要求和工作，你可以将任何类型的数据都转换为字符串，你可以用下面三种方法的任何一种：

var num= 19; // 19
var myStr = num.toString(); // "19"

你同样可以这么做：

var num= 19; // 19
var myStr = String(num); // "19"

或者，再简单点儿：

var num= 19; // 19
var myStr = "" +num; // "19"

2、字符串分割

字符串分割，即将一个字符串分割为多个字符串，JavaScript中给我们提供了一个非常方便的函数，如：

var myStr = "I,Love,You,Do,you,love,me";
var substrArray = myStr .split(","); // ["I", "Love", "You", "Do", "you", "love", "me"];
var arrayLimited = myStr .split(",", 3); // ["I", "Love", "You"];

split()的第二个参数，表示返回的字符串数组的最大长度。

3、获取字符串长度

字符串长度是在开发中经常要用到的，非常简单如下：

var myStr = "I,Love,You,Do,you,love,me";
var myStrLength = myStr.length; //25

4、查询子字符串

很多人都会忘记这几个JavaScript的自带的方法，或者忘记它们的具体用法，从而导致在做题的时候不得不嵌套for循环来做。

第一个函数：indexOf()，它从字符串的开头开始查找，找到返回对应坐标，找不到返回-1，如下：

var myStr = "I,Love,you,Do,you,love,me";
var index = myStr.indexOf("you"); // 7 ,基于0开始,找不到返回-1

第二个函数：lastIndexOf()，它从字符串的末尾开始查找，找到返回对应坐标，找不到返回-1，如下：

var myStr = "I,Love,you,Do,you,love,me";
var index = myStr.lastIndexOf("you"); // 14

以上两个函数同样接收第二个可选的参数，表示开始查找的位置。

5、字符串替换

单单查到字符串应该还不会停止，一般题目都还经常会遇到让你查到并替换为你自己的字符串，例如：

var myStr = "I,love,you,Do,you,love,me";
var replacedStr = myStr.replace("love","hate");//"I,hate,you,Do,you,love,me"

默认只替换第一次查找到的，想要全局替换，需要置上正则全局标识，如：

var myStr = "I,love,you,Do,you,love,me";
var replacedStr = myStr.replace(/love/g,"hate");//"I,hate,you,Do,you,hate,me"
6、查找给定位置的字符或其字符编码值

想要查找给定位置的字符，你可以使用如下函数：

var myStr = "I,love,you,Do,you,love,me";
var theChar = myStr.charAt(8);// "o",同样从0开始

同样，它的一个兄弟函数就是查找对应位置的字符编码值，如：

var myStr = "I,love,you,Do,you,love,me";
var theChar = myStr.charCodeAt(8); //111

7、字符串连接

字符串连接操作可以简单到用一个加法运算符搞定，如：

var str1 = "I,love,you!";
var str2 = "Do,you,love,me?";
var str = str1 + str2 + "Yes!";//"I,love,you!Do,you,love,me?Yes!"

同样，JavaScript也自带了相关的函数，如：

var str1 = "I,love,you!";
var str2 = "Do,you,love,me?";
var str = str1.concat(str2);//"I,love,you!Do,you,love,me?"

其中concat()函数可以有多个参数，传递多个字符串，拼接多个字符串。

8、字符串切割和提取

有三种可以从字符串中抽取和切割的方法，如：

第一种，使用slice():

var myStr = "I,love,you,Do,you,love,me";
var subStr = myStr.slice(1,5);//",lov"

第二种，使用substring():

var myStr = "I,love,you,Do,you,love,me";
var subStr = myStr.substring(1,5); //",lov"

第三种，使用substr():

var myStr = "I,love,you,Do,you,love,me";
var subStr = myStr.substr(1,5); //",love"

与第一种和第二种不同的是，substr()第二个参数代表截取的字符串最大长度，如上结果所示。

9、字符串大小写转换

常用的转换为大写或者小写字符串函数，如下：

var myStr = "I,love,you,Do,you,love,me";
var lowCaseStr = myStr.toLowerCase();//"i,love,you,do,you,love,me";
var upCaseStr = myStr.toUpperCase();//"I,LOVE,YOU,DO,YOU,LOVE,ME"

10、字符串匹配

字符串匹配可能需要你对正则表达式有一定的了解，先来看看match()函数：

var myStr = "I,love,you,Do,you,love,me";
var pattern = /love/;
var result = myStr.match(pattern);//["love"]
console.log(result .index);//2
console.log(result.input );//I,love,you,Do,you,love,me

如你所见，match()函数在字符串上调用，并且接受一个正则的参数。来看看第二个例子，使用exec()函数：

var myStr = "I,love,you,Do,you,love,me";
var pattern = /love/;

H. Web前端岗位面试题有哪些

前端面试题汇总，基本上会有四大类问题，具体如下：
一、HTML

1、Doctype作用？严格模式与混杂模式如何区分？它们有何意义?

2、HTML5 为什么只需要写 <!DOCTYPE HTML>？
3、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
4、页面导入样式时，使用link和@import有什么区别？
5、介绍一下你对浏览器内核的理解？
6、常见的浏览器内核有哪些？
7、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
8、简述一下你对HTML语义化的理解？
9、HTML5的离线储存怎么使用，工作原理能不能解释一下？
10、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
11、请描述一下 cookies，sessionStorage 和 localStorage 的区别？
12、iframe有那些缺点？
13、Label的作用是什么？是怎么用的？（加 for 或 包裹）
14、HTML5的form如何关闭自动完成功能？
15、如何实现浏览器内多个标签页之间的通信? (阿里)
16、webSocket如何兼容低浏览器？(阿里)
17、页面可见性（Page Visibility）API 可以有哪些用途？
18、如何在页面上实现一个圆形的可点击区域？
19、实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。
20、网页验证码是干嘛的，是为了解决什么安全问题？
21、tite与h1的区别、b与strong的区别、i与em的区别？

二、css

1、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

2、CSS选择符有哪些？哪些属性可以继承？
3、CSS优先级算法如何计算？
4、CSS3新增伪类有那些？
5、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
6、display有哪些值？说明他们的作用。
7、position的值relative和absolute定位原点是？
8、CSS3有哪些新特性？
9、请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？
10、用纯CSS创建一个三角形的原理是什么？

11、一个满屏 品 字布局 如何设计?

三、常见兼容性问题？

1. 
   1、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
   2、经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？
   3、为什么要初始化CSS样式。
   4、absolute的containing block计算方式跟正常流有什么不同？
   5、CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？
   6、position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
   7、对BFC规范(块级格式化上下文：block formatting context)的理解？
   8、CSS权重优先级是如何计算的？
   9、请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式
   10、移动端的布局用过媒体查询吗？
   11、使用 CSS 预处理器吗？喜欢那个？
   12、CSS优化、提高性能的方法有哪些？
   13、浏览器是怎样解析CSS选择器的？
   14、在网页中的应该使用奇数还是偶数的字体？为什么呢？
   15、margin和padding分别适合什么场景使用？
   16、抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题]
   17、元素竖向的百分比设定是相对于容器的高度吗？
   18、全屏滚动的原理是什么？用到了CSS的那些属性？
   19、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
   20、视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）
   21、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
   22、如何修改chrome记住密码后自动填充表单的黄色背景 ？
   23、你对line-height是如何理解的？
   24、设置元素浮动后，该元素的display值是多少？（自动变成display:block）
   25、怎么让Chrome支持小于12px 的文字？
   26、让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing: antialiased;）
   27、font-style属性可以让它赋值为“oblique” oblique是什么意思？
   28、position:fixed;在android下无效怎么处理？
   29、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
   30、display:inline-block 什么时候会显示间隙？(携程)
   31、overflow: scroll时不能平滑滚动的问题怎么处理？
   32、有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
   33、png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
   34、什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）
   35、style标签写在body后与body前有什么区别？
   
   四、JavaScript
   
   1、介绍JavaScript的基本数据类型。
   2、说说写JavaScript的基本规范？
   3、JavaScript原型，原型链 ? 有什么特点？
   4、JavaScript有几种类型的值？（堆：原始数据类型和 栈：引用数据类型），你能画一下他们的内存图吗？
   5、Javascript如何实现继承？
   6、Javascript创建对象的几种方式？
   7、Javascript作用链域?
   8、谈谈This对象的理解。
   9、eval是做什么的？
   10、什么是window对象? 什么是document对象?
   11、null，undefined的区别？
   12、写一个通用的事件侦听器函数(机试题)。
   13、[“1”, “2”, “3”].map(parseInt) 答案是多少？
   14、关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？
   15、什么是闭包（closure），为什么要用它？
   16、javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？
   17、如何判断一个对象是否属于某个类？
   18、new操作符具体干了什么呢?
   19、用原生JavaScript的实现过什么功能吗？
   20、Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？
   21、对JSON的了解？
   22、[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解释一下这段代码的意思吗？
   23、js延迟加载的方式有哪些？
   24、Ajax 是什么? 如何创建一个Ajax？
   25、同步和异步的区别?
   26、如何解决跨域问题?
   27、页面编码和被请求的资源编码如果不一致如何处理？
   28、模块化开发怎么做？
   29、AMD（Moles/Asynchronous-Definition）、CMD（Common Mole

   Definition）规范区别？
   30、requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何 缓存的？）
   31、让你自己设计实现一个requireJS，你会怎么做？
   32、谈一谈你对ECMAScript6的了解？
   33、ECMAScript6 怎么写class么，为什么会出现class这种东西?
   34、异步加载的方式有哪些？
   35、documen.write和 innerHTML的区别?
   36、DOM操作——怎样添加、移除、移动、复制、创建和查找节点?
   37、.call() 和 .apply() 的含义和区别？
   38、数组和对象有哪些原生方法，列举一下？
   39、JS 怎么实现一个类。怎么实例化这个类
   40、JavaScript中的作用域与变量声明提升？
   41、如何编写高性能的Javascript？
   42、那些操作会造成内存泄漏？
   43、JQuery的源码看过吗？能不能简单概况一下它的实现原理？
   44、jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？
   45、jquery中如何将数组转化为json字符串，然后再转化回来？
   46、jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？
   47、jquery.extend 与 jquery.fn.extend的区别？
   48、jQuery 的队列是如何实现的？队列可以用在哪些地方？
   49、谈一下Jquery中的bind(),live(),delegate(),on()的区别？
   50、JQuery一个对象可以同时绑定多个事件，这是如何实现的？
   51、是否知道自定义事件。jQuery里的fire函数是什么意思，什么时候用？
   52、jQuery 是通过哪个方法和 Sizzle 选择器结合的？（jQuery.fn.find()进入Sizzle）
   53、针对 jQuery性能的优化方法？
   54、Jquery与jQuery UI有啥区别？
   55、JQuery的源码看过吗？能不能简单说一下它的实现原理？
   56、jquery 中如何将数组转化为json字符串，然后再转化回来？
   57、jQuery和Zepto的区别？各自的使用场景？
   58、针对 jQuery 的优化方法？
   59、Zepto的点透问题如何解决？
   60、jQueryUI如何自定义组件?
   61、需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？
   62、如何判断当前脚本运行在浏览器还是node环境中？（阿里）
   63、移动端最小触控区域是多大？
   64、jQuery 的 slideUp动画 ，如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，该如何处理呢?
   65、把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？
   66、移动端的点击事件的有延迟，时间是多久，为什么会有？ 怎么解决这个延时？（click 有 300ms 延迟,为了实现safari的双击事件的设计，浏览器要知道你是不是要双击操作。）
   67、知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能讲出他们各自的优点和缺点么?
   68、Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法？
   69、解释JavaScript中的作用域与变量声明提升？
   70、那些操作会造成内存泄漏？
   71、JQuery一个对象可以同时绑定多个事件，这是如何实现的？
   72、Node.js的适用场景？
   (如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
   73、解释一下 Backbone 的 MVC 实现方式？
   74、什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?
   75、知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?
   76、如何测试前端代码么? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?
   77、前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?
   78、简述一下 Handlebars 的基本用法？
   79、简述一下 Handlerbars 的对模板的基本处理流程， 如何编译的？如何缓存的？
   80、用js实现千位分隔符?(来源：前端农民工，提示：正则+replace)
   检测浏览器版本版本有哪些方式？
   81、我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执行几次事件，然后会先执行冒泡还是捕获
   

I. 求web前端开发笔试题

最低0.27元/天开通网络文库会员，可在文库查看完整内容>
原发布者:触不可及112
Web前端开发系班级姓名成绩1、目前常用的WEB标准静态页面语言是________。2、改变元素的外边距用________，改变元素的内填充用________。3、在Table中，TR是________，TD是________。4、如果给一行两列的表格（table）定义高度样式，在________标签中定义最合理，最能减少代码的臃肿。5、对ulli的样式设成无，应该是用什么属性________。6、在新窗口打开链接的方法是________。7、合理的页面布局中常听过结构与表现分离，那么结构是________，表现是________。1、在下面的XHTML中，哪个可以正确地标记折行？A：
B：C：
2、下列哪些是格式良好的XHTML？A：Ashortparagraph
B：
Ashortparagraph
C：
Ashortparagraph3、在以下的HTML中，哪个是正确引用外部样式表的方法？A：B：css"href="mystyle.css">C：mystyle.css4、在HTML文档中，引用外部样式表的正确位置是？A：文档的末尾 B：文档的顶部C：部分D：部分1、请写出超链接的顺序或者你在初始样式中的链接方法。（10分）2、当float和margin同时使用时，IE6的双倍边距BUG如何解决？（6分）3、为什么无法定义1px左右高度的容器？（7分）4、Firefox中标签的居中问题的解决方法

J. 谁能给我出一两道 web前端笔试题 上机题啥的，呵呵，比较常考的

[面试题] 某企业前端开发面试题

【HTML & CSS】

1. Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

2. 行内元素有哪些？块级元素有哪些？CSS的盒模型？

3. CSS引入的方式有哪些? link和@import的区别是?

4. CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？

5. 前端页面有哪三层构成，分别是什么？作用是什么？

6. css的基本语句构成是？

7. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？

8. 如何居中一个浮动元素?

9. 有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况！

10. 你怎么来实现下面这个设计图,主要讲述思路 （效果图省略）

11. 如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？

12. 你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

【Javascript】

1. js是什么，js和html 的开发如何结合？

2. 怎样添加、移除、移动、复制、创建和查找节点

3. 怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别

4. 面向对象编程:b怎么继承a

5. 看看下面alert的结果是什么
view sourceprint?1.function b(x, y, a) {
.arguments[2] = 10;
.alert(a);
}
b(1, 2, 3);
如果函数体改成下面，结果又会是什么？
a = 10;
alert(arguments[2] );

6. 请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象
var obj = parseQueryString(url);
alert(obj.key0) // 输出0

7. ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?

8. 什么是闭包？下面这个ul，如何点击每一列的时候alert其index?
<ul id=”test”>
<li>这是第一条</li><li>这是第二条</li><li>这是第三条</li>
</ul>

9. 最近看的一篇Javascript的文章是？

10. 常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？

11.说说YSlow(可以详细一点)

答案在参考资料里面可以找到，答案在参考资料里面可以找到，答案在参考资料里面可以找到