web前端开发考试题及答案（计算机二级《Web程序设计》试题及答案）

本文目录

• 计算机二级《Web程序设计》试题及答案
• 腾讯WEB前端笔试题和面试题答案
• WEB前端面试题
• web前端开始面试问题
• 有哪些经典的 Web 前端或者 JavaScript 面试笔试题
• web前端笔试题
• Web前端岗位面试题有哪些
• Web前端开发笔试题
• web前端 基础 操作题

计算机二级《Web程序设计》试题及答案

计算机二级《Web程序设计》试题及答案

　　1在下列的HTML中，正确产生超链接的标记是(　　)。

***隐藏网址***

　　参考答案：B

　　2下面协议中用于在Web浏览器和服务器之间传输Web文档的是(　　)。

　　A.NFSB.FTPC.HTTPD.DNS

　　参考答案：C

　　3在HTTP响应的MIME消息体中，可以同时包含如下类型的数据(　　)。

　　i .文本数据 ii.图片数据 iii.视频数据 iv.音频数据

　　A.仅iB.i和iiC.i、ii和iiiD.全都可以

　　参考答案：D

　　4HTTP协议是一种(　　)协议。

　　A.文件传输协议B.邮件协议C.远程登录协议D.超文本传输协议

　　参考答案：D

　　5在HTML文档中使用的注释符号是(　　)。

　　A.//…B./*……*/C.D.以上说法均错误

　　参考答案：C

　　6HTTP请求消息中可以不包含(　　)。

　　i.开始行 ii.消息头iii.消息体实体数据

　　A.仅iB.i和iiC.ii和 iiiD.仅iii

　　参考答案：C

　　7下列技术中控制文档结构的.是(　　)。

　　A.DOMB.CSSC.JavaScriptD.XMLHttpRequest

　　参考答案：A

　　8下列语言编写的代码中，在浏览器端执行的是(　　)。

　　A.wt h页面中的c#代码

　　B.Web页面中的Java代码

　　C.Web页面中的PHP代码

　　D.Web页面中的JavaScript代码

　　参考答案：D

　　9在HTTP/1.1协议中，持久连接选项是(　　)的。

　　A.默认关闭B.默认打开C.不可协商D.以上都不对

　　参考答案：B

　　10以下不是HTTP协议的特点的是(　　)。

　　A.持久连接B.请求/响应模式C.只能传输文本数据D.简单、高效

　　参考答案：C

　　11下列语句中，正确打开名为“window2"的新窗口的JavaScript语句是(　　)。

***隐藏网址***

***隐藏网址***

***隐藏网址***

***隐藏网址***

　　参考答案：D

　　12以下选项中，全部都是表格标记的是(　　)。

　　参考答案：B

　　13下列关于ASP.NET的描述中，错误的是(　　)。

　　A.ASP.NET依赖于微软的.NET框架

　　B.ASP.NET采用纯面向对象语言比采用脚本语言的执行效率高

　　C.ASP.NET采用代码分离技术有利于开发协作

　　D.ASP.NET和ASP都采用了JavaScript编程语言

　　参考答案：D

　　14下列函数中能够把6.25四舍五入为最接近的整数的是(　　)。

　　A.round(6.25)B.rnd(6.25)C.Math.rnd(6.25)D.Math.round(6.25)

　　参考答案：D

　　15目前在Internet上应用最为广泛的服务是(　　)。

　　A.FTP服务B.Web服务C.Telnet服务D.Gopher服务

　　参考答案：B

　　16下列正确地在CSS文件中插入注释的语句是(　　)。

　　A.//this is a commentB.//this is a comment//C./*this is a comment*/D.’this is a comment

　　参考答案：C

　　17下列不属于动态网页格式的是(　　)。

　　A.ASPB.JSPC.ASPXD.VBS

　　参考答案：D

　　18以下语句中，正确制作电子邮件链接的是(　　)。

　　参考答案：C

　　19下列哪个样式能够显示这样一个边框：上边框10像素、下边框5像素、左边框20像素、右边框l像素?(　　)

　　A.border—width：10px 5px 20px 1px

　　B.border—width：10px 20px 5px 1px

　　C.border—width：5px 20px l0px 1px

　　D.border—width：10px 1px 5px 20px

　　参考答案：D

　　20CSS 主要用下列哪个HTML标记构建页面布局?(　　)

　　参考答案：B

　　21在下列选项中，正确地产生文本区(textarea)的标记是(　　)。

　　参考答案：A

***隐藏网址***

　　A.端口号B.文件名C.访问协议D.主机名

　　参考答案：C

　　23下列标记中不属于行内元素的是(　　)。

　　参考答案：D

　　24在HTML文档中用于表示页面标题的标记对是(　　)。

　　参考答案：D

　　25下列符合CSS语法的正确语句是(　　)。

　　A.body：color=blackB.{body;color：black}C.body{color：black;}D.{body：color=black}

　　参考答案：C

更多计算机二级试题推荐：

1. 2016年9月计算机二级web考试试题及答案

2. 计算机二级《Web程序设计》试题及答案

3. 计算机二级考试WEB试题及答案

4. 2016计算机二级考试《Web程序设计》练习题模拟

5. 2016计算机二级考试高级Office试题及答案

6. 2016最新计算机二级考试试题及答案

7. 2016年计算机二级office高级应用试题【题库】

8. 2016计算机二级等级考试题型分析

9. 2016下半年计算机二级ps试题及答案

10. 计算机二级Office考试试题及答案

腾讯WEB前端笔试题和面试题答案

腾讯WEB前端笔试题和面试题答案

　　能进入腾讯工作是多少人的梦想，下面我为大家搜集的一篇“腾讯WEB前端笔试题和面试题答案”，供大家参考借鉴，希望可以帮助到有需要的朋友!

　　一、 耐心填一填!(每空4分，共24分)

　　1. 为span设置类a与b,应编写HTML代码_________。

　　2. 设置CSS属性clear的值为_both___________时可清除左右两边浮动。

　　3. ____li________标签必须直接嵌套于ul、ol中。

　　4. CSS属性_____margin_______可为元素设置外补丁。

　　5. 设置CSS属性float的值为___none_________时可取消元素的浮动。

　　6. 文字居中的CSS代码是____text-align:center________。

　　二、 精心选一选!(每题4分，共16分)

　　1. 下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度( C )

　　A. display:inline B. display:none C. display:block D. display:inheric

　　2. 选出你认为最合理的定义标题的方法( C )

　　A. 文章标题

　　B.

　　文章标题

　　C.

　　文章标题

　　D. 文章标题

　　3. br标签在XHTML中语义为( A )

　　A.换行 B.强调 C.段落 D.标题

　　4. 不换行必须设置( AC )

　　A.word-break B.letter-spacing C.white-space D.word-spacing

　　5. 在使用table表现数据时，有时候表现出来的’会比自己实际设置的宽度要宽，为此需要设置下面哪些属性值( AD )

　　A. cellpadding=”0″ B. padding:0 C. margin:0 D. cellspacing=”0″

　　三、判断对或错!(每题4分，共24分)

　　1. CSS属性font-style 用于设置字体的粗细。 ( × )

　　2. CSS属性overflow用于设置元素超过宽度时是否隐藏或显示滚动条。 ( √ )

　　3. 在不涉及样式情况下,页面元素的优先显示与结构摆放顺序无关。 ( × )

　　4. 在不涉及样式情况下,页面元素的优先显示与标签选用无关。 ( √ )

　　5. display:inline兼容所有的浏览器。 ( √ )

　　6. input属于窗体元素,层级显示比flash、其它元素都高。 ( × )

WEB前端面试题

第二章 面试题基础篇

2.1 HTML面试题

面试题：行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

面试题：页面导入样式时，使用link和@import有什么区别？

面试题：title与h1的区别、b与strong的区别、i与em的区别？

面试题：img标签的title和alt有什么区别？

面试题：png、jpg、gif 这些图片格式解释一下，分别什么时候用？

2.2 CSS面试题

面试题：css背景纹路

面试题：介绍一下CSS的盒子模型

面试题：CSS选择符有哪些？哪些属性可以继承？

面试题：CSS优先级算法如何计算？

面试题：用CSS画一个三角形

面试题：一个盒子不给宽度和高度如何水平垂直居中？

面试题：display有哪些值？说明他们的作用。

面试题：对BFC规范(块级格式化上下文：block formatting context)的理解？

面试题：清除浮动有哪些方式？

面试题：在网页中的应该使用奇数还是偶数的字体？为什么呢？

面试题：写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块，请写出结构及样式。

面试题：什么是CSS reset？

面试题：css sprite是什么,有什么优缺点

面试题：display: none;与visibility: hidden;的区别

面试题：position有哪些值?有什么作用? 【特别多公司问】

面试题：line-height和height有什么区别？

面试题：opacity 和 rgba区别

2.3 JavaScript基础面试题

面试题：延迟加载JS有哪些方式？

面试题：JS数据类型有哪些？

面试题：null和undefined的区别

面试题：JS数据类型考题

面试题：==和===有什么不同

面试题：JS微任务和宏任务

面试题：JS作用域考题

面试题：JS对象考题

面试题：JS作用域+this指向+原型 考题

面试题：JS判断变量是不是数组，你能写出哪些方法？

面试题：slice是干嘛的、splice是否会改变原数组

面试题：JS数组去重

面试题：找出多维数组最大值

面试题：给字符串新增方法实现功能

面试题：找出字符串出现最多次数的字符以及次数

2.4 真正移动端 —— H5/C3面试题

面试题：什么是语义化标签

面试题：::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。

面试题：如何关闭iOS键盘首字母自动大写

面试题：怎么让Chrome支持小于12px 的文字？

面试题：rem和em有什么样区别

面试题：ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

面试题：webkit表单输入框placeholder的颜色值能改变吗？

面试题：禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片

面试题：禁止ios和android用户选中文字

面试题：自适应

面试题：响应式

第三章 面试题进阶篇

3.1 JavaScript进阶面试题

面试题：new操作符具体做了什么

面试题：闭包 【必须会】

面试题：原型链 【必须会】

面试题： JS继承有哪些方式

面试题：说一下call、apply、bind区别

面试题：sort背后原理是什么？
面试题：深拷贝和浅拷贝

面试题：localstorage、sessionstorage、cookie的区别

3.2 ES6面试题

面试题：var、let、const区别

面试题：作用域考题

面试题：将下列对象进行合并

面试题：箭头函数和普通函数有什么区别？

面试题：Promise有几种状态

面试题：find和filter的区别 【大厂】

面试题：some和every的区别 【大厂】

3.3 webpack面试题

面试题：webpack插件

3.4 Git面试题

面试题：git常用命令

面试题：解决冲突

面试题：GitFlow

第四章 面试题框架篇

4.1 区分初中高级的 —— Vue面试题

面试题：Vue2.x 生命周期有哪些？

1.系统自带八个

2.当一旦进入到某个组件会执行哪些生命周期

3.$el和$data在哪个阶段有

4.如果使用keep-alive会多俩个生命周期

5.如果加入keep-alive第一次进入组件会执行哪些生命周期

6.如果加入keep-alive第二次或者第N进入该组件会执行哪些生命周期

面试题：谈谈你对keep-alive的了解

面试题：v-if和v-show区别

面试题：v-if和v-for优先级 2.x

面试题：ref是什么？

面试题：nextTick是什么？

面试题：Vue中如何做样式穿透

面试题：scoped原理

面试题：Vuex是单向数据流还是双向数据流？

面试题：讲一下MVVM

面试题：双向绑定原理

面试题：什么是虚拟DOM

面试题：key是干什么？

面试题：diff算法

面试题：Vue组件传值

面试题：props和data优先级谁高？

面试题：computed、methods、watch有什么区别？

面试题：Vuex

面试题：Vue路由

面试题：Vue项目打包后出现空白页

4.2 微信小程序面试题

面试题：如何自定义头部？

面试题：如何自定义底部？

4.3 uni-app面试题

面试题：生命周期

面试题：条件编译

第五章 面试题性能优化篇

web前端开始面试问题

一、html常见题目

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

02、html5为什么只需要写《!DOCTYPEhtml》？

03、行内元素有哪些？块级元素有哪些？空(void)元素有那些？

04、页面导入样式时，使用link和@import有什么区别？

05、介绍一下你对浏览器内核的理解？

06、常见的浏览器内核有哪些？

07、html5有哪些新特性、移除了那些元素？如何处理html5新标签的浏览器兼容问题？

08、如何区分html和html5？

09、简述一下你对html语义化的理解？

10、html5的离线储存怎么使用，工作原理能不能解释一下？

11、浏览器是怎么对html5的离线储存资源进行管理和加载的呢？

12、请描述一下cookies，sessionStorage和localStorage的区别？

13、iframe有那些缺点？

14、Label的作用是什么？是怎么用的？（加for或包裹）

15、HTML5的form如何关闭自动完成功能？

16、如何实现浏览器内多个标签页之间的通信?(阿里)

17、webSocket如何兼容低浏览器？(阿里)

18、页面可见性（PageVisibility）API可以有哪些用途？

19、如何在页面上实现一个圆形的可点击区域？

20、实现不使用border画出1px高的线，在不同浏览器的Quirksmode和cssCompat模式下都能保持同一效果。

21、网页验证码是干嘛的，是为了解决什么安全问题？

22、tite与h1的区别、b与strong的区别、i与em的区别？

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

一、不定项选择题 （每题3分，共30分）
1. 声明一个对象，给它加上name属性和show方法显示其name值，以下代码中正确的是（ D ）
A. var obj = ;
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》
5. 使用JavaScript向网页中输出《h1》hello《/h1》，以下代码中可行的是（ BD ）
A. 《scripttype=”text/javascript”》
document.write(《h1》hello《/h1》);
《/script》
B. 《scripttype=”text/javascript”》
document.write(“《h1》hello《/h1》”);
《/script》
C. 《scripttype=”text/javascript”》
《h1》hello《/h1》
《/script》
D. 《h1》
《scripttype=”text/javascript”》
document.write(“hello”);
《/script》
《/h1》
6. 分析下面的代码：
《html》
《head》
《script type=”text/javascript”》
function writeIt (value) { document.myfm.first_text.value=value;}
《/script》
《/head》
《body bgcolor=”#ffffff”》
《form name=”myfm”》
《input type=”text” name=”first_text”》
《input type=”text” name=”second_text”》
《/form》
《/body》
《/html》
以下说法中正确的是（ 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《document.forms.length;i++) {
if(forms.elements.type==”text”)
forms.elements.value=”";
}
C. if(document.form.elements.type==”text”)
form.elements.value=”";
D. for(vari=0;i《document.forms.length; i++){
for(var j=0;j《document.forms.elements.length; j++){
if(document.forms.elements.type==”text”)
document.forms.elements.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分）
《html》
《head》
《script type=”text/javascript” 》
function closeWin(){
//在此处添加代码
if(confirm(“确定要退出吗？”)){
window.close();
}
}
《/script》
《/head》
《body》
《input type=”button”value=”关闭窗口”onclick=”closeWin()”/》
《/body》
《/html》
2、写出简单描述html标签（不带属性的开始标签和结束标签）的正则表达式，并将以下字符串中的html标签去除掉（15分）
var str = “《div》这里是div《p》里面的段落《/p》《/div》”;
//
《scripttype=”text/javascript”》
varreg = /《\/?\w+\/?》/gi;
varstr = “《div》这里是div《p》里面的段落《/p》《/div》”;
alert(str.replace(reg,”"));
《/script》
3、完成foo()函数的内容，要求能够弹出对话框提示当前选中的是第几个单选框。（10分）
《html》
《head》
***隐藏网址***
《/head》
《body》
《script type=”text/javascript” 》
function foo() {
//在此处添加代码
var rdo =document.form1.radioGroup;
for(var i =0 ;i《rdo.length;i++){
if(rdo.checked){
alert(“您选择的是第”+(i+1)+”个单选框”);
}
}
}
《/script》
《body》
《form name=”form1″ 》
《input type=”radio” name=”radioGroup”/》
《input type=”radio” name=”radioGroup”/》
《input type=”radio” name=”radioGroup”/》
《input type=”radio” name=”radioGroup”/》
《input type=”submit”/》
《/form》
《/body》
《/html》
4、完成函数showImg()，要求能够动态根据下拉列表的选项变化，更新图片的显示 （15分）
《body》
《script type=”text/javascript” 》
function showImg (oSel) {
//在此处添加代码
var str = oSel.value;
document.getElementById(“pic”).src= str+”.jpg”;
}
《/script》
《img id=”pic”src=”img1.jpg”width=”200″ height=”200″ /》
《br /》
《select id=”sel”》
《option value=”img1“》城市生活《/option》
《option value=”img2“》都市早报《/option》
《option value=”img3“》青山绿水《/option》
《/select》《/body》

web前端笔试题

1. 设置元素浮动后，该元素的 display 值是多少( A )

    A.block B. 不变 C. inline D. inline-block

2. 以下不是 canvas 的⽅方法是( D )

    A.getContext() B. fill() C. stroke() D.controller

3. 不是 input 在 html5 新的类型的是( B )

    A.datetime B. file C. color D. range

4. 对权重排序正确的是( C )

a)  .list .box p

b)  #list .box div span

c)  .list span

d)  #list #box

e)  p:last-child

f)  style

A.f》d》b》a》c》e

C. f》d》b》a》c=e

B. f》d》b》a》e》c

D. f》b》d》a》c=e

5.对 document load 和 document ready 描述正确的是( B )

    A.$(document).ready()是当页⾯所有资源全部加载完成后，执

    ⾏⼀个函数

    B.如果图⽚资源较多加载时间较长，onload 后等待执⾏的函数

    需要等待较长时间，所以⼀些效果可能受到影响

    C.onload 是当 DOM ⽂档树加载完成后执⾏⼀个函数

    D.⼀般来说 load 会比$(document).ready()较快执⾏

6..map(parseInt) 答案是多少( A )

    A.

    C.

7.以下对 Ajax 描述不正确的是( A )

    A.readyState 属性请求的状态，当值为 3 时是正在加载

    B.使用 XML 和 XSLT 进⾏行数据交换及相关操作

    C.总共有 8 种 callback

    D.abort()⽅法，停⽌当前请求

8.var temp=null，alert(typeof temp)弹出的结果是( B )

    A.Null     B. Object     C. Undefined     D. String

1. 对XMLHttpRequest对象的open⽅方法描述错误的是(BCD)

    A.在 IE 上使⽤的是 XMLHttpRequest 对象是 ActiveXObject

    B.在 Firefox 上使用的是 XMLHttpRequest 对象是ActiveXObject

    C.XMLHttpRequest 对象只能发送 get 请求

    D.XMLHttpRequest 对象只能发送 post 请求

2. 以下哪些是 javascript 的全局函数(ABC)

    A.parseFloat     B. eval     C. setTimeout     D. alert

***隐藏网址***

    A.301 状态码是临时重定向

    B.get ⽅方式只能⽀支持 ASCII 字符

    C.get 在从服务器上获取资源，post 重点在向服务器发送数据

    D.HTTPS 就是 HTTP 加上加密处理理

4. 以下结果正确的是(CD)

    A.typeof undefined= undefined 和 typeof null=null

    B.typeof “hello”==string typeof 0==Boolean

    C.typeof =object typeof NaN=undefined

    D.typeof {name:“李华”，age:“23”}=object

5. 以下结果正确的是(AB)

    A.zepto.js 适合移动端的开发，jQuery 适合 PC 端的开发

    B.zepto.js 不支持 ie 浏览器器

    C.vue 属于 mvc 框架

    D.v-bind 实现双向绑定

6. 对 sass 描述错误的是(BD)

    A.sass 和 scss 其实是同⼀一种东⻄，都称之为 Sass

    B.sass 可以声明变量符号为&

    C.sass 最终都将转换成 css ⽂件才被引⽤

    D. sass 不可以扩展和继承

1. ⽗级⾼宽固定，子级⽔平垂直居中怎么实现(请用 2 种 flex ⽅

法实现)?

2. 写出⼀个简单的$.ajax()的请求方式?

3. 假如移动端设备的尺寸是320px要实现每1rem=16px怎么实

现?

4.使用 Javascript 打印出 1-10000 之间的所有对称数(例如 121

1331 等)

5. angular 框架之间的通信⽅式是什么，⾄少列出三种?

6. vue 的⽣命周期有⼏个阶段，简单说说它们的作用?

Web前端岗位面试题有哪些

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 h3 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)
10.写出几种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）
11.标签上title与alt属性的区别是什么?
Alt 当图片不显示是 用文字代表。
Title 为该属性提供信息
12.描述css reset的作用和用途。
Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一
13.解释css sprites，如何使用。
Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量
14.浏览器标准模式和怪异模式之间的区别是什么?
盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可显示为什么模式
15.你如何对网站的文件和资源进行优化?期待的解决方案包括：
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用
16.什么是语义化的HTML?
直观的认识标签 对于搜索引擎的抓取有好处
17.清除浮动的几种方式，各自的优缺点
1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）
2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）
3.是用afert伪元素清除浮动(用于非IE浏览器)
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=value
}
}
13.事件委托是什么
让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
14.闭包是什么，有什么特性，对页面有什么影响
闭包就是能够读取其他函数内部变量的函数。
15.如何阻止事件冒泡和默认事件
canceBubble return false
16.添加 删除 替换 插入到某个接点的方法
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
17.解释jsonp的原理，以及为什么不是真正的ajax
动态创建script标签，回调函数
Ajax是页面无刷新请求数据操作

Web前端开发笔试题

Web前端开发笔试题集锦

Web前端开发笔试题集锦：

1，截取字符串abcdefg的efg

var str = "abcdefg";

if (/efg/.test(str)) {

var efg = str.substr(str.indexOf("efg"), 3);

alert(efg);

}

2, 判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20

var reg = /^{4,19}$/;

reg.test("a1a__a1a__a1a__a1a__");

3，判断一个字符串中出现次数最多的字符，统计这个次数

//将字符串的`字符保存在一个hash table中，key是字符，value是这个字符出现的次数

var str = "abcdefgaddda";

var obj = {};

for (var i = 0, l = str.length; i 《 l; i++) {

var key = str;

if (!obj) {

obj = 1;

} else {

obj++;

}

}

/*遍历这个hash table，获取value最大的key和value*/

var max = -1;

var max_key = "";

var key;

for (key in obj) {

if (max 《 obj) {

max = obj;

max_key = key;

}

}

alert("max:"+max+" max_key:"+max_key);

4，IE与FF脚本兼容性 问题

(1) window.event：

表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象

(2) 获取事件源

IE用srcElement获取事件源，而FF用target获取事件源

(3) 添加，去除事件

IE：element.attachEvent(onclick, function) element.detachEvent(onclick,  function)

FF：element.addEventListener(click, function, true)  element.removeEventListener(click, function, true)

(4) 获取标签的自定义属性

IE：div1.value或div1

FF：可用div1.getAttribute(value)

(5) document.getElementByName()和document.all

IE;document.getElementByName()和document.all均不能获取div元素

FF：可以

(6) input.type的属性

IE：input.type只读

FF：input.type可读写

(7) 是否可用id代替HTML元素

IE：可以用id来代替HTML元素

FF：不可以

(8) innerText textContent outerHTML

IE：支持innerText, outerHTML

FF：支持textContent

web前端 基础 操作题

《!DOCTYPE html》
《html》
《head》
《meta charset="UTF-8"》
《title》第一题《/title》
《style》
html,body {width: 100%;height: 100%;}
body {position: relative;margin: 0;}
button {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;width: 100px;height: 40px;color: #FFF;font-size: 16px;font-family: "微软雅黑";border-radius: 8px;background-color: #f49610;}
《/style》
《/head》
《body》
《form action=""》
《button onclick="alert(’你点我了~~’)"》点我《/button》
《/form》
《/body》
《/html》

第一题如上（保存文件为.html形式）

---------------------------------------------------------------------------

第二题如下（html部分保存文件为.html形式，JS部分保存为.js文件。两个文件放在同一个文件夹下，因为我的src路径是这样写的，你可以改）

《!DOCTYPE html》
《html》
《head》
《meta charset="UTF-8"》
《title》第二题《/title》
《script src="pulsate.js"》《/script》
《style》
html,body {width: 100%;height: 100%;}
body {position: relative;margin: 0;}
button {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;width: 100px;height: 40px;color: #FFF;font-size: 16px;font-family: "微软雅黑";border-radius: 8px;background-color: #f49610;}
《/style》
《/head》
《body》
《form action=""》
《button》点我《/button》
《/form》
《/body》
《/html》

下面是第二题的，JS部分：

window.onload = function() {
var btn = document.getElementsByTagName("button");
btn.onclick = function() {
alert("哎呀，你又点我了~");
}
}

加油~