前端最新面试题

合集下载

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.POPB.SRCC.ALTD.MSG答案：C1.4 使⽤以下哪⼀种元素可以将声⾳添加到⽹页⾥⾯（）A.soundB.bgsoundC.musicD.voice答案：B1.5 以下HTML代码中，哪⼀个是将词语“Hello”显⽰为Verdana字体并且字号为5号的正确代码（）A.<font size="5" font="Verdana">Hello</font>B.<font size="5" face="Verdana">Hello</font>C.<font size=5 face=Verdana>Hello</font>D.<font size=5 face="Verdana",text="Hello"</font>答案：B1.6 在<param>标签中，下列哪个属性⽤于给参数传递内容（）A.AddressB.ValueC.AmountD.Method答案：B1.7 ⼀个⽂件夹名称叫Parent，其下有⼀个叫做test.asp的⽂件，和⼀个名为Child的⽂件夹。

Child下有⼀个名为default.htm⽂件，想在default.htm中作⼀个连接，链到test.asp。

Web前端中级面试题

Web前端中级面试题一、不定项选择1. flex属性是下列哪三个属性的缩写？( )A.flex-growB.flex-wrapC.flex-shrinkD.flex-basis2. 下列哪些选项是JavaScript中的假值（Falsy value）？( )A. 0B. ""C. nullD. undefinedE. NaNF. "false"3. 下列选项中，不是window对象的属性的是( )A. pageXB. locationC. historyD. navigator4. 下面程序输出的结果是什么？( )function sayHi() {console.log(name);console.log(age);var name = "Lydia";let age = 21;}sayHi();A: Lydia 和undefinedB: Lydia 和ReferenceErrorC: ReferenceError 和21D: undefined 和ReferenceError5. 下列关于原型的说法错误的是( )A. 原型可以节省内存空间B. 构造函数中的prototype属性，它是一个对象，我们称之为原型C. 原型有constructor属性，原型的constructor属性指向构造函数D. 任何一个对象都有__proto__属性，实例的对象的__proto__属性指向构造函数二、填空题1. JavaScript是由哪几部分组成。

2. 表达式“123abc”-“123”的计算结果是。

3. 写出三种获取DOM元素的方法。

4. [ 1 , 2 , 3 ].map(parseInt) 输出结果为。

5. 请写出以下代码的执行顺序。

console.log(1)const p = new Promise((resolve) => {console.log(2)resolve()})console.log(3)setTimeout(() => {console.log(4)}, 0)p.then(() => console.log(5))setTimeout(() => {console.log(6)}, 0)console.log(7)三、简答题1. 请写出10个数组实例可以调用的方法。

前端工程化面试问题

前端工程化面试问题一、基础知识1. 请简述一下你对HTML5的理解？HTML5在前端开发中扮演了什么样的角色？2. 什么是CSS，它的主要作用是什么？3. JavaScript的主要特性和应用场景有哪些？4. 请谈谈你对前端框架（如React、Vue、Angular等）的理解。

你可以详细描述一下你熟悉的前端框架的主要特性和使用场景吗？5. 请解释一下什么是前端路由，以及它的实现原理。

6. 请简述一下你对前端工程化的理解，以及它的重要性。

7. 什么是模块化，如何实现前端模块化？8. 请解释一下什么是HTTP和HTTPS，以及他们的区别。

9. 请简述一下你对Webpack的理解，以及它的主要功能和使用场景。

10. 请解释一下什么是DOM，以及它的重要性。

二、进阶知识1. 请解释一下什么是虚拟DOM，以及它与真实DOM的区别和联系。

2. 请谈谈你对前端性能优化的理解，以及你通常采用的前端性能优化方法。

3. 请解释一下什么是CSS预处理器（如Sass、Less等），以及他们的特性和使用场景。

4. 请谈谈你对前端安全性的理解，以及你通常采用的前端安全措施。

5. 请解释一下什么是前端自动化，以及你熟悉的前端自动化工具和框架。

6. 请解释一下什么是前端响应式设计，以及它的实现原理。

7. 请谈谈你对前端组件化的理解，以及你通常采用的前端组件设计和开发方法。

8. 请解释一下什么是Service Worker，以及它的主要功能和使用场景。

9. 请谈谈你对前端模块热替换（Hot Module Replacement）的理解，以及它的主要优点和限制。

10. 请解释一下什么是前端路由懒加载，以及它的实现原理和优点。

三、实战经验1. 请描述一下你在过去的工作中遇到的最大的前端技术挑战，你是如何解决的？2. 请谈谈你在使用前端框架开发中的经验，以及你对其优缺点的理解。

3. 请描述一下你在前端工程化实践中遇到的问题和解决方法。

web前端开发面试题及答案

web前端开发面试题及答案Web前端开发是互联网行业中一个非常热门的领域，涉及到网页设计、开发和用户体验等多个方面。

在面试过程中，面试官通常会提出一系列问题来评估应聘者的专业知识和技能。

以下是一些常见的Web前端开发面试题及答案：1. HTML相关问题- 问：HTML5有哪些新特性？- 答：HTML5引入了新的语义元素如`<header>`, `<footer>`,`<article>`, `<section>`等，增强了表单控件，如`<inputtype="date">`，`<input type="range">`等，支持多媒体内容，如`<video>`和`<audio>`，以及提供了绘图功能`<canvas>`。

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

3. JavaScript相关问题- 问：JavaScript中的闭包是什么？- 答：闭包是指一个函数能够记住并访问其创建时的环境，即使该环境的外部上下文已经执行完毕。

闭包通常用于创建私有变量和方法，或者在回调函数中使用外部变量。

4. 响应式设计相关问题- 问：如何实现响应式网页设计？- 答：实现响应式网页设计主要依赖于CSS媒体查询（Media Queries），通过不同的屏幕尺寸和设备特性来应用不同的样式规则。

同时，使用流体布局（使用百分比而非固定像素）和可伸缩的图片和媒体元素也是关键。

前端面试题及答案中高级

前端面试题及答案中高级# 前端面试题及答案中高级1. HTML5 新增了哪些表单元素？HTML5 引入了多个新的表单元素，包括但不限于：- `email`：用于输入电子邮件地址。

- `url`：用于输入URL。

- `number`：用于输入数字。

- `range`：用于输入一定范围内的数字。

- `date`：用于输入日期。

- `month`：用于输入月份和年份。

- `week`：用于输入周和年份。

- `time`：用于输入时间。

- `datetime`：用于输入日期和时间。

- `datetime-local`：用于输入日期和时间（不包含时区）。

- `search`：用于搜索框。

- `tel`：用于输入电话号码。

- `color`：用于选择颜色。

2. CSS选择器有哪些类型？CSS选择器主要分为以下几类：- 标签选择器：根据HTML标签选择元素，如`div`, `p`。

- 类选择器：使用点号`.`后跟类名选择元素，如`.example`。

- ID选择器：使用井号`#`后跟ID名选择元素，如`#unique`。

- 属性选择器：根据属性选择元素，如`[type="text"]`。

- 伪类选择器：用于选择元素的特殊状态，如`:hover`, `:first-child`。

- 伪元素选择器：用于选择元素的特定部分，如`::before`,`::after`。

- 组合器：用于组合选择器，如后代选择器` `, 子选择器`>`, 相邻兄弟选择器`+`, 通用兄弟选择器`~`。

3. JavaScript中闭包是什么？闭包是一个函数和声明该函数的词法环境的组合。

闭包让你可以从内部函数访问外部函数作用域中的变量。

即使外部函数已经执行完毕，闭包仍然可以访问外部函数的变量。

4. 解释JavaScript中的原型继承。

JavaScript中的原型继承是一种基于原型链的继承方式。

每个JavaScript对象都有一个原型对象，对象的属性和方法可以通过原型链向上查找。

人事面试前端开发的面试题

人事面试前端开发的面试题
以下是一些常见的前端开发面试题：
1. 解释一下什么是前端开发？
2. 前端开发和后端开发的区别是什么？
3. 在HTML中，什么是语义化？
4. 请解释一下CSS的盒模型和如何影响布局？
5. 请解释一下CSS选择器与优先级的原则是什么？
6. 请解释一下浮动和清除浮动的原理？
7. HTML中的"data-"属性有什么作用？
8. 请解释一下响应式设计和自适应设计的区别是什么？
9. 解释一下什么是AJAX，以及它在前端开发中的作用是什么？
10. 请解释一下什么是跨域请求，以及如何解决跨域问题？
11. 请描述一下Web安全中的CSRF和XSS攻击，并提供防
御方法。

12. 请解释一下什么是闭包，以及闭包在JavaScript中的应用
场景。

13. 请解释一下JavaScript中的事件委托是什么，以及它的作
用是什么？
14. 解释一下CSS的预处理器和后处理器的区别是什么？
15. 解释一下前端性能优化的策略有哪些？
这些问题涵盖了前端开发的各个方面，从基础的HTML、CSS
知识到JavaScript的高级概念和常见的性能优化策略。

当然，
根据不同的公司和职位要求，面试官可能会针对特定的技能或经验提出更具体的问题。

前端八股文面试题

前端八股文面试题1. 请简述 CSS 盒模型及其组成部分。

CSS 盒模型指的是 HTML 元素在视觉上由一个内容区域（Content）、内边距区域（Padding）、边框区域（Border）和外边距区域（Margin）所组成的一个矩形框。

其中，内容区域是元素实际显示内容所在的区域，内边距区域指的是内容区域和边框之间的距离，边框区域是元素的边框，外边距区域指的是边框和相邻元素之间的距离。

2. 请描述 CSS 选择器的优先级。

CSS 选择器的优先级是一种用于确定当多个 CSS 规则应用于同一元素时那种规则具有更高优先级的机制。

优先级是由选择器中各部分的组合构成的。

其中，优先级最高的是“!important”声明，其次是行内样式（在元素内部使用 style 属性定义的样式），然后按照样式选择器、类选择器、ID 选择器的顺序比较各自的个数，最后比较通用选择器和继承选择器的个数。

如果优先级相同，则按照样式表中出现的顺序排列。

3. 请解释浮动和清除浮动的概念及实现方式。

浮动是一种常用于布局的 CSS 属性，它指的是元素高度默认为内容高度，左右两侧会自动贴合父容器或之前的浮动元素。

而清除浮动则是为了避免浮动元素对后续元素布局的影响，需要将浮动元素产生的影响消除。

清除浮动可以通过在父元素的末尾添加一个具有 clear 属性样式的空元素（通常为 div），这个空元素就会将父级元素的高度撑起来，避免浮动元素对后续元素的影响。

另外，也可以采用在父元素中添加 overflow:hidden 属性的方式来清除浮动。

4. 请列举至少 5 种盒子布局的属性。

1. display：指定元素的显示方式，常见的包括 block、inline、inline-block、flex、grid 等。

2. position：控制元素的定位方式，常见的包括static、relative、absolute、fixed 等。

3. float：控制元素的浮动方式，常用于元素的左右布局。

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

这篇文章将分为三部分css和html为一部分，js、jQuery为一部分，vue与性能优化为一部分，今天会先整理css与html1，弹性盒布局父级设置display：flex将对象作为弹性伸缩盒显示采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。

其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。

容器默认生成两根主轴，水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。

设置在容器上的属性有6种分别为flex-direction：决定主轴的方向（即项目的排列方向）flex-wrap：定义换行情况flex-flow：flex-direction和flex-wrap的简写，默认row nowrapjustify-content：定义项目在主轴上的对齐方式。

align-item：定义在交叉轴上的对齐方式align-content：定义多根轴线的对齐方式详细属性值请参阅文档2，html5新标签与新功能新标签：header,footer,article,aside,nav,section,time,progress,ruby,mark....新功能：vidio，audio，canvas，拖放，离线应用，web存储（sessionStorage，localStorage，sessionStorage 方法针对一个session 进行数据存储。

当用户关闭浏览器窗口后，数据会被删除，localStorage 对象存储的数据没有时间限制。

第二天、第二周或下一年之后，数据依然可用），历史状态管理，地理位置，新增input类型（color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week），新增表单元素，WebSocket3、css3的新特性属性选择器：[attribute],[attribute=value],[attribute~=value]...伪类选择器：:first-letter ，:first-line，:first-child....伪元素选择器：:before，:afterborder：border-image，border-radius,box-shadow背景：background-size,background-origin,background-clip，background-image渐变：线性渐变（Linear Gradients）径向渐变（Radial Gradients）background: linear-gradient(direction, color-stop1, color-stop2, ...);background: radial-gradient(center, shape size, start-color, ..., last-color);字体：@font-face转换和变形：transform过度：transition动画：animation，@keyframes媒体查询：@media all and4，兼容问题：各浏览器的margin和padding，图片默认的间距，ios和安卓对fixed的解析，特殊样式的兼容（-moz-：firefox，-webkit-：Chrome，-o-：opera，-ms-：ie）渐进增强和优雅降级渐进增强观点认为应该关注于内容本身。

内容是我们建立网站的诱因，有的网站展示它，有的则收集它，有的寻求、有的操作，还有的网站甚至包含以上的种种，但相同点是他们全都涉及到内容，这使得“渐进增强”成为一种更为合理的设计范例。

这也是它立即被Yahoo!所采纳并用以构建其“分级式浏览器支持（Graded Browser Support)“策略的原因所在。

优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。

而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如IE、Mozilla等）的前一个版本。

在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨（poor,but passable)”的浏览体验。

你可以做一些小的调整来适应某个特定的浏览器。

但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

5、css选择器的优先级important(1000)>行内（1000）>id(100)>class(10)>标签（1）>*(0)6、清除浮动总结有两种方法方法一：使用clear属性如添加空白div或使用伪元素，添加clear：both方法二：形成BFC：如：overflow：hidden，display：inline，position：absolute,float:left7，引入css的方法link，@importat，他们的不同之处在于important用在css中并且引入的css在页面加载完之后加载，link用在html中并且引入的css 和页面同时加载，8、盒子模型包含元素内容（content），内边距（padding），边框（border），外边距（margin），分为标准盒子模型和怪异盒子模型，标准盒子模型：盒子的总宽度=margin+content。

怪异盒子模型：盒子的总宽度=margin+contant+padding+borderCSS3中新增的属性：box-sizing模拟了标准盒子模型和IE盒子模型box-sizing:content-box | bordrer-box | padding-box | inherit。

默认值：content-box:标准盒子模型(border和padding不计算入width之内)border-box:IE盒子模型(border和padding计算入width之内，其实就是怪异模式了~)padding-box:padding计算入width内ie8+浏览器支持content-box和border-box；ff则支持全部三个值,只有ff支持padding-boxIE浏览器在getComputedStyle得到width/height是按照标准模式计算的，而不论box-sizing的取值在HTML页面声明 <!DOCTYPE html>即可按照标准模型显示页面内容9，display:none和visibility:hidden两者的区别空间占据：display:none隐藏后不占据额外空间，它会产生回流和重绘，而visibility:hidden和opacity:0元素虽然隐藏了，但它们仍然占据着空间，它们俩只会引起页面重绘。

子元素继承：display:none不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了，皮之不存，毛之安附~~visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显示事件绑定：display:none 的元素都已经不再页面存在了，因此肯定也无法触发它上面绑定的事件；visibility:hidden 元素上绑定的事件也无法触发；opacity: 0元素上面绑定的事件是可以触发的。

过渡动画：transition对于display肯定是无效的，大家应该都知道；transition对于visibility也是无效的；transition对于opacity是有效，大家也是知道的:).10，position所有属性：position: relative;相对定位：1> 不影响元素本身特性（无论区块元素还是内联元素会保留其原本特性）2> 不会使元素脱离文档流（元素原本位置会被保留，即改变位置也不会占用新位置）3> 没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移）4>提升层级（用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越大越在上面，z-index只能在position属性值为relative或absolute或fixed的元素上有效。

）（两个都为定位元素，后面的会覆盖前面的定位）position: absolute;绝对定位：1> 使元素完全脱离文档流（在文档流中不再占位）2> 使内联元素在设置宽高的时候支持宽高（改变内联元素的特性）3> 使区块元素在未设置宽度时由内容撑开宽度（改变区块元素的特性）4> 相对于最近一个有定位的父元素偏移（若其父元素没有定位则逐层上找，直到document——页面文档对象）5> 相对定位一般配合绝对定位使用（将父元素设置相对定位，使其相对于父元素偏移）6> 提升层级（同相对定位）position: fixed;固定定位： fixed生成固定定位的元素，相对于浏览器窗口进行定位。

position:static：默认值：默认布局。

元素出现在正常的流中（忽略top, bottom, left, right 或者z-index 声明）。

position: sticky 粘性定位：粘性定位，该定位基于用户滚动的位置。

它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed;，它会固定在目标位置。

注意: Internet Explorer, Edge 15 及更早IE 版本不支持sticky 定位。

Safari 需要使用-webkit- prefix 。

position: inherit：规定应该从父元素继承position 属性的值。

posiyion: initial ：设置该属性为默认值，详情查看CSS initial 关键字initial 关键字用于设置CSS 属性为它的默认值。

initial 关键字可用于任何HTML 元素上的任何CSS 属性。

11、position:absolute和float属性的异同？两者的共同点：对行内元素设置float或absolute属性，可以让元素脱离文档流，并且可以设置其宽高。

两者的不同点：float仍会占位置，position会覆盖文档流中的其他元素。

12、如何保持浮层水平垂直居中1，弹性盒.parent{justify-content:center;align-items:center;display:flex;}2，利用定位和margin.parent{height:400px;position: relative;background: red;}.children{width: 200px;height: 200px;margin: -100px 0 0 -100px;background: black;position: absolute;top: 50%;left:50%;}3，利用定位和变形.children{position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%,-50%);background: black;}4，display:table-cell.parent{width: 400px;height: 100px;background: black;display: table-cell;vertical-align: middle;text-align: center;}.child{backgroung: red;display: inline-block}13，样式的层级关系，选择器优先级，样式冲突，以及抽离样式模块怎么写样式的层级关系：一个是权重，另一个就是共用样式和私用样式了，比如说两个ul，它们的子元素除了背景色之外都一样，那可以直接用li {}来定义相同的公用样式，用.ul_1 li {} ，.ul_2 li {} 来定义不相同的样式。