web前端面试题总结
1.知道JavaScript中的原型是什么吗?什么是原型链?能手写一个原型链继承的例子吗?
答:
(1)在javascript中每个对象都保持着一块隐藏的状态——一个对另一个对象的引用也被称为原型。
(2)原型链的定义:Javascript对象上都有一个内部指针【prototype】,指向它的原型对象,而原型对象的内部指针【【prototype】】也指向它的原型对象,直到原型对象为null,这样形成的链条称为原型链。
也就是说,由于原型对象也有一个proto指针,又指向了另外一个原型,一个接一个,就形成了原型链。
(3)
1 function Name(){
2 this.name=function(){
3 console.log("killua")
4 }
5 }
6 function Firstname(){
7 this.firstname=function(){
8 console.log("L")
9 }
10 }
11 Name.prototype = new Firstname();
12 var he = new Name();
13 console.log(he.name); //"killua"
14 console.log(he.firstname); //"L"
原型链继承的例子来自:
作者:晓綾
链接:http://www.jianshu.com/p/6a0ca6199550
來源:简书
2.知道什么是Webpack吗?说说你理解的Webpack?
答:
- webpack是一款用户打包前端模块的工具。主要是用来打包在浏览器端使用的javascript的,同时也能转换、捆绑、打包其他的静态资源。
- webpack需要编写一个config文件,然后根据这个文件来执行需要的打包功能。
- webpack可以看作是一个模块打包机:它分析你的不同的项目结构,找到javascript模块以及其他的一些浏览器不能直接运行的拓展语言,并将其打包为合适的格式以供浏览器使用。模块化可以让我们把复杂的程序细化为小的文件。
3.说一下你知道的能影响页面布局的CSS属性?
答:
CSS常用属性:
- 字体属性:(font)
- 大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD
- 样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)
- 行高 line-height: normal;(正常) 单位:PX、PD、EM
- 粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)
- 变体 font-variant: small-caps;(小型大写字母) normal;(正常)
- 大小写 text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)
- 修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
- 常用字体: (font-family)
"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana - 背景属性: (background)
- 色彩background-color: #FFFFFF;
- 图片background-image: url();
- 重复background-repeat: no-repeat;
- 滚动background-attachment: fixed;(固定) scroll;(滚动)
- 位置background-position: left(水平) top(垂直);
- 简写方法 background:#000 url(..) repeat fixed left top;
- 区块属性: (Block)
- 字间距letter-spacing: normal; 数值
- 对齐text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)
- 缩进text-indent: 数值px;
- 垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;
- 词间距word-spacing: normal; 数值
- 空格white-space: pre;(保留) nowrap;(不换行)
- 显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题)
- 方框属性: (Box)
width:; height:; float:; clear:both; margin:; padding:; 顺序:上右下左 - 边框属性: (Border)
border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
border-width:; 边框宽度
border-color:#; - 简写方法border:width style color;
- 列表属性: (List-style)
- 类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;
- 位置list-style-position: outside;(外) inside;
- 图像list-style-image: url(..);
- 定位属性: (Position)
Position: absolute; relative; static;
visibility: inherit; visible; hidden;
overflow: visible; hidden; scroll; auto;
clip: rect(12px,auto,12px,auto) (裁切)
4.说说你对CSS盒模型的理解?知道box-sizing是什么吗?
答:
(1)标准的CSS和子模型是由margin(边界)、border(边框)、padding(空白)和content(内容)几个属性组成。
- margin(边界):外边距,用来设置内容与内容之间的距离。
- border(边框):可以设置内容边线框的粗细、颜色和样式等。
- padding(空白):也称页边距或补白,用来设置内容和边框之间的间距。
-
content(内容):盒子模型中必须的部分,可以是文字、图片等元素。
web前端面试题总结
(2)box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素,默认值是content-box,设置或检索对象的盒模型组成模式,对应的脚本脚本特性为boxsizing。
5.说一下CSS属性中display中的block、inline和inline-block概念和区别。
block-level elements(块级元素)
block元素通常为独立一块,会单独换一行。
inline elements(内联元素)
inline元素前后不会产生换行,一系列inline元素都在一行内显示直到该行排满。
- block元素包括block元素和inline元素,inline元素只能包括inline元素。
inline-block
简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现,之后的内联对象会被排在同一行内。
6.如果要你写一个百度搜索的首页,你觉得你会用到哪些HTML标签?
<!DOCTYPE HTML>
<html></html>
<head></head>
<title></title>
<body></body>
<p></p>
<font></font>
<span></span>
<B></B>
<I></I>
7.说下你对前端的看法?
Web前端开发技术包括三个要素:HTML、CSS和JavaScript,但随着RIA的流行和普及,Flash/Flex、Silverlight、XML和服务器端语言也是前端开发工程师应该掌握的。Web前端开发工程师既要与上游的交互设计师、视觉设计师和产品经理沟通,又要与下游的服务器端工程师沟通,需要掌握的技能非常多。这就从知识的广度上对Web前端开发工程师提出了要求。如果要精于前端开发这一行,也许要先精十行。然而,全才总是少有的。所以,对于不太重要的知识,我们只需要"通"即可。但"通"到什么程度才算够用呢?对于很多初级前端开发工程师来说,这个问题是非常令人迷惑的。
Web发展的很快,甚至可以说这些技术几乎每天都在变化!如果没有快速学习能力,就跟不上Web发展的步伐。前端工程师必须不断提升自己,不断学习新技术、新模式;仅仅依靠今天的知识无法适应未来。Web的明天与今天必将有天壤之别,而前端工程师的工作就是要搞清楚如何通过自己的Web应用程序来体现这种翻天覆地的变化。前端开发的入门门槛其实非常低,与服务器端语言先慢后快的学习曲线相比,前端开发的学习曲线是先快后慢。所以,对于从事IT工作的人来说,前端开发是个不错的切入点。也正因为如此,前端开发领域有很多自学成"才"的同行,但大多数人都停留在会用的阶段,因为后面的学习曲线越来越陡峭,每前进一步都很难。
另一方面,正如前面所说,前端开发是个非常新的职业,对一些规范和最佳实践的研究都处于探索阶段。总有新的灵感和技术不时闪现出来,例如CSS sprite、悬浮定位、负边距布局、栅格布局等;各种JavaScript框架层出不穷,为整个前端开发领域注入了巨大的活力;浏览器大战也越来越白热化,跨浏览器兼容方案依然是五花八门。为了满足"高可维护性"的需要,需要更深入、更系统地去掌握前端知识,这样才可能创建一个好的前端架构,保证代码的质量。
前端工程师,也叫Web前端开发工程师。他是随着web发展,细分出来的行业。Web前端开发技术主要包括三个要素:HTML、CSS和JavaScript!HTML甚至不是一门语言,仅仅是简单的标记语言!CSS只是无类型的样式修饰语言。当然可以勉强算作弱类型语言。Javascript的基础部分相对来说不难,入手还算快。
前端开发的入门门槛很低,与服务器端语言先慢后快的学习曲线相比,前端开发的学习曲线是先快后慢。也正因为如此,前端开发领域有很多自学成"才"的同行,但大多数人都停留在会用的阶段,因为后面的学习曲线越来越陡峭,每前进一步都很难。人们常说:不想当裁缝的司机,不是个好厨师。如果单纯只是学习前端编程语言、而不懂后端编程语言(PHP、ASP.NET,JSP、Python),也不能算作是优秀的前端工程师。在成为一个优秀的前端工程师的道路上,充满了汗水和辛劳。
8.了解Node.js吗?Node.js相比PHP有哪些优势和劣势?
优势:
- 处理高并发场景性能高。
- 函数式编程非常适合写异步回调连。
劣势: - 大量匿名函数使异常栈变得不好看。
- 无法以request为单位catch异常。