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.docsj.com/doc/ae3864711.html,)。
5、前端语言有哪些?后端语言有哪些?
(1)、前端语言:HTML、css、javascript。
(2)、后端语言(服务器端语言):php、java、https://www.docsj.com/doc/ae3864711.html,。最近新出的node.js
6、做一个网站的团队都需要哪些人?
(1)、产品经理:设计这个产品,通常就是了解用户的网站需求,画原型图。
(2)、项目经理:通常是对整个产品有一个整理管理和负责,通常是会代码技术的人来构建整个网站的代码框架,以后网站实现的全面管理。
(3)、UI设计师,通过原型图画psd设计图的。
(4)、前端工程师,根据设计图来做静态网页,可能是原生app的IOS和安卓工程师,或者web 端的web前端工程师。
(5)、后端工程师,通常就是做java、https://www.docsj.com/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是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言。最主要的不同: (1)XHTML元素必须被正确地嵌套 (2)XHTML元素必须被关闭 (3)XHTML标签名必须用小写字母 (4)XHTML文档必须拥有根元素 2.什么是语义化的HTML html5的语义化是指用正确的标签包含正确的容,比如nav标签就应该包含导航条容 (1)直观的认识标签对于搜索引擎的抓取有好处,用正确的标签做正确的事情! (2)html语义化就是让页面的容结构化,便于对浏览器、搜索引擎解析 (3)在没有CCS样式情况下也以一种文档格式显示,并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下和各个关键字的权重,利于SEO。 (4)使阅读源代码的人更容易将分块,便于阅读维护理解。 写一段语义的html代码(HTML5中新增加的很多标签如:
1、常用那几种浏览器测试?有哪些内核(Layout Engine)? 答: (Q1) 浏览器:IE,Chrome,FireFox,Safari,Opera。 (Q2) 内核:Trident,Gecko,Presto,Webkit。 2、说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下)答: (Q1) 行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效。 块级元素:各占据一行,垂直方向排列。从新行开始结束接着一个断行。 (Q2) 兼容性:display:inline-block;*display:inline;*zoom:1; 3、清除浮动有哪些方式?比较好的方式是哪一种? 答: (Q1) (1)父级div定义height。 (2)结尾处加空div标签clear:both。 (3)父级div定义伪类:after和zoom。 (4)父级div定义overflow:hidden。 (5)父级div定义overflow:auto。 (6)父级div也浮动,需要定义宽度。 (7)父级div定义display:table。 (8)结尾处加br标签clear:both。 (Q2) 比较好的是第3种方式,好多网站都这么用。 4、box-sizing常用的属性有哪些?分别有什么作用? 答: (Q1)box-sizing: content-box|border-box|inherit; (Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度 之外绘制元素的内边距和边框(元素默认效果)。 border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内 进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的 宽度和高度。 5、Doctype作用?标准模式与兼容模式各有什么区别? 答: (Q1) 告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不 存在或格式不正确会导致文档以兼容模式呈现。 (Q2) 标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防 止站点无法工作。 6、HTML5 为什么只需要写?
1. 要动态改变层中内容可以使用的方法有(AB ) a)innerHTML b)innerText c)通过设置层的隐藏和显示来实现 d)通过设置层的样式属性的display属性 2. 在javascript里,下列选项中不属于数组方法的是(B); a)sort() b)length() c)concat() d)reverse() 3 、var emp = new Array(3); for(var i in emp) 以下答案中能与for循环代码互换的是: (选择一项)。(D ) A for(var i =0; i c)getElementsByName() d)bgColor() 6. 、display属性值的常用取值不包括(C ) a)inline b)block c)hidden d)none 7. 以下有关pixelTop属性与top属性的说法正确的是。(D ) a)都是Location对象的属性 b)使用时返回值都是字符串 c)都是返回以像素为单位的数值 d)以上都不对 8. 使用open方法打开具有浏览器工具条,地址栏,菜单栏的窗 口,下列选项正确的是__D__ a)open("x.html","HI","toolbas=1,scrollbars=1,status=1"); b)open("HI","scrollbars=1,location=1,status=1"); c)open("x.html","status=yes,menubar=1,location=1"); d)open("x.html","HI","toolbas=yes,menubar=1,location=1"); 9. 、javascript中表达式parseInt(“X8X8”)+paseFloat(‘8’)的结果是什么?( C) a)8+8 b)88 c)16 d)“8”+’8 10. 关于setTimeout(“check”,10)中说法正确的是( D) 这篇文章将分为三部分css和html为一部分,js、jQuery为一部分,vue与性能优化为一部分,今天会先整理css与html 1,弹性盒布局 父级设置display:flex将对象作为弹性伸缩盒显示 采用Flex布局的元素,被称为Flex容器(flex container),简称“容器”。其所有子元素自动成为容器成员,成为Flex项目(Flex item),简称“项目”。 容器默认生成两根主轴,水平方向主轴(main axis)和垂直方向交叉轴(cross axis),默认项目按主轴排列。 设置在容器上的属性有6种 分别为 flex-direction:决定主轴的方向(即项目的排列方向) flex-wrap:定义换行情况 flex-flow:flex-direction和flex-wrap的简写,默认row nowrap justify-content:定义项目在主轴上的对齐方式。 align-item:定义在交叉轴上的对齐方式 align-content:定义多根轴线的对齐方式 详细属性值请参阅文档 2,html5新标签与新功能 新标签: header,footer,article,aside,nav,section,time,progress, ruby,mark.... 新功能: vidio,audio,canvas,拖放,离线应用,web存储(sessionStorage,localStorage,sessionStorage 方法针对一个session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除,localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用),历史状态管理,地理位置,新增input类型(color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week),新增表单元素,WebSocket 3、css3的新特性 属性选择器:[attribute],[attribute=value],[attribute~=value]... 伪类选择器::first-letter ,:first-line,:first-child.... 伪元素选择器::before,:after border:border-image,border-radius,box-shadow 背景:background-size,background-origin,background-clip,background-image 渐变:线性渐变(Linear Gradients)径向渐变(Radial Gradients) 1. 如何显示/隐藏一个DOM元素? 更改元素的css style,设为display: none。此外还可以将visibility设为hidden,透明度设为0,或长、宽设为0。 2. 一个定宽网页在浏览器(IE6,IE7,Firefox,IE5)中横向居中对齐的布局, 请写出主要的HTML标签及CSS。 1. 2. 3.前端最新面试题
WEB前端面笔试题总结
15. 3. CSS中margin和padding的区别 margin是外边距,属于元素之外,相邻元素的margin可以融合。 padding是内边距,在元素之内,相邻元素的padding不可融合。 4. JavaScript中如何检测一个变量是一个String类型?请写出函数实现 function(obj) { returntypeof(obj) == ”string”; } 5. 网页中实现一个计算当年还剩多少时间的倒数计时程序,要求网页上实时动态 显示“××年还剩××天××时××分××秒” 这个看我论坛右上角的就知道了… 6. 如何控制网页在网络传输过程中的数据量 题目貌似有问题,应该是减少数据量吧。 最显著的方法是启用GZIP压缩。此外保持好的编码习惯,避免重复和css、 JavaScript代码,多余的HTML标签和属性。 7. 补充代码,是鼠标单击后Button1到Button2的后面
1.行内元素和块级元素有哪些?有什么区别? 块级: