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

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

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

2、ML5；2、H5 为什么这么火？H5 是哪一年产生的？H5 会火多久？（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,解决了网页内容浏览及分发

4、的通路；H5 或许会没落,但会迎来 H6、H7 ,只会变得越来越好,所以没必要担忧 H5 会不会死,当下重在实践与积存,至少现在,Html5 的影响力,会超出你我的想象,也就意味着 H5 的好闺蜜 UI 会始终火下去；名师归纳总结 - - - - - - -第 1 页,共 10 页精选学习资料 - - - - - - - - - 学而不思就惘,思而不学就殆3、什么叫做响应式？针对不用的屏幕显示不同的网页布局,比如说大屏幕手机、小屏幕手机、 平板能够适应不同的屏幕来显示网站；4、针对不同屏幕的响应式,UI 设计师该做几套设计图？只做一套,大多UI 设计师会使用iPhone5 的尺寸来做一套（64

5、0X1136）；那么这种可以适配响应式的各种屏幕的吗？这种在 媒体查询的具体写法如下：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）、ht

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

7、）、狭义的前端指的是web 前端工程师, web 前端工程师指的是做静态的PC端和手机端第 2 页,共 10 页- - - - - - -精选学习资料 - - - - - - - - - 学而不思就惘,思而不学就殆静态网页的工程师；8、什么是静态网页？什么叫做动态网页？（1）、静态网页：没有数据交互的网页,没有数据库参加,没有服务器端数据的加载；比如静态网页就是只有 html+css+JavaScript做成的网站；（2）、动态网页： 有后台数据参加的网页,网页中的数据是从数据库取的,需要有后台规律的支持；比如动态网页就是 jsp 页面（后台语言是 java）、asp 页面（后台语言是 ）；9

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

9、常就是做 java、php 的工程师来写后端规律的工程师；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、

11、Opera 内核 Presto；* png24 为的图片在 iE6 浏览器上显现背景,解决方案是做成 PNG8. * 浏览器默认的 margin 和 padding 不同；解决方案是加一个全局的 *margin:0;padding:0; 来统一；* IE6 双边距 bug:块属性标签float 后,又有横行的margin 情形下, 在 ie6 显示 margin 比设置的大；14、你怎么来实现页面设计图,你认为前端应当如何高质量完成工作 . 一个满屏（品）字布局 如何设计 . * 第一划分成头部、body、脚部；* 实现成效图是最基本的工作,精确到 做好的页面结构,页面重构和用户体验处理 的优

12、化、拥抱 HTML5；15、页面重构怎么操作？2px；与设计师,产品经理的沟通和项目的参加 hack,兼容、写出美丽的代码格式针对服务器编写 CSS、让页面结构更合理化,提升用户体验,实现良好的页面成效和提升性能；16、为什么要初始化CSS样式；假如没对CSS初始化往由于浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,往会显现浏览器之间的页面显示差异；名师归纳总结 - - - - - - -第 4 页,共 10 页精选学习资料 - - - - - - - - - 学而不思就惘,思而不学就殆当然,初始化样式会对 SEO 有肯定的影响,但鱼和熊掌不行兼得,但力求影响最小的情形下初始化；*最

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

14、（# myid）（2）、类挑选器（ .myclassname）（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%;

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

16、on layer ） 由 CSS 负责创建；题做出了回答；CSS 对“ 如何显示有关内容” 的问网页的行为层（ behavior layer ）负责回答“ 内容应当如何对大事做出反应” 这一问题；这是名师归纳总结 - - - - - - -第 6 页,共 10 页精选学习资料 - - - - - - - - - 学而不思就惘,思而不学就殆Javascript 语言和 DOM 主宰的领域；22、你做的页面在哪些流览器测试过？IE内核浏览器： 360,傲游,搜狗,世界之窗,腾讯 TT；非 IE 内核浏览器： firefox opera safari chrome ；23、闻名的前端框架都有哪些的呢

17、？布局框架： bootstrap 、easy UI等；Js动效框架： jquery 、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 设计师、

18、美工、网页设计（1）、UI 设计师俗称美工,不过 UI 设计师工作高端、名字大气、工资上档次,不过大多公司都称呼 UI 为美工,你也不要介意的,不管他们怎么称呼的,反正就是做网站设计图的就OK,别人怎么称呼不重要的了,只要你拿了高工资就是 UI 设计师了：UI 的主要任务是设计；明白用户的意图,分析网站配色,基本布局；绘制出一个网站成效名师归纳总结 - - - - - - -第 7 页,共 10 页精选学习资料 - - - - - - - - - 学而不思就惘,思而不学就殆图； UI 需要把握的学问体系应当包括网页设计,UI（User Interface ）用户界面人机交互、操作规律、界面美观

19、的整体设计,UED（ user experience design）用户体验设计 简洁来说 就是如何使得网站更加便于交互；（2）、前端开发：美工在完成设计成效图之后,由前端开发人员将其制作成为适合浏览器查看的 HTML 页面；前端开发的主 由于现在移动互联网的大规模流行,加上各个不同厂商的浏览器的猛烈竞争,要任务简洁来说就是使网页在不同浏览器不同辨论率不同设备上供应相像或相近的浏览体 验；前端开发需要把握的学问体系主要是兼容性问题的解决,流畅完善的交互体验；具体到技术 JS库、细节上就是 HTML,CSS,JavaScript,各大公司各种不同内核的浏览器、各种各样的 简洁的与后台交互的学问；

20、（3）、后台开发：前台开发完成之后,就是后台程序员的工作了,相比较前端来说,后台更像传统意义上的程序员；后台的工作简洁来说就是网页文件对数据库的增删改查；后台需要把握的学问体系应当包括,编程基础,基本 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

22、设计师：“ UI” 的本义是用户界面, 是英文 User 和 interface 的缩写；UI 设计师简称 UID（User Interface Designer）,指从事对软件的人机交互、操作规律、界面美观的整体设计工作的人；名师归纳总结 - - - - - - -第 8 页,共 10 页精选学习资料 - - - - - - - - - 学而不思就惘,思而不学就殆UI 设计师的涉及范畴包括商用平面设计、高级网页设计、移动应用界面设计及部分包装设 计,是目前中国信息产业中最为抢手的人才之一；UI 设计师的特点是：工资高、进展前景好,会一些简洁的前端学问代码,做手机端和 PC端 的网站设计图；2

23、7、UI 设计师的工作内容是什么？（1）、负责软件界面的美术设计、创意工作和制作工作；（2）、依据各种相关软件的用户群,提出构思新奇、有高度吸引力的创意设计；（3）、对页面进行优化,使用户操作更趋于人性化；（4）、保护现有的应用产品；（5）、收集和分析用户对于 GUI 的需求；28、UI 设计师需要会使用的工具的简称都有哪些？以下一些工具的简称,大家应当有肯定的明白,以免被问到咱们只知道简称；（1）、AI adobe illustrator 基于矢量的图形制作软件（2）、PSadobe Photoshop图像处理软件；（3）、DWAdobe Dreamweaver 网页编辑器（4）、AEAdo

24、be After Effects一款图形视频处理软件（5）、flash（Adobe 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 页