web前端面试问题

格式：docx
大小：15.88 KB
文档页数：5

1、echart是纯JavaScript的图标库，依赖于canvas。

2、H5的特性：离线缓存为HTML5开发移动应用提供了基础；音频视频自由嵌入，多媒体形式更为灵活；地理定位，随时随地分享位置；Canvas绘图，提升移动平台的绘图能力；专为移动平台定制的表单元素；丰富的交互方式支持；HTML5使用上的优势；CSS3 视觉设计师的辅助利器；实时通讯；档案以及硬件支持；语意化（搜索更快，更准）；双平台融合的app开发方式，提高工作效率。

3、W3C的规范

4、如何设置a标签的大小：display:block;或者display:inline-block;将行内元素转换为块级元素。

5、css都有哪些选择器：ID选择器；类选择器；派生选择器；属性选择器；

6、position:absolute/relative/fixed的区别：（使用top/left/right/bottom）

relative

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

7、display:none;与visibility:hidden；的区别：

visibility:hidden属性会使对象不可见，但该对象在网页所占的空间没有改变（看不见但摸得到），等于留出了一块空白区域，

display:none属性会使这个对象彻底消失（看不见也摸不到）。

据猜测：

display:;当他的值变成block 的时候，它所在的结构才会被加载进来。而visibility就会在加载页面的同时就已经把它加载进来了，因为他的值为hidden的时候，它所占的空间还在。

8、用css实现一个全屏的遮罩层（height:100%也是全屏？？？）

*html body{height:100%}

.m{width:100%;height:100%;position:fixed;opacity:0.3;background:#000;padding:0;}

9、box设置padding和border都会增大box尺寸，使用什么方法不会更改尺寸呢？

设置 box-sizing:border-box;

10、如何让一个块级元素居中？ Margin:auto;

9、如何实现三列，各占三分之一？

无标题文档

left

center

right

web前端开发面试题及答案

Web前端开发是互联网行业中一个非常热门的领域，涉及到网页设计、开发和用户体验等多个方面。在面试过程中，面试官通常会提出一系列问题来评估应聘者的专业知识和技能。以下是一些常见的Web前端开发面试题及答案：

1. HTML相关问题

- 问：HTML5有哪些新特性？

- 答：HTML5引入了新的语义元素如`

type="date">`，``等，支持多媒体内容，如``和``，以及提供了绘图功能``。

2. CSS相关问题

- 问：CSS选择器有哪些类型？

- 答：CSS选择器主要有以下几种类型：元素选择器、类选择器（如`.class`）、ID选择器（如`#id`）、属性选择器（如`[type="text"]`）、伪类选择器（如`:hover`, `:first-child`）和伪元素选择器（如`::before`, `::after`）。

3. JavaScript相关问题

- 问：JavaScript中的闭包是什么？

- 答：闭包是指一个函数能够记住并访问其创建时的环境，即使该环境的外部上下文已经执行完毕。闭包通常用于创建私有变量和方法，或者在回调函数中使用外部变量。

4. 响应式设计相关问题

- 问：如何实现响应式网页设计？ - 答：实现响应式网页设计主要依赖于CSS媒体查询（Media

Queries），通过不同的屏幕尺寸和设备特性来应用不同的样式规则。同时，使用流体布局（使用百分比而非固定像素）和可伸缩的图片和媒体元素也是关键。

5. 跨浏览器兼容性问题

- 问：如何解决跨浏览器兼容性问题？

- 答：解决跨浏览器兼容性问题可以通过多种方式，包括使用CSS前缀（如-webkit-, -moz-等），利用Polyfill库来填补旧浏览器对新特性的支持，以及使用条件注释或者特征检测来为不同浏览器提供不同的代码。

web前端工程面试题目(3篇)

第1篇

第一部分：基础知识

1. HTML/CSS基础

题目1：什么是盒子模型？

解析：

盒子模型是CSS中一个重要的概念，它描述了一个元素在网页中所占用的空间。一个元素的空间由以下四个部分组成：

- 内容（Content）：元素内部的实际内容。

- 内边距（Padding）：元素内容与边框之间的空间。

- 边框（Border）：围绕内边距的边框。

- 外边距（Margin）：元素与其他元素之间的空间。

题目2：行内元素有哪些？块级元素有哪些？空元素有哪些？

解析：

- 行内元素：通常不会影响布局，如``、``、``、``等。

- 块级元素：通常占据一整行，如`

`、`

- 空元素：没有内容且不需要闭合标签的元素，如``、`

题目3：CSS如何实现垂直水平居中？

解析：

有多种方法可以实现元素的垂直水平居中，以下是一种常见的方法：

```css

.wrapper {

position: relative; width: 500px;

height: 500px;

background-color: ddd;

}

.content {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

background-color: 6699FF;

width: 200px;

}

```

2. JavaScript基础

题目4：请解释事件冒泡和事件捕获。

解析：

- 事件冒泡：当事件发生在一个元素上时，事件会逐级向上传递，直到到达文档的根元素。

- 事件捕获：与事件冒泡相反，事件从文档的根元素开始，逐级向下传递到目标元素。

题目5：请解释闭包的概念。

解析：

闭包是一个函数及其周围状态（词法环境）的引用。它可以访问定义时的作用域中的变量，即使函数已经返回。题目6：请解释原型链的概念。

web前端面试题（一）

web前端⾯试题（⼀）

1 选择题

1.1 默认情况下，使⽤P标记会形成什么效果（）

A.在⽂字P所在位置中加⼊8个空格

B.P后⾯的⽂字会变成粗体

C.开始新的⼀⾏

D.P后⾯的⽂字会变成斜体

答案： C1.2 META元素的作⽤是什么（）

A.META元素⽤于表达HTML⽂档的格式

B.META元素⽤于指定相关HTML⽂档的信息

C.META元素⽤于实现本页的⾃动刷新

D.以上都不对

答案：B1.3 我们在HTML页⾯中制作了⼀个图像，想要在⿏标指向这个图像时浮出⼀条信息，应该使⽤哪个参数做（）

A.POP

B.SRC

C.ALT

D.MSG

答案：C1.4 使⽤以下哪⼀种元素可以将声⾳添加到⽹页⾥⾯（）

A.sound

B.bgsound

C.music

D.voice

答案：B1.5 以下HTML代码中，哪⼀个是将词语“Hello”显⽰为Verdana字体并且字号为5号的正确代码（）

A.Hello

B.Hello

C.Hello

答案：B1.6 在标签中，下列哪个属性⽤于给参数传递内容（）

A.Address

B.Value

C.Amount

D.Method

答案：B1.7 ⼀个⽂件夹名称叫Parent，其下有⼀个叫做test.asp的⽂件，和⼀个名为Child的⽂件夹。Child下有⼀个名为default.htm⽂件，想在default.htm中作⼀个连接，链到test.asp。以下正确的是（）

A.…

B.…

C.…

D.…

答案：C1.8 Window对象是代表InternetExplorer窗⼝的对象，其属性、⽅法和事件可以不经限定就可以直接使⽤。⽐如Window.Alert“stop”也可以直接写成：Alert“stop”这种说法是正确的还是错误的（）A.正确

B.错误

答案：A1.9 语句A：HTML⽂档必须包括“头”和“主体”两部分语句B：HTML⽂档的扩展名为.htm或.html以下说法正确的是：

A.两句都对

B.两句都错

C.只有A对

解析前端面试题2019年小米工程师面试题（附答案）

解析前端⾯试题2019年⼩⽶⼯程师⾯试题（附答案）

⼀、单选题（共24题，每题5分）1.关于XSS的说法，错误的是

A、script,js,vbscript,flash

B、分类：反射，存储

C、是浏览器端代码注⼊，恶意的script，css，html代码被浏览器解析

D、PHP相关漏洞

参考答案：D

答案解析：是浏览器端代码注⼊，恶意的script，css，html代码被浏览器解析。分类：反射，存储 script,js,vbscript,flash2.关于JSONP使⽤的说法错误的是：

A、可以实现跨域通信

B、基于 json 格式数据，兼容性好，简单易⽤

C、只⽀持跨域HTTP请求这种情况，不能解决不同域的两个页⾯之间进⾏JavaScript调⽤的问题

D、可以完美⽀持POST请求

参考答案：D3.HTML页⾯中有如下结构的代码，下列选项所⽰jQuery代码，不能够让汉字“四”的颜⾊变成红⾊的是？

A、 $("#header ul li:eq(3)").css("color","red");

B、 $("#header li:eq(3)").css("color","red");

C、 $("#header li:last").css("color","red");

D、 $("#header li:gt(3)").css("color","red");

参考答案：D

答案解析：

注意是选择不能4.下⾯哪⼀种属于“creational”的设计模式？

A、Façade

B、Singleton

C、Bridge

D、Composite

E、上⾯都不是

参考答案：B

答案解析：

总体来说设计模式分为三⼤类：

创建型模式，共五种：⼯⼚⽅法模式、抽象⼯⼚模式、单例模式、建造者模式、原型模式。

结构型模式，共七种：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。⾏为型模式，共⼗⼀种：策略模式、模板⽅法模式、观察者模式、迭代⼦模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式。5.站点⾸页最常⽤的⽂件名是（）。

下载提示

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

web前端面试问题

合集下载

web前端开发面试题及答案

web前端工程面试题目(3篇)

web前端面试题（一）

解析前端面试题2019年小米工程师面试题（附答案）

文档推荐

最新文档