前端考试题(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

}

}

360前端开发工程师面试题

对 props 和 state 设计理解正常的是？

A. 它们都是纯 JS 对象。

B. props 只能来自父级，组件本身始终无法设置。

C. 只有在 state 变化触发时，才会触发组件更新渲染。

D. props 是一种将数据从父级传递给子级的方式， state 仅用于交互性，即随时间变化的数据。

A、D

纠错

B. 如果选项是 ” props 只能来自父级，组件本身无法更新。“，那么就是正确的，是不能修改，而非不能设置。一个组件可以有默认的 props，也可以通过 defaultProps 设置默认值。

C. props 和 state 的变化都会触发组件更新渲染 。

它们都是用来保存信息的，这些信息可以控制组件的渲染输出。

而它们的一个重要的不同点就是： props 是传递 给 组件的（类似于函数的形参），而 state 是在组件 内 被组件自己管理的（类似于在一个函数内声明的变量）。

props

默认情况下，组件没有状态。下面是以函数组件为例，最简单的参数：

props 由父组件设置的信息，尽管可以设置默认值，并且不能改变它。

state

主要用于用户的事件状态的管理，它应是一个可序列化的数据。它允许组件进行初始化、更改和使用的“私有”信息。

默认值

从父级组件传入的 props 值，和 state 初始值都会覆盖组件内定义的默认值。

下面是 props 的初始化示例：

下面是 state 的初始化示例：

https://github.com/uberVU/react-guide/blob/master/props-vs-state.md

https://lucybain.com/blog/2016/react-state-vs-pros

搜索《考试竞技》微信小程序

360前端开发工程师面试题

　1.下面代码的输出值是?

　alert(1&&2)

　2.正则表达式匹配，开头为11N, 12N或1NNN，后面是-7-8个数字的电话号码。

　3.写出下面代码的`输出值：

　var obj = {

　a: 1,

　b: function () {console.log(this.a)}

　};

　var a = 2;

　var objb = obj.b;

　obj.b();

　objb();

　obj.b.call(window);

　4.写出下列代码的输出值：

　function A() {

　}

　function B(a) {

　this.a = a;

　}

　function C(a) {

　if (a) {

　thia.a = a;

　}

　}

　A.prototype.a = 1;

　B.prototype.a = 1;

　C.prototype.a = 1;

　console.log(new A());

　console.log(new B());

　console.log(new C(2));

　5.写出下列代码的输出值：

　var a = 1;

　function b() {

　var a = 2;

　function c() {

　console.log(a);

　}

　return c;

　}

　b()();

　HTML&CSS

　1.写出下列代码在各个浏览器中的颜色值?

　background: red;

　_background: green;

　*background: blue;

　background: black\9;

　2.添加些css让其水平垂直居中。

　颜海镜

　3.如下代码，在空白处填写代码，是其点击时，前景色为白色，背景色为黑色。

　颜海镜

　4.书写代码，点击时从1分钟开始，每秒递减到0。

　颜海镜

　5.简述在IE下mouseover和mouseenter的区别?

;