2022年前端工程师入门最全面试题 .pdf

《2022年前端工程师入门最全面试题 .pdf》由会员分享，可在线阅读，更多相关《2022年前端工程师入门最全面试题 .pdf（10页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、学而不思则惘，思而不学则殆1、什么是 H5？H5=HTML5，指的是HTML 超文本标记语言（HTML）的第五次重大修改，HTML 的第五代。HTML5 具有的特点：（1） 、语义化的标签：好处是网站加载更快；该标签举例：header、nav、article 等。（2） 、增加了音频、视频标签：好处是取代falsh；该标签举例：audio、video。（3） 、canvas标签：好处在浏览器上绘制图形或动画，取代flash。（4） 、支持手机和平板的响应式布局。HTML5 的缺点：低版本浏览器支持性不好，比如IE9以下的浏览器不支持HTML5。2、H5 为什么这么火？H5 是哪一年产生的？H5

2、 会火多久？（1） 、因为 H5 的后台很硬，是谷歌（google）和苹果（ Apple）两大巨头公司，谷歌和苹果大力倡导H5 的发展，也是H5 的忠实的支持者和实践者（IOS+Android 系统占据手机市场92.36%） ，H5 的产生主要目的也是干掉flash，因为 flash 是 adobe 公司的， adobe 不是 W3C组织的成员之一，苹果和谷歌等万维网联盟也不希望在自己的产品中使用加载量过大的flash。（2） 、H5 是 20XX年 9 月份 W3C（万维网联盟，主要有苹果和谷歌公司）组织发布的。（3） 、刷脸时代（这里专指网站用户体验更加美观的时代）+移动端时代（手机+平板

3、） ，会促使 H5 会在未来的有更加美好的发展前景，只要有网站，H5 就会很火， UI 也就很火， H5的发展会让UI 更加提高用户的满意度，H5 的火爆时代，会促进UI 更好发展。(4)、微信的发展，O2O的促使 H5 更火。在这里不得不谈微信，如果没有微信，或许今天我们不会这样来讨论H5，微信无意中养成了用户扫码的习惯，并通过公众号的内容生产及分发，以及微信本身已有的庞大的用户群体及社交属性，使基于网页的内容可以快速传播，真正带来了APP 即浏览器的时代，取消了输入内容网址的麻烦。以微信为代表的超级社交APP ，解决了网页内容浏览及分发的通路。H5 或许会没落，但会迎来H6、H7，只会变得

4、越来越好，所以没必要担心H5 会不会死，当下重在实践与积累，至少现在，Html5 的影响力，会超出你我的想象，也就意味着H5 的好闺蜜 UI 会一直火下去。精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 1 页，共 10 页学而不思则惘，思而不学则殆3、什么叫做响应式？针对不用的屏幕显示不同的网页布局，比如说大屏幕手机、小屏幕手机、 平板能够适应不同的屏幕来显示网站。4、针对不同屏幕的响应式，UI 设计师该做几套设计图？只做一套，大多UI 设计师会使用iPhone5 的尺寸来做一套（640X1136） 。那么这种可以适配响应式的各种屏幕的吗？这种在

5、HTML5 中通过代码中的媒体查询来实现。媒体查询怎么写？媒体查询的具体写法如下：media screen and (max-width:640px) /最大宽度是640px 的屏幕宽度nav li /nav 标签下的li 标签设置样式display: inline; / 转化为行元素 5、div 是什么？在div 出现之前做网站用什么布局？div 是网站布局的盒子标签，div 出现是 table 布局，因为table 布局嵌套很多，网站加载慢，布局层级不清晰。6、html 是什么？ css是什么？ js 是什么？（1） 、 html 是超文本标记语言，他是做网站时候用的一些文本标记标签，比如

6、 div、 span 等。（2） 、 css 是层叠样式表，是做网站的时候给标签来美化网站的样式，比如说background（背景）、color（字体颜色）、height （高度）、width （宽度）等。（3） 、js=javascript 是网站中写前后台交互效果、网页动画效果的一种开发语言，比如鼠标点击事件（ click） 、前后台数据请求（ajax）等。7、什么是前端工程师？什么是后端工程师？前端工程师就是指的做静态网页的工程师：（1） 、广义的前端分为三种：安卓工程师、ios 工程师、 web 前端工程师。（2） 、狭义的前端指的是web 前端工程师， web 前端工程师指的是做静态

7、的PC端和手机端精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 2 页，共 10 页学而不思则惘，思而不学则殆静态网页的工程师。8、什么是静态网页？什么叫做动态网页？（1） 、静态网页：没有数据交互的网页，没有数据库参与，没有服务器端数据的加载。比如静态网页就是只有html+css+JavaScript做成的网站。（2） 、动态网页： 有后台数据参与的网页，网页中的数据是从数据库取的，需要有后台逻辑的支持。比如动态网页就是jsp 页面（后台语言是java） 、asp 页面（后台语言是） 。9、前端语言有哪些？后端语言有哪些？(1)、前端语言： HT

8、ML、css、javascript。(2)、后端语言（服务器端语言）：php、java、。最近新出的node.js 10、做一个网站的团队都需要哪些人？（1） 、产品经理：设计这个产品，通常就是了解用户的网站需求，画原型图。（2） 、项目经理： 通常是对整个产品有一个整理管理和负责，通常是会代码技术的人来构建整个网站的代码框架，以后网站实现的全面管理。（3） 、UI 设计师，通过原型图画psd 设计图的。（4） 、前端工程师，根据设计图来做静态网页，可能是原生app 的 IOS和安卓工程师，或者web 端的 web 前端工程师。（5） 、后端工程师，通常就是做java、php 的工程师来写后端

9、逻辑的工程师。11、行内元素有哪些？块级元素有哪些？空(void)元素有那些？（1） 、CSS规范规定，每个元素都有display 属性，确定该元素的类型，每个元素都有默认的display 值，比如div 默认 display 属性值为“ block” ，成为“块级”元素；span 默认 display属性值为“ inline” ，是“行内”元素。（2） 、行内元素有：a b span img input select strong （强调的语气）块级元素有： div ul ol li dl dt dd h1 h2 h3 h4 p。精选学习资料 - - - - - - - - - 名师归纳总结

10、 - - - - - - -第 3 页，共 10 页学而不思则惘，思而不学则殆（3） 、知名的空元素（单标签）： 。12、CSS的盒子模型？（1） 、 两种， IE 盒子模型、标准 W3C 盒子模型；IE 的 content 部分包含了border 和 pading; （2） 、盒模型：内容 (content) 、填充 (padding)、边界 (margin)、 边框 (border) 。13、浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？* IE 浏览器的内核Trident、 Mozilla （火狐）的Gecko、google（谷歌）的WebKit、Opera 内核 Presto

11、；* png24 为的图片在iE6 浏览器上出现背景，解决方案是做成PNG8. * 浏览器默认的margin 和 padding 不同。解决方案是加一个全局的*margin:0;padding:0; 来统一。* IE6 双边距 bug:块属性标签float 后，又有横行的margin 情况下， 在 ie6 显示 margin 比设置的大。14、你怎么来实现页面设计图，你认为前端应该如何高质量完成工作 ? 一个满屏（品）字布局如何设计 ? * 首先划分成头部、body、脚部；* 实现效果图是最基本的工作，精确到2px；与设计师，产品经理的沟通和项目的参与做好的页面结构，页面重构和用户体验处理ha

12、ck，兼容、写出优美的代码格式针对服务器的优化、拥抱HTML5。15、页面重构怎么操作？编写CSS 、让页面结构更合理化，提升用户体验，实现良好的页面效果和提升性能。16、为什么要初始化CSS样式。因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 4 页，共 10 页学而不思则惘，思而不学则殆当然，初始化样式会对SEO 有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。*最简单的初始化方法就是：* padding: 0;

13、margin: 0; 。17、Doctype作用 ? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? （1） 、 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。（2） 、严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。（3） 、在混杂模式中， 页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。（4） 、DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。18、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？* （1） 、id 选择器（# myid）（2） 、类选择器（.mycla

14、ssname）（3） 、标签选择器（div, h1, p）（4） 、相邻选择器（h1 + p）（5） 、子选择器（ul id class tag important 比 内联优先级高19、如何居中div，如何居中一个浮动元素? 确定容器的宽高宽 500 高 300 的层。设置层的外边距.div Width:500px ; height:300px;/高度可以不设Margin: -150px 0 0 -250px; position:relative; 相对定位background-color:pink;/ 方便看效果left:50%; top:50%; 20、css的基本语句构成是？选择器 属

15、性 1:值 1;属性 2:值 2;, 例如： divmargin-top:10px;border:1px solid #ccc 21、前端页面由哪三层构成，分别是什么？作用是什么？网页分成三个层次，即：结构层、表示层、行为层。网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。 ”网页的表示层（presentation layer ） 由 CSS 负责创建。CSS 对“如何显示

16、有关内容”的问题做出了回答。网页的行为层（behavior layer ）负责回答“内容应该如何对事件做出反应”这一问题。这是精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 6 页，共 10 页学而不思则惘，思而不学则殆Javascript 语言和DOM 主宰的领域。22、你做的页面在哪些流览器测试过？IE内核浏览器：360，傲游，搜狗，世界之窗，腾讯TT。非 IE内核浏览器： firefox opera safari chrome 。23、著名的前端框架都有哪些的呢？布局框架： bootstrap 、easy UI等。Js动效框架： jquery

17、 、angular.js 等。24、做一个网页设计师或者前端工程师，平常访问学习的IT网站都有哪些？（1） 、W3C *shool （2） 、segme*tFault （3） 、cs*n （4） 、知呼论坛（5） 、博 *园25、切图工作是UI 设计师来做？还是前端工程师来做？对于 app 工程师，也就是ios 和 Android 工程师，大多由UI 设计师来完成切图。对于 web 前端工程师，也就是PC端、浏览端，大多有web 前端工程师自己完成切图。26、切图工程师、前端工程师、UI 设计师、美工、网页设计师区别是什么？（1） 、UI 设计师俗称美工，不过UI 设计师工作高端、名字大气、工

18、资上档次，不过大多公司都称呼UI 为美工，你也不要介意的，不管他们怎么称呼的，反正就是做网站设计图的就OK，别人怎么称呼不重要的了，只要你拿了高工资就是UI 设计师了：UI 的主要任务是设计。了解用户的意图，分析网站配色，基本布局。绘制出一个网站效果精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 7 页，共 10 页学而不思则惘，思而不学则殆图。UI 需要掌握的知识体系应该包括网页设计，UI（User Interface）用户界面人机交互、操作逻辑、界面美观的整体设计，UED （ user experience design）用户体验设计简单来说就

19、是如何使得网站更加便于交互。（2） 、前端开发：美工在完成设计效果图之后，由前端开发人员将其制作成为适合浏览器查看的HTML 页面。由于现在移动互联网的大规模流行，加上各个不同厂商的浏览器的激烈竞争，前端开发的主要任务简单来说就是使网页在不同浏览器不同分辨率不同设备上提供相似或相近的浏览体验。前端开发需要掌握的知识体系主要是兼容性问题的解决，流畅完美的交互体验。具体到技术细节上就是HTML，CSS ，JavaScript，各大公司各种不同内核的浏览器、各种各样的JS库、简单的与后台交互的知识。（3） 、后台开发：前台开发完成之后，就是后台程序员的工作了，相比较前端来说，后台更像传统意义上的程序

20、员。后台的工作简单来说就是网页文件对数据库的增删改查。后台需要掌握的知识体系应该包括，编程基础，基本 HTML 语言，至少一门主流网页语言 （C#，C+，JAVA ， PHP等） ，数据库的操作等等。（4） 、 UI 设计师和网页设计师有什么区别？其实网页设计，分出来有两块，一个是UI 设计，一个是web 前端。 UI 设计自然要懂的更多的是 PS ，FW，AI，CD等制图软件，还有一些比较优秀的网页设计理念，切图等相关知识。web 前端，需要的html+css+javascript，通过这三个东西把设计图转换成代码。这一步所实现的就是设计图的静态化，也就是变成了网页形式。网页设计师，是个很泛

21、的概念，不过一般指的会偏重UI 设计。稍微关注过网页设计领域的公司，有点规模的，招人都会写得比较详细，例如招UI 设计师，或者招web 前端工程师。你找工作的时候，都找这些名称比较规范的，因为起码他们会区别职位的不同。一定要找的时候看清楚是UI 设计师，不是找前端或者美工的，前端更多的写较高级的代码的，会比设计懂的知识点更多的，美工其实就是淘宝装修店铺或者说简单的PS照片的，就是会玩美图秀秀或者PS简单的绘图就可以的了，UI 设计师才是咱们的IT 行业“高大上”职位。（5） 、UI 设计师：“UI” 的本义是用户界面， 是英文 User 和 interface 的缩写。UI 设计师简称UID

22、（User Interface Designer） ，指从事对软件的人机交互、操作逻辑、界面美观的整体设计工作的人。精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 8 页，共 10 页学而不思则惘，思而不学则殆UI 设计师的涉及范围包括商用平面设计、高级网页设计、移动应用界面设计及部分包装设计，是目前中国信息产业中最为抢手的人才之一。UI 设计师的特点是：工资高、发展前景好，会一些简单的前端知识代码，做手机端和PC端的网站设计图。27、UI 设计师的工作内容是什么？（1） 、负责软件界面的美术设计、创意工作和制作工作；（2） 、根据各种相关软件的用

23、户群，提出构思新颖、有高度吸引力的创意设计；（3） 、对页面进行优化，使用户操作更趋于人性化；（4） 、维护现有的应用产品；（5） 、收集和分析用户对于GUI 的需求。28、UI 设计师需要会使用的工具的简称都有哪些？以下一些工具的简称，大家应该有一定的了解，以免被问到咱们只知道简称。（1） 、AI (adobe illustrator) 基于矢量的图形制作软件（2） 、PS(adobe Photoshop)图像处理软件。（3） 、DW(Adobe Dreamweaver) 网页编辑器（4） 、AE(Adobe After Effects)一款图形视频处理软件（5） 、flash（Adobe

24、Flash）二维动画软件（6） 、Axure（ Axure RP ）快速原型设计工具（7） 、墨刀（ MockingBot ）移动端原型工具（8） 、Fireworks 网页作图软件29、什么时网页三剑客？网页三剑客，是一套强大的网页编辑工具，最初是由Macromedia公司开发出来的。由Dreamweaver，Fireworks，Flash三个软件组成，俗称网页三剑客。Dreamweaver 是一个“所见即所得”的可视化网站开发工具，主要用于动态网页和静态网精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 9 页，共 10 页学而不思则惘，思而不学则殆页的开发； Fireworks 主要是用于对网页上常用的jpg、gif 的制作和处理，也可用于制作网页布局； Flash主要用来制作动画，现推出Flash平台，可预见有极好的前景。30、怎么调试网页代码？怎么查看网页源代码？（1） 、按键盘上的F12，打开开发者调试工具；（2） 、鼠标右键查看页面源代码。精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 10 页，共 10 页