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

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会火多久？（1）、因为H5的后台很硬，是谷歌（google）和苹果（Apple）两大巨头公司，谷歌和苹果大力倡导H5的发展，也是H5的忠实的支持者和实践者（IOS+Android系统占据手机市场92.36%），H5的产生主要目的也是干掉flash，因为flash是adobe公司的，adobe不是W3C 组织的成员之一，苹果和谷歌等万维网联盟也不希望在自己的产品中使用加载量过大的flash。

（2）、H5是2014年9月份W3C（万维网联盟，主要有苹果和谷歌公司）组织发布的。（3）、刷脸时代（这里专指网站用户体验更加美观的时代）+移动端时代（手机+平板），会促使H5会在未来的有更加美好的发展前景，只要有网站，H5就会很火，UI也就很火，H5的发展会让UI更加提高用户的满意度，H5的火爆时代，会促进UI更好发展。

(4)、微信的发展，O2O的促使H5更火。

在这里不得不谈微信，如果没有微信，或许今天我们不会这样来讨论H5，微信无意中养成了用户扫码的习惯，并通过公众号的内容生产及分发，以及微信本身已有的庞大的用户群体及社交属性，使基于网页的内容可以快速传播，真正带来了APP即浏览器的时代，取消了输入内容网址的麻烦。以微信为代表的超级社交APP，解决了网页内容浏览及分发的通路。H5或许会没落，但会迎来H6、H7…，只会变得越来越好，所以没必要担心H5会不会死，当下重在实践与积累，至少现在，Html5的影响力，会超出你我的想象，也就意味着H5的好闺蜜UI会一直火下去。

3、什么叫做响应式？

针对不用的屏幕显示不同的网页布局，比如说大屏幕手机、小屏幕手机、平板能够适应不同的屏幕来显示网站。

4、针对不同屏幕的响应式，UI设计师该做几套设计图？

只做一套，大多UI设计师会使用iPhone5的尺寸来做一套（640X1136）。那么这种可以适配响应式的各种屏幕的吗？这种在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是超文本标记语言，他是做网站时候用的一些文本标记标签，比如div、span等。（2）、css是层叠样式表，是做网站的时候给标签来美化网站的样式，比如说background （背景）、color（字体颜色）、height（高度）、width（宽度）等。

（3）、js=javascript是网站中写前后台交互效果、网页动画效果的一种开发语言，比如鼠标点击事件（click）、前后台数据请求（ajax）等。

7、什么是前端工程师？什么是后端工程师？

前端工程师就是指的做静态网页的工程师：

（1）、广义的前端分为三种：安卓工程师、ios工程师、web前端工程师。

（2）、狭义的前端指的是web前端工程师，web前端工程师指的是做静态的PC端和手机端静态网页的工程师。

8、什么是静态网页？什么叫做动态网页？

（1）、静态网页：没有数据交互的网页，没有数据库参与，没有服务器端数据的加载。比如静态网页就是只有html+css+JavaScript做成的网站。

（2）、动态网页：有后台数据参与的网页，网页中的数据是从数据库取的，需要有后台逻辑的支持。比如动态网页就是jsp页面（后台语言是java）、asp页面（后台语言是）。

9、前端语言有哪些？后端语言有哪些？

(1)、前端语言：HTML、css、javascript。

(2)、后端语言（服务器端语言）：php、java、。最近新出的node.js

10、做一个网站的团队都需要哪些人？

（1）、产品经理：设计这个产品，通常就是了解用户的网站需求，画原型图。

（2）、项目经理：通常是对整个产品有一个整理管理和负责，通常是会代码技术的人来构建整个网站的代码框架，以后网站实现的全面管理。

（3）、UI设计师，通过原型图画psd设计图的。

（4）、前端工程师，根据设计图来做静态网页，可能是原生app的IOS和安卓工程师，或者web端的web前端工程师。

（5）、后端工程师，通常就是做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。

（3）、知名的空元素（单标签）：

---

。

12、CSS的盒子模型？

（1）、两种，IE 盒子模型、标准W3C 盒子模型；IE 的content部分包含了border 和pading; （2）、盒模型：内容(content)、填充(padding)、边界(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比设置的大。

14、你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏（品）字布局如何设计?

* 首先划分成头部、body、脚部；

* 实现效果图是最基本的工作，精确到2px；与设计师，产品经理的沟通和项目的参与

做好的页面结构，页面重构和用户体验处理hack，兼容、写出优美的代码格式针对服务器的优化、拥抱HTML5。

15、页面重构怎么操作？

编写CSS、让页面结构更合理化，提升用户体验，实现良好的页面效果和提升性能。

16、为什么要初始化CSS样式。

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

*最简单的初始化方法就是：* {padding: 0; margin: 0;} 。

17、Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

（1）、 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。

（2）、严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。

（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。