前端工程师入门最全面试题-原创手记-慕课网

以下是我总结整理的，方便理解的一些前端最基础入门知识，仅供和大家进行交流学习，欢迎大家的指正：

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页面（后台语言是asp.net）。

9、前端语言有哪些？后端语言有哪些？
（1）前端语言：HTML、css、javascript。
（2）后端语言（服务器端语言）：php、java、asp.net。最近新出的node.js

10、做一个网站的团队都需要哪些人？
（1）产品经理：设计这个产品，通常就是了解用户的网站需求，画原型图。
（2）项目经理：通常是对整个产品有一个整理管理和负责，通常是会代码技术的人来构建整个网站的代码框架，以后网站实现的全面管理。
（3）UI设计师：通过原型图画psd设计图的。
（4）前端工程师：根据设计图来做静态网页，可能是原生app的IOS和安卓工程师，或者web端的web前端工程师。
（5）后端工程师：通常就是做java、asp.net、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）知名的空元素（单标签）： <br> <hr> <img> <input> <link> <meta> 。
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）<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。
（2）严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
（3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

18、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？

*   （1）id选择器（ # myid）
    （2）类选择器（.myclassname）
    （3）标签选择器（div, h1, p）
    （4）相邻选择器（h1 + p）
    （5）子选择器（ul < li）
    （6）后代选择器（li a）
    （7）通配符选择器（ * ）
    （8）属性选择器（a[rel = "external"]）
    （9）伪类选择器（a: hover, li: nth - child）
*   可继承： font-size font-family color, ul li  dl  dd  dt;
*   不可继承 ：border padding margin width height ;
*   优先级就近原则，样式定义最近者为准;
*   载入样式以最后载入的定位为准;

优先级为:
!important > 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的基本语句构成是？

选择器{属性1:值1;属性2:值2;„„} 例如：div{margin-top:10px;border:1px solid #ccc}

21、前端页面由哪三层构成，分别是什么？作用是什么？

网页分成三个层次，即：结构层、表示层、行为层。

网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”

网页的表示层（presentation layer）由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。

网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

22、你做的页面在哪些流览器测试过？

IE内核浏览器：360，傲游，搜狗，世界之窗，腾讯TT。
非IE内核浏览器：firefox opera safari chrome 。

23、著名的前端框架都有哪些的呢？

布局框架：bootstrap、easy UI等。
Js动效框架：jquery、angular.js等。

24、做一个网页设计师或者前端工程师，平常访问学习的IT网站都有哪些？

（1）W3C shool
（2）segmentFault
（3）csdn
（4）知乎论坛
（5）博客园

25、切图工作是UI设计师来做？还是前端工程师来做？

对于app工程师，也就是ios和Android工程师，大多由UI设计师来完成切图。
对于web前端工程师，也就是PC端、浏览端，大多有web前端工程师自己完成切图。

26、切图工程师、前端工程师、UI设计师、美工、网页设计师区别是什么？

（1）UI设计师俗称美工，不过UI设计师工作高端、名字大气、工资上档次，不过大多公司都称呼UI为美工，你也不要介意的，不管他们怎么称呼的，反正就是做网站设计图的就OK，别人怎么称呼不重要的了，只要你拿了高工资就是UI设计师了：

UI的主要任务是设计。了解用户的意图，分析网站配色，基本布局。绘制出一个网站效果图。 UI需要掌握的知识体系应该包括网页设计，UI（User Interface）用户界面人机交互、操作逻辑、界面美观的整体设计，UED（user experience design）用户体验设计--简单来说就是如何使得网站更加便于交互。

（2）前端开发：

美工在完成设计效果图之后，由前端开发人员将其制作成为适合浏览器查看的HTML页面。

由于现在移动互联网的大规模流行，加上各个不同厂商的浏览器的激烈竞争，前端开发的主要任务简单来说就是使网页在不同浏览器不同分辨率不同设备上提供相似或相近的浏览体验。

前端开发需要掌握的知识体系主要是兼容性问题的解决，流畅完美的交互体验。具体到技术细节上就是HTML，CSS，JavaScript，各大公司各种不同内核的浏览器、各种各样的JS库、简单的与后台交互的知识。

（3）后台开发：

前台开发完成之后，就是后台程序员的工作了，相比较前端来说，后台更像传统意义上的程序员。后台的工作简单来说就是网页文件对数据库的增删改查。

后台需要掌握的知识体系应该包括，编程基础，基本HTML语言，至少一门主流网页语言（C#，C++，JAVA，PHP等），数据库的操作等等。

（4）UI设计师和网页设计师有什么区别？

其实网页设计，分出来有两块，一个是UI设计，一个是web前端。

UI设计自然要懂的更多的是PS，FW，AI，CD等制图软件，还有一些比较优秀的网页设计理念，切图等相关知识。

web前端，需要的html+css+javascript，通过这三个东西把设计图转换成代码。这一步所实现的就是设计图的静态化，也就是变成了网页形式。

网页设计师，是个很泛的概念，不过一般指的会偏重UI设计。稍微关注过网页设计领域的公司，有点规模的，招人都会写得比较详细，例如招UI设计师，或者招web前端工程师。所以说学好技术才是前端开发人员的本钱，想要学习前端的朋友可以加这个裙，有人的地方才有江湖多人交流才能懂的更多，前端代码数字【257.014】这个是前面几位数字最后面的三位数是零零一，加起来就可以了。你找工作的时候，都找这些名称比较规范的，因为起码他们会区别职位的不同。一定要找的时候看清楚是UI设计师，不是找前端或者美工的，前端更多的写较高级的代码的，会比设计懂的知识点更多的，美工其实就是淘宝装修店铺或者说简单的PS照片的，就是会玩美图秀秀或者PS简单的绘图就可以的了，UI设计师才是咱们的IT行业“高大上”职位。

（5）UI设计师：
“UI”的本义是用户界面，是英文User和interface的缩写。UI设计师简称UID（User Interface Designer），指从事对软件的人机交互、操作逻辑、界面美观的整体设计工作的人。

UI设计师的涉及范围包括商用平面设计、高级网页设计、移动应用界面设计及部分包装设计，是目前中国信息产业中最为抢手的人才之一。

UI设计师的特点是：会一些简单的前端知识代码，做手机端和PC端的网站设计图。

27、UI设计师的工作内容是什么？
（1）负责软件界面的美术设计、创意工作和制作工作；
（2）根据各种相关软件的用户群，提出构思新颖、有高度吸引力的创意设计；
（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 Flash）二维动画软件
（6）Axure（Axure RP）快速原型设计工具
（7）墨刀（MockingBot）移动端原型工具
（8）Fireworks网页作图软件

29、什么时网页三剑客？
网页三剑客，是一套强大的网页编辑工具，最初是由Macromedia公司开发出来的。由Dreamweaver，Fireworks，Flash三个软件组成，俗称网页三剑客。

Dreamweaver 是一个“所见即所得”的可视化网站开发工具，主要用于动态网页和静态网页的开发；

Fireworks主要是用于对网页上常用的jpg、gif的制作和处理，也可用于制作网页布局；

Flash主要用来制作动画，现推出Flash平台，可预见有极好的前景。

30、怎么调试网页代码？怎么查看网页源代码？
（1）按键盘上的F12，打开开发者调试工具；
（2）鼠标右键查看页面源代码。