前端面试题及答案

2018前端面试题及答案(一)

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; //转化为行元素

}

}

2018前端面试题及答案(二)

1、div是什么?在div出现之前做网站用什么布局?

div是网站布局的盒子标签，div出现是table布局，因为table布局嵌套很多，网站加载慢，布局层级不清晰。

2、html是什么?css是什么?js是什么?

(1)、html是超文本标记语言，他是做网站时候用的一些文本标记标签，比如div、span等。

(2)、css是层叠样式表，是做网站的时候给标签来美化网站的样式，比如说background(背景)、color(字体颜色)、height(高度)、width(宽度)等。

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

3、什么是前端工程师?什么是后端工程师?

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

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

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

4、什么是静态网页?什么叫做动态网页?

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

(2)、动态网页：有后台数据参与的网页，网页中的数据是从数据库取的，需要有后台逻辑的支持。比如动态网页就是jsp页面(后台语言是java)、asp页面(后台语言是https://www.wendangku.net/doc/ae3864711.html,)。

5、前端语言有哪些?后端语言有哪些?

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

(2)、后端语言(服务器端语言)：php、java、https://www.wendangku.net/doc/ae3864711.html,。最近新出的node.js

6、做一个网站的团队都需要哪些人?

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

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

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

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

(5)、后端工程师，通常就是做java、https://www.wendangku.net/doc/ae3864711.html,、php的工程师来写后端逻辑的工程师。

2018前端面试题及答案(三)

1、行内元素有哪些?块级元素有哪些?空(void)元素有那些?

(1)、CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display 值，比如div默认display属性值为“block”，成为“块级”元素;span默认display属性值为“inline”，是“行内”元素。

(2)、行内元素有：a b span img input select strong(强调的语气)

块级元素有：div ulol li dl dtdd h1 h2 h3 h4…p。

(3)、知名的空元素(单标签)：

2、CSS的盒子模型?

(1)、两种，IE 盒子模型、标准W3C 盒子模型;IE 的content部分包含了border 和pading;

(2)、盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)。

3、浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些?

* IE浏览器的内核Trident、Mozilla(火狐)的Gecko、google(谷歌)的WebKit、Opera内核Presto;

* png24为的图片在iE6浏览器上出现背景，解决方案是做成PNG8.

* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

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

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

* 实现效果图是最基本的工作，精确到2px;与设计师，产品经理的沟通和项目的参与做好的页面结构，页面重构和用户体验处理hack，兼容、写出优美的代码格式针对服务器的优化、拥抱HTML5。

5、页面重构怎么操作?

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

前端面试题大全(html篇)

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言。最主要的不同： (1)XHTML元素必须被正确地嵌套 (2)XHTML元素必须被关闭 (3)XHTML标签名必须用小写字母 (4)XHTML文档必须拥有根元素 2.什么是语义化的HTML html5的语义化是指用正确的标签包含正确的容，比如nav标签就应该包含导航条容 (1)直观的认识标签对于搜索引擎的抓取有好处，用正确的标签做正确的事情！ (2)html语义化就是让页面的容结构化，便于对浏览器、搜索引擎解析 (3)在没有CCS样式情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下和各个关键字的权重，利于SEO。 (4)使阅读源代码的人更容易将分块，便于阅读维护理解。 写一段语义的html代码(HTML5中新增加的很多标签如：