前端工程师入门最全面试题

《前端工程师入门最全面试题》由会员分享，可在线阅读，更多相关《前端工程师入门最全面试题（9页珍藏版）》请在金锄头文库上搜索。

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 是 2014 年 9 月份 W3C（万维网联盟，主要有苹果和谷歌公司）组织发布的。（3 ） 、刷脸时代（这里专指网站用户体验更加美观的时代）+移动端时代

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

4、H6、H7，只会变得越来越好，所以没必要担心 H5 会不会死，当下重在实践与积累，至少现在，Html5 的影响力，会超出你我的想象，也就意味着 H5 的好闺蜜 UI 会一直火下去。3、什么叫做响应式？针对不用的屏幕显示不同的网页布局，比如说大屏幕手机、小屏幕手机、平板能够适应不同的屏幕来显示网站。4、针对不同屏幕的响应式，UI 设计师该做几套设计图？只做一套，大多 UI 设计师会使用 iPhone5 的尺寸来做一套（640X1136） 。那么这种可以适配响应式的各种屏幕的吗？这种在 HTML5 中通过代码中的媒体查询来实现。媒体查询怎么写？媒体查询的具体写法如下：media screen an

5、d (max-width:640px) /最大宽度是 640px 的屏幕宽度nav li /nav 标签下的 li 标签设置样式display: inline; /转化为行元素5、 div 是什么？在 div 出现之前做网站用什么布局？div 是网站布局的盒子标签，div 出现是 table 布局，因为 table 布局嵌套很多，网站加载慢，布局层级不清晰。6、 html 是什么？css 是什么？js 是什么？（1 ） 、html 是超文本标记语言，他是做网站时候用的一些文本标记标签，比如 div、span等。（2 ） 、 css 是层叠样式表，是做网站的时候给标签来美化网站的样式，比如说ba

6、ckground（背景） 、color（字体颜色） 、height（高度） 、width（宽度）等。（3 ） 、js=javascript 是网站中写前后台交互效果、网页动画效果的一种开发语言，比如鼠标点击事件（click） 、前后台数据请求（ajax）等。7、什么是前端工程师？什么是后端工程师？前端工程师就是指的做静态网页的工程师：（1 ） 、广义的前端分为三种：安卓工程师、ios 工程师、web 前端工程师。（2 ） 、狭义的前端指的是 web 前端工程师，web 前端工程师指的是做静态的 PC 端和手机端静态网页的工程师。8、什么是静态网页？什么叫做动态网页？（1 ） 、静态网页：没有数

7、据交互的网页，没有数据库参与，没有服务器端数据的加载。比如静态网页就是只有 html+css+JavaScript 做成的网站。（2 ） 、动态网页：有后台数据参与的网页，网页中的数据是从数据库取的，需要有后台逻辑的支持。比如动态网页就是 jsp 页面（后言是 java） 、asp 页面（后言是 ） 。9、前端语言有哪些？后端语言有哪些？(1)、前端语言：HTML、css、javascript。(2)、后端语言（服务器端语言）：php、java、 。最近新出的 node.js10、做一个网站的团队都需要哪些人？（1 ） 、产品经理：设计这个产品，通常就是了解用户的网站需求，画原型图。（2 ）

8、、项目经理：通常是对整个产品有一个整理管理和负责，通常是会代码技术的人来构建整个网站的代码框架，以后网站实现的全面管理。（3 ） 、UI 设计师，通过原型图画 psd 设计图的。（4 ） 、前端工程师，根据设计图来做静态网页，可能是原生 app 的 IOS 和安卓工程师，或者 web 端的 web 前端工程师。（5 ） 、后端工程师，通常就是做 java、、php 的工程师来写后端逻辑的工程师。11、行内元素有哪些？块级元素有哪些？空(void)元素有那些？（1 ） 、CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认的 display 值，比如 div

9、默认 display 属性值为“block” ，成为“块级”元素；span 默认display 属性值为“inline” ，是“行内”元素。（2 ） 、行内元素有：a b span img input select strong（强调的语气）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4p。（3 ） 、知名的空元素（单标签）： 。12、CSS 的盒子模型？（1 ） 、两种， IE 盒子模型、标准 W3C 盒子模型；IE 的 content 部分包含了 border 和 pading;（2 ） 、盒模型： 内容(content) 、填充(padding) 、边界(

10、margin)、 边框(border) 。13、浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？* IE 浏览器的内核 Trident、 Mozilla（火狐）的 Gecko、google （谷歌）的 WebKit、Opera内核 Presto；* png24 为的图片在 iE6 浏览器上出现背景，解决方案是做成 PNG8.* 浏览器默认的 margin 和 padding 不同。解决方案是加一个全局的 *margin:0;padding:0;来统一。* IE6 双边距 bug:块属性标签 float 后，又有横行的 margin 情况下，在 ie6 显示 margin 比设置的大。1

11、4、你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏（品）字布局 如何设计? * 首先划分成头部、 body、脚部；* 实现效果图是最基本的工作，精确到 2px；与设计师，产品经理的沟通和项目的参与做好的页面结构，页面重构和用户体验处理 hack，兼容、写出优美的代码格式针对服务器的优化、拥抱 HTML5。15、页面重构怎么操作？编写 CSS、让页面结构更合理化，提升用户体验，实现良好的页面效果和提升性能。16、为什么要初始化 CSS 样式。因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。当然，初始化样

12、式会对 SEO 有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。*最简单的初始化方法就是： * padding: 0; margin: 0; 。17、Doctype 作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?（1 ） 、 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。（2 ） 、严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。（3 ） 、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。（4 ） 、DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈

13、现。18、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？* （1） 、id 选择器（ # myid）（2 ） 、类选择器（.myclassname）（3 ） 、标签选择器（div, h1, p）（4 ） 、相邻选择器（h1 + p）（5 ） 、子选择器（ul id class tagimportant 比 内联优先级高19、如何居中 div，如何居中一个浮动元素?确定容器的宽高 宽 500 高 300 的层。设置层的外边距.div Width:500px ; height:300px;/高度可以不设Margin: -150px 0 0 -250px;position:relati

14、ve;相对定位background-color:pink;/方便看效果left:50%;top:50%;20、css 的基本语句构成是？ 选择器 属性 1:值 1;属性 2:值 2; 例如：divmargin-top:10px;border:1px solid #ccc21、前端页面由哪三层构成，分别是什么？作用是什么？网页分成三个层次，即：结构层、表示层、行为层。网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标

15、签表达了这样一种语义：“这是一个文本段。 ”网页的表示层（presentation layer） 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。22、你做的页面在哪些流览器测试过？IE 内核浏览器：360，傲游，搜狗，世界之窗，腾讯 TT。非 IE 内核浏览器：firefox opera safari chrome 。23、著名的前端框架都有哪些的呢？布局框架：bootstrap、easy UI 等。Js 动效框架：jqu

16、ery、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 设计师工作高端、名字大气、工资上档次，不过大多公司都称呼 UI 为美工，你也不要介意的，不管他们怎么称呼的，反正就是做网