一、css
css不是前端面试的重头戏,却是前端根底知识必问的,也是前端入门的最低门槛。假如你连根底的css都一问三不知,面试官只会微笑的对你说一句‘回去等通知吧’。
postion
杀了个回马枪,仍是说说position:sticky吧
flex
布局的传统解决方案,根据盒状模型,依赖display特点+position特点+float特点。它关于那些特殊布局十分不方便,比如,笔直居中就不简略完成。但flex两行代码就能够完成
Flex布局语法教程
30分钟彻底弄懂flex布局
页面布局
CSS完成水平笔直居中的1010种方法
CSS常见布局方法
各种常见布局完成+知名网站实例剖析
css盒模型
在最初接触CSS的时分,关于CSS盒模型的不了解,撞了很屡次的南墙呀。盒模型是网页布局的根底,它制定了元素如安在页面中显现,假如足够地把握,那使用CSS布局那将会简略得多。
css盒模型全面解析
h5适配各种设备
从淘宝和网易的font-size考虑移动端怎样使用rem?
细说移动端经典的REM布局与新秀VW布局
BFC
BFC是块级格式化上下文,是一个独立的烘托区域,让处于BFC内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响
什么是BFC?看这一篇就够了
CSS3动画
在CSS3呈现之前,动画都是通过JavaScript动态的改变元素的样式特点来完成了,这种方法尽管能够完成动画,但是在功能上存在一些问题。CSS3的呈现,让动画变得愈加简略,功能也愈加好。
css3动画详解
前端面试题——怎么画一条0.5px的线
CSS预处理器
less和sass咱们必定都用过,今天咱们从另一个角度来谈谈他们
2019年,你是否能够抛弃CSS预处理器?
移动端的问题
移动端web项目越来越多,设计师关于UI的要求也越来越高,比如1px的边框。在高清屏下,移动端的1px会很粗
移动端1px解决方案
在写h5页面时,页面翻滚一定是让开发者头痛的一部分。特别是当页面布局嵌套较深,子元素各种脱离文档流,咱们在获取元素距离值、控制翻滚条时各种犯错。分明代码没有问题,但展现的效果就是和想象的不一样。此刻是不是觉得css很诡异。其实不然,css也是有自己逻辑的,只是你了解的还不够深化,今天带咱们全面解析页面翻滚。
页面滑动和定位全面解析
css篇就到这儿结束了,接下来是前端面试C位的javascript
二、javascript
javascript是前端面试中当之无愧的C位,也是前端程序员终其一生需求探求的言语。js初窥觉得简略易懂,只需深化之后才干体会到它的奥妙以及美丽,让咱们一起由浅入深玩转js。
数据类型
javascript的数据类型、数据检查、深浅复制,是js最根底的内容了。月薪4k的前端开发都知道的经典面试题“JavaScript有几种类型”,但假如让你手写一个深复制,你能写出来吗
JavaScript根底心法——深浅复制
面试题之怎么完成一个深复制
效果域
了解JavaScript中的履行上下文和履行栈
破解前端面试(80%应聘者不及格系列):从闭包说起
原型
JavaScript深化之创立对象的多种方法以及优缺点
JavaScript深化之从原型到原型链
重新认识结构函数、原型和原型链
一文吃透一切JS原型相关知识点
继承
彻底弄懂JS原型与继承
JavaScript深化之继承的多种方法和优缺点
new、this
JavaScript深化之new的模仿完成
面试官问:JS的this指向
callapplybind
JavaScript根底心法——callapplybind
JavaScript深化之call和apply的模仿完成
JavaScript深化之bind的模仿完成
eventloop
这一次,彻底弄懂JavaScript履行机制
一次弄懂EventLoop(彻底解决此类面试问题)
从eventloop规范探求javaScript异步及浏览器更新烘托时机
浏览器与Node的事情循环(EventLoop)有何差异?
promise
promise平常作业中用到的比较多,一般现在的项目只需你恳求接口都会用到promise。它也是平常面试中的高频考点,尽管平常用到的多,但大部分人面试时遇到原理性的问题仍是一点懵逼。
不管是平常开发仍是面试,promise都是常客。所以引荐的文章比较多,咱们一定要耐性看完,这一次彻底弄懂它。
Promise不会??看这儿!!!史上最通俗易懂的Promise!!!
当async/await遇上forEach
英文好的同学能够看下这篇文档
Promises/A+
浏览器缓存机制
浏览器缓存机制全解
浏览器缓存原理?—送你满分答案
浏览器烘托原理
浏览器烘托原理(功能优化之怎么减少重排和重绘)
浏览器地址栏里输入URL后的全过程
前端功能优化之重排和重绘
函数式编程
JavaScript函数式编程到底是个啥
函数式编程全书
简明JavaScript函数式编程——入门篇
HTML5WebWorker
浅谈HTML5WebWorker
JavaScript功能利器——WebWorker
ServiceWorker
借助ServiceWorker和cacheStorage缓存及离线开发
JavaScript是怎么作业的:ServiceWorker的生命周期及使用场景
面试官:请你完成一个PWA我:
数据处理
解锁多种JavaScript数组去重姿势
20道JS原理题助你面试一臂之力!
一个合格的中级前端工程师需求把握的28个JavaScript技巧
es6
ES6、ES7、ES8特性一锅炖(ES6、ES7、ES8学习指南)
近一万字的ES6语法知识点弥补-掘金
我知道内容有些多,咱们能够先收藏,但一定要去看。当你把2020前端面试必会知识点系列专题的文章都看完并且了解了,今后就没有你过不了的前端面试。资源都帮你整理好了,还不学就有些说不过去了。
不想每次面试都像菜市场上廉价的白菜一样让人选择,那就让自己强壮起来。奋斗啊年轻人!!!,前端面试基础知识汇总,1、html5为什么只需求写?
答:html5不是根据sgml(规范通用标记言语),不需求对dtd文件进行引证,可是需求doctype来规范浏览器的行为,
不然浏览器将开启奇怪模式,而html4.01根据sgml,需求引进dtd,才干奉告浏览器文档运用的文档类型
2、行内元素有哪些?块级元素有哪些?空(void)元素有哪些?
行内元素有:abspanimginputselectstrong(强调的语气)
块级元素有:divulollidldtddh1h2h3h4…p
闻名的空元素:
鲜为人知的是:
3、页面导入款式时,运用link和@import有什么差异?
两者都是外部引证CSS的办法,可是存在必定的差异:
差异1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import归于CSS领域,只能加载CSS。
差异2:link引证CSS时,在页面载入时同时加载;@import需求页面网页彻底载入今后加载。
差异3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版别的浏览器不支撑。
差异4:link支撑运用Javascript操控DOM去改动款式;而@import不支撑。
补充:@import最优写法
@import的写法一般有下列几种:
@import‘style.css’//WindowsIE4/NS4,MacOSXIE5,MacintoshIE4/IE5/NS4不辨认
@import“style.css”//WindowsIE4/NS4,MacintoshIE4/NS4不辨认
@importurl(style.css)//WindowsNS4,MacintoshNS4不辨认
@importurl(‘style.css’)//WindowsNS4,MacOSXIE5,MacintoshIE4/IE5/NS4不辨认
@importurl(“style.css”)//WindowsNS4,MacintoshNS4不辨认
由上分析知道,@importurl(style.css)和@importurl(“style.css”)是最优的选择,兼容的浏览器最多。
从字节优化的视点来看@importurl(style.css)最值得引荐。
4、常见的浏览器内核有哪些?
运用Trident内核的浏览器:IE、Maxthon、TT、TheWorld等;
运用Gecko内核的浏览器:Netcape6及以上版别、FireFox、MozillaSuite/SeaMonkey;
运用Presto内核的浏览器:Opera7及以上版别;
运用Webkit内核的浏览器:Safari、Chrome。
5、html5有哪些新特性?移除了哪些元素?怎样处理HTML5新标签的浏览器兼容性问题?怎样区分html和html5?
新增的元素有绘画canvas,用于媒介回放的video和audio元素,本地离线存储localStorage长时刻存储数据,浏览器关闭后数据不丢掉,而sessionStorage的数据在浏览器关闭后主动删去,此外,还新增了以下的几大类元素。
内容元素,article、footer、header、nav、section。
表单控件,calendar、date、time、email、url、search。
控件元素,Webworker,Websockt,Geolocation。
移出的元素有下列这些:
显现层元素:basefont,big,center,font,s,strike,tt,u。
性能较差元素:frame,frameset,noframes。
怎样处理HTML5新标签的浏览器兼容问题?怎样区分HTML和HTML5?
处理兼容问题有两种办法:
1.IE8/IE7/IE6支撑经过document.办法发生的标签,运用这一特性让这些浏览器支撑HTML5新标签。
2.运用是html5shim结构
别的,DOCTYPE声明的办法是区分HTML和HTML5标志的一个重要要素,此外,还可以根据新增的结构、功用元素来加以区分。
6、iframe有哪些优缺陷?
优点:
1.用来完结长连接,在Websocket不可用的时分作为一种代替,最开始由google创造。Comet:根据HTTP长连接的”服务器推”技能
2.跨域通讯。JavaScript跨域总结与解决办法,类似的还有浏览器多页面通讯,比方音乐播映器,用户假如打开了多个tab页,应该只要一个在播映。
3.历史记录办理,解决ajax化网站呼应浏览器行进后退按钮的计划,在html5的historyapi不可用时作为一种代替。
4.纯前端的utf8和gbk编码互转。比方在utf8页面需求生成一个gbk的encodeURIComponent字符串,可以经过页面加载一个gbk的iframe,然后主页面与子页面通讯的办法完结转换,这样就不用在页面上插入一个十分巨大的编码映射表文件了
缺陷:
1、在网页中运用结构结构最大的弊端是搜索引擎的”蜘蛛”程序无法解读这种页面。当”蜘蛛”程序遇到由数个结构组成的网页时,它们只看到结构而无法找到链接,因此它们会认为该网站是个死站点,而且很快回身离去。对一个网站来说这无异于一场灾祸。
假如你想销售产品,你需求客户;如想得到客户,你首要要让人们拜访你的网站,而要做到这一点,你就非求助于搜索引擎不可。你花费了大量的时刻、精力和金钱开设了一家网上商店,却又故意不让搜索引擎检索你,这就好象开家零售商店,却将窗户全部漆成黑色,而且还不挂任何招牌一样。
2、结构结构有时会让人感到迷惑,特别是在几个结构中都呈现上下、左右滚动条的时分。这些滚动条除了会抢占现已十分有限的页面空间外,还会分散拜访者的留意力。拜访者遇到这种网站往往会马上回身脱离。他们会想,已然你的主页如此紊乱,那么网站的其他部分也许更不值得浏览。
3、链接导航问题。运用结构结构时,你有必要确保正确设置所有的导航链接,如不然,会给拜访者带来很大的费事。比方被链接的页面呈现在导航结构内,这种状况下拜访者便被陷住了,因为此时他没有其他当地可去。
7、label的作用是什么?是怎样运用的?
Label中有两个特点是十分有用的,一个是FOR、别的一个便是ACCESSKEY了。
FOR特点
功用:表明Label标签要绑定的HTML元素,你点击这个标签的时分,所绑定的元素将获取焦点。
用法:名字
ACCESSKEY特点:
功用:表明拜访Label标签所绑定的元素的热键,当您按下热键,所绑定的元素将获取焦点。
用法:名字
局限性:accessKey特点所设置的快捷键不能与浏览器的快捷键冲突,不然将优先激活浏览器的快捷键。
8、完结不运用border,画出1px高的线,在不同浏览器下的Quirksmode和CSSCompat模式下都能保持共同的作用?
9、网页验证码是干嘛的?是为了解决什么安全问题?
网页验证码介绍:”验证码”的英文表明为CAPTCHA(CompletelyAutomatedPublicTuringtesttotellComputersandHumansApart),翻译过来便是”全主动区分核算机和人类的图灵测验”,望文生义,它是用来区分核算机和人类的。在CAPTCHA测验中,作为服务器的核算机会主动生成一个问题由用户来答复。这个问题可以由核算机生成并评判,可是有必要只要人类才干答复。由于核算机无法答复CAPTCHA的问题,所以答复出问题的用户就可以被认为是人类。CAPTCHA是由核算机来考人类,而不是规范图灵测验中那样由人类来考核算机,因此人们有时称CAPTCHA是一种反向图灵测验。
验证码的原理:服务器端随机生成验证码字符串,保存在内存中,并写入图片,发送给浏览器端显现,浏览器端输入验证码图片上字符,然后提交服务器端,提交的字符和服务器端保存的该字符比较是否共同,共同就继续,不然返回提示。攻击者编写的robot程序,很难辨认验证码字符,顺利的完结主动注册,登录;而用户可以辨认填写,所以这就完结了阻挠攻击的作用。而图片的字符辨认,便是看图片上的干扰强度了。就实际的作用来说,验证码只是增加攻击者的难度,而不可能彻底的防止。
10、介绍一下规范的css的盒子模型?与低版别IE的盒子模型有什么不同?
盒子模型有两种,别离是ie盒子模型和规范w3c盒子模型
W3C盒子模型的范围包括margin、border、padding、content,而且content部分不包括其他部分
IE盒子模型的范围也包括margin、border、padding、content,和规范W3C盒子模型不同的是:IE盒子模型的content部分包括了border和pading
11、怎样居中div,怎样居中一个起浮元素?怎样让肯定定位的div居中?
a.margin:xpxauto;
b.确定容器的宽高,这儿宽度是有必要的,高度可以不设,设置外层的上外边距和左外边距别离是宽高的一半。
完结居中关键在于margin设置与position:relative.
.div{
width:500px;
height:300px;
margin:-150px00-250px;
position:relative;
left:50%;
top:50%;
}
c.position:absolute;
top:50%;
left:50%;只能把div定位在以红色圈为起点的方位,加上margin:-100px0px0px-100
12、display有哪些值?阐明他们的作用?
block:块目标的默认值。用该值为目标之后增加新行
none:隐藏目标。与visibility特点的hidden值不同,其不为被隐藏的目标保存其物理空间
inline:内联目标的默认值。用该值将从目标中删去行
compact:分配目标为块目标或根据内容之上的内联目标
marker:指定内容在容器目标之前或之后。要运用此参数,目标有必要和:after及:before伪元素一起运用
inline-table:将表格显现为无前后换行的内联目标或内联容器
list-item:将块目标指定为列表项目。并可以增加可选项目标志
run-in:分配目标为块目标或根据内容之上的内联目标
table:将目标作为块元素级的表格显现
13、position的值relative和absolute的定位原点是什么?
Absolute,CSS中的写法是:position:absolute;他的意思是肯定定位,他是参照浏览器的左上角,合作TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。假如设定TRBL而且父级没有设定position特点,那么当时的absolute则以浏览器左上角为原始点进行定位,方位将由TRBL决定。
Relative,CSS中的写法是:position:relative;他的意思是肯定相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,合作TRBL进行定位,当父级内有padding等CSS特点时,当时级的原始点则参照父级内容区的原始点进行定位。
14、display设置为inline-block时,li与li之间有看不见的空白距离是什么原因引起的?有什么解决办法?
行框的摆放会受到中心空白(回车空格等等)的影响,这些空白也会被应用款式,占有空间,所以会有距离
解决:设置ul的font-size为0,缺陷是有必要从头在li中去设置字体大小
15、请解说下为什么会呈现起浮和什么时分需求铲除起浮?铲除起浮的办法?
a.增加新的元素、应用clear:both;
b.父级定义overflow:auto(留意:是父级div也便是这儿的div.outer)一个对搜索引擎优化比较友好,另个hidden对搜索引擎优化不是太友好
在IE6中还需求触发hasLayout,例如zoom:1;
c.据说是最巨大上的办法:after
办法:(留意:作用于起浮元素的父亲)IE6-7不支撑:after,
运用zoom:1触发hasLayout
{zoom:1;}/*==forIE6/7Maxthon2==*/
:after{clear:both;content:’.’;display:block;width:0;height:0;visibility:hidden;}
d.运用br标签和其自身的html特点,
clear=”all|left|right|one”特点
e.父元素也设置起浮
f.父元素设置display:table盒模型特点现已改动,由此造成的一系列问题,得不偿失,不引荐运用
16、在网页中的应该运用奇数还是偶数的字体?为什么呢?
偶数字号相对更容易和Web规划的其他部分构成比例关系
运用奇数号字体欠好的当地是,文本阶段无法对齐
17、margin和padding别离适合什么场景运用?
何时应当运用margin:
(1)需求在border外侧增加空白时,
(2)空白处不需求有背景(色)时,
(3)上下相连的两个盒子之间的空白需求相互抵消时,比方15px+20px的margin,将得到20px的空白(留意当地见第三点)。
何时应当运用padding
(1)需求在border内侧增加空白时(往往是文字与边框距离的设置),
(2)空白处需求背景(色)时,
(3)上下相连的两个盒子之间的空白希望等于两者之和时,比方15px+20px的padding,将得到35px的空白。
margin运用时应该留意的当地
margin在垂直方向上相邻的值相同时会发生叠加,水平方向上相邻的值会相加。margin取负值时,在垂直方向上,两个元素的鸿沟仍然会堆叠。可是,此时一个为正值,一个为负值,并不是取其中较大的值,而是用正鸿沟减去负鸿沟的肯定值,也便是说,把正的鸿沟值和负的鸿沟值相加。
18、元素竖向的百分比设定是相对于容器的高度吗?
答:相对于父容器的宽度
19、什么是呼应式规划?呼应式规划的基本原理是什么?怎样兼容较低版别的IE?
答:一个网站可以兼容多个终端——而不是为每个终端做一个特定的版别。
优点:
面对不同分辨率设备灵活性强
可以快捷解决多设备显现习惯问题
缺陷:
兼容各种设备工作量大,功率低下
代码累赘,会呈现隐藏无用的元素,加载时刻加长
其实这是一种折中性质的规划解决计划,多方面要素影响而达不到最佳作用
必定程度上改动了网站原有的布局结构,会呈现用户混杂的状况
respond.js和css3-mediaqueries-js
20、设置元素起浮后,该元素的display值是多少?
display:block;
Tips:本站所有资源均收集自互联网,分享目的仅供学习参考,资源版权归该资源的合法拥有者所有。
Tips:若本站所发布的资源侵犯到您的合法权益,请及时联系 hqteam@qq.com 删除!
暂无评论内容