只要有恒心，铁杵磨成针，这不对，学习重在兴趣，而不再恒心，当你通宵达旦的玩游戏，捧着自己喜爱的名著谈天说滴时，不是因为有恒心，而是因为兴趣，只有干兴趣的东西才需要恒心的妥协。

学前端也是一样，对于广大的前端学员来说，了解这个领域和培养学习兴趣尤为重要，这意味着你能在前端这条路走多远。

路要一步一步的走，饭要一口一口的吃，今天我来给大家整理下前端的学习路线。

图像处理基础知识、图像处理基础知识、分辨率、图像的色彩模式、常用的图像文件格式。

互联网基本原理、服务器、浏览器、HTTP请求的概念。

编程工具介绍、HTML简介。HTML语义化标签、p标签和h系列标签。

4.CSS基础和高级技巧

CSS介绍，选择器。文字属性、颜色属性。

搜索引擎优化的概念、页面常用SEO技巧、学会有格调的制作页面。iconfont字体图标。一些常见的CSS高级技巧，比如负margin、压线技术、滑动门、列自撑技术。较复杂布局网站的学习，通栏banner、大背景等时下流行的网站制作方法。

语句、执行顺序、词法结构、标识符、关键字、变量、常量、alert语句和console控制台。值和变量、数字、文本、布尔值、null和undefined。表达式和运算符、运算符概述。

事件与事件处理概述、事件与事件名称、常用事件、事件处理程序的调用、DOM事件模型、事件流、 事件对象、注册与移除事件。文档对象的常用属性、方法与事件、输出数据。

jQuery对象和DOM对象、jQ选择器、CSS操作、设置和获取HTML、文本和值。

命名空间、对象扩展、数组化、主流框架引入的机制——domReady、无冲突处理。语言模块、字符串的扩展与修复、数组的扩展与修复、数值的扩展与修复、函数的扩展与修复、 日期的扩展与修复、浏览器嗅探与特征侦测 、判定浏览器、事件的支持侦测、样式的支持侦测。类工厂、JavaScript对类的支撑、各种类工厂的实现。

11.移动web和响应式页面

视口、缩放 、分辨率、物理分辨率、设备像素比、dppx和dpi 、meta视口。百分比布局、流式布局、CSS3新的流式盒模型。

创建对象、属性的查询和设置、 删除属性、检测属性、枚举属性、属性getter和setter、属性的特性、对象的三个属性、序列化对象、对象方法。类和模块、类和原型、类和构造函数、类的扩充、类和类型、子类。原型、实例化和原型、 对象实例化、通过构造器判断对象、继承与原型链、构造函数和原型对象 、构造函数、原型对象 、[[Prototype]]属性 、在构造函数中使用原型对象 、改变原型对象、内建对象的原型对象。

13.服务器知识和PHP入门

后台语言和前台语言的区别。初识PHP、PHP语言的优势、PHP 5的新特性、PHP的发展趋势、PHP的应用领域。

Ajax概述与Ajax初体验、Ajax技术介绍、XMLHttpRequest对象详解、动态加载和显示数据、XMLHttpRequest对象概述、方法、属性、发送请求、GET和POST请求、运行周期、使用JSON响应、Ajax实用包的封装。

Canvas绘图、基本知识、理解canvas坐标系、获取canvas环境上下文、理解路径、路径操作API 、绘制线条 、绘制矩形 、绘制圆弧 、绘制贝塞尔曲线 、线条属性 、线条颜色 、填充 、绘图状态。

后面还会涉及到高级阶段，前端的学习过程，是一个由“难”逐渐“简单”，再由“简单”变“难”的过程。前半段是入门的过程，后半段是成为大牛的过程。总之学前端只有八个字：明确方向，兴趣主导。

如果只学基础知识可能四五个月就能学完，但是前端只学基础知识是不能找到好的工作的，因为现在企业都更注重求职者的动手能力。所以在自学前端的过程中，你需要自己找些项目做，中途你可能还会遇到各种各样的问题，时间就更长了。

想自学前端找到工作的地步，用时是比较久的，如果你想很快学完找工作，加入我建立了前端自学团（前端基础自学团、js自学团、vue自学团），有问题可以一起研究解答，学习效率倍增，有问题私信留言给学姐，看过后我会给大家回复。

现在很多正在自学前端的小伙伴已经踊跃加入啦，自学团的活跃度也很高，学姐准备一些活动项目让大家多多练手，想参与进来的小伙伴快快行动吧~

这里收集了许多移动端上遇到的各类坑与相对解决方案javascript

虽然Javascript是能够在水果设备上运行的，可是用户仍是能够禁用。它也会形成客户端刷新和额外的数据传输，因此下面是服务器端侦测和转向：

手机浏览器也是浏览器，在ajax调用外部api的时候也存在跨域问题。固然利用 PhoneGap 打包后，因为协议不同就不存在跨域问题了。 
但页面一般是须要跟后端进行调试的。通常会报相似

这时候可让后端加上两个http头

第一个头能够避免跨域问题，第二个头能够方便ajax请求设置content-type等配置项

这个会存在一些安全问题，能够参考这个问题的讨论 

今天小编要跟大家分享的文章是关于2020年面试常见笔试题汇总，准备参加Web前端面试的小伙伴们来和小编一起看一看本篇文章，希望能够对大家有所帮助，帮助大家面试成功。

答：html5不是基于sgml(标准通用标记语言)，不需要对dtd文件进行引用，但是需要doctype来规范浏览器的行为，

否则浏览器将开启怪异模式，而html4.01基于sgml，需要引入dtd，才能告知浏览器文档使用的文档类型

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

3、页面导入样式时，使用link和@import有什么区别?

两者都是外部引用CSS的方式，但是存在一定的区别：

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务;@import属于CSS范畴，只能加载CSS。

区别2：link引用CSS时，在页面载入时同时加载;@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容问题;@import是在CSS2.1提出的，低版本的浏览器不支持。

@import的写法一般有下列几种：

4、常见的浏览器内核有哪些?

使用Presto内核的浏览器：Opera7及以上版本;

5、html5有哪些新特性?移除了哪些元素?如何处理HTML5新标签的浏览器兼容性问题?如何区分html和html5?

新增的元素有绘画canvas，用于媒介回放的video和audio元素，本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失，而sessionStorage的数据在浏览器关闭后自动删除，此外，还新增了以下的几大类元素。

移出的元素有下列这些：

如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?

处理兼容问题有两种方式：

1.IE8/IE7/IE6支持通过document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。

另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构、功能元素来加以区分。

1.用来实现长连接，在Websocket不可用的时候作为一种替代，最开始由google发明。Comet：基于HTTP长连接的”服务器推”技术

2.跨域通信。跨域总结与解决办法 ，类似的还有浏览器多页面通信，比如音乐播放器，用户如果打开了多个tab页，应该只有一个在播放。

3.历史记录管理，解决ajax化网站响应浏览器前进后退按钮的方案，在html5的history api不可用时作为一种替代。

4.纯前端的utf8和gbk编码互转。比如在utf8页面需要生成一个gbk的encodeURIComponent字符串，可以通过页面加载一个gbk的iframe，然后主页面与子页面通信的方式实现转换，这样就不用在页面上插入一个非常巨大的编码映射表文件了

1、在网页中使用框架结构最大的弊病是搜索引擎的”蜘蛛”程序无法解读这种页面。当”蜘蛛”程序遇到由数个框架组成的网页时，它们只看到框架而 无法找到链接，因此它们会以为该网站是个死站点，并且很快转身离去。对一个网站来说这无异于一场灾难。

如果你想销售产品，你需要客户;如想得到客户，你首先要让人们访问你的网站，而要做到这一点，你就非求助于搜索引擎不可。你花费了大量的时间、 精力和金钱开设了一家网上商店，却又故意不让搜索引擎检索你，这就好象开家零售商店，却将窗户全部漆成黑色，而且还不挂任何招牌一样。

2、框架结构有时会让人感到迷惑，特别是在几个框架中都出现上下、左右滚动条的时候。这些滚动条除了会挤占已经非常有限的页面空间外，还会分散 访问者的注意力。访问者遇到这种网站往往会立刻转身离开。他们会想，既然你的主页如此混乱，那么网站的其他部分也许更不值得浏览。

3、链接导航问题。使用框架结构时，你必须保证正确设置所有的导航链接，如不然，会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架 内，这种情况下访问者便被陷住了，因为此时他没有其他地方可去。

7、label的作用是什么?是怎么使用的?

Label中有两个属性是非常有用的,一个是FOR、另外一个就是ACCESSKEY了。

功能：表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。

功能：表示访问Label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。

局限性：accessKey属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。

8、实现不使用border，画出1px高的线，在不同浏览器下的Quirksmode和CSSCompat模式下都能保持一致的效果?

9、网页验证码是干嘛的?是为了解决什么安全问题?

Apart)，翻译过来就是”全自动区分计算机和人类的图灵测试”，顾名思义，它是用来区分计算机和人类的。在CAPTCHA测试中，作为服务器的计算机会自动生成一个问题由用户来解答。这个问题可以由计算机生成并评判，但是必须只有人类才能解答。由于计算机无法解答CAPTCHA的问题，所以回答出问题的用户就可以被认为是人类。CAPTCHA是由计算机来考人类，而不是标准图灵测试中那样由人类来考计算机，因此人们有时称CAPTCHA是一种反向图灵测试。

验证码的原理：服务器端随机生成验证码字符串，保存在内存中，并写入图片，发送给浏览器端显示，浏览器端输入验证码图片上字符，然后提交服务器端，提交的字符和服务器端保存的该字符比较是否一致，一致就继续，否则返回提示。攻击者编写的robot程序，很难识别验证码字符，顺利的完成自动注册，登录;而用户可以识别填写，所以这就实现了阻挡攻击的作用。而图片的字符识别，就是看图片上的干扰强度了。就实际的效果来说，验证码只是增加攻击者的难度，而不可能完全的防止。

10、介绍一下标准的css的盒子模型?与低版本IE的盒子模型有什么不同?

盒子模型有两种，分别是ie盒子模型和标准w3c盒子模型

11、如何居中div，如何居中一个浮动元素?如何让绝对定位的div居中?

b.确定容器的宽高，这里宽度是必须的，高度可以不设，设置外层的上外边距和左外边距分别是宽高的一半。

12、display有哪些值?说明他们的作用?

block :块对象的默认值。用该值为对象之后添加新行

none :隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间

inline :内联对象的默认值。用该值将从对象中删除行

compact :分配对象为块对象或基于内容之上的内联对象

marker :指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before伪元素一起使用

inline-table :将表格显示为无前后换行的内联对象或内联容器

list-item :将块对象指定为列表项目。并可以添加可选项目标志

run-in :分配对象为块对象或基于内容之上的内联对象

table :将对象作为块元素级的表格显示

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、请解释下为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式?

c.据说是最高大上的方法:after

方法：(注意：作用于浮动元素的父亲)IE6-7不支持:after，

f.父元素设置display:table盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用

16、在网页中的应该使用奇数还是偶数的字体?为什么呢?

偶数字号相对更容易和Web设计的其他部分构成比例关系

使用奇数号字体不好的地方是，文本段落无法对齐

何时应当使用margin：

(1)需要在border外侧添加空白时，

(2)空白处不需要有背景(色)时，

(3)上下相连的两个盒子之间的空白需要相互抵消时，比如15px+20px的margin，将得到20px的空白(注意地方见第三点)。

(1)需要在border内侧添加空白时(往往是文字与边框距离的设置)，

(2)空白处需要背景(色)时，

(3)上下相连的两个盒子之间的空白希望等于两者之和时，比如15px+20px的padding，将得到35px的空白。

margin使用时应该注意的地方

margin在垂直方向上相邻的值相同时会发生叠加，水平方向上相邻的值会相加。margin取负值时，在垂直方向上，两个元素的边界仍然会重叠。但是，此时一个为正值，一个为负值，并不是取其中较大的值，而是用正边界减去负边界的绝对值，也就是说，把正的边界值和负的边界值相加。

18、元素竖向的百分比设定是相对于容器的高度吗?

答：相对于父容器的宽度

19、什么是响应式设计?响应式设计的基本原理是什么?如何兼容较低版本的IE?

答：一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

20、设置元素浮动后，该元素的display值是多少?

以上就是小编今天为大家分享的关于2020年Web前端面试常见笔试题汇总的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有帮助，想要了解更多Web前端相关知识记得关注官网，最后祝愿小伙伴们面试成功，成为一名优秀的。

文章来源：原创 冯梦兰 IT高级程序吸金

【免责声明：本文图片及文字信息均由小编转载自网络，旨在分享提供阅读，版权归原作者所有，如有侵权请联系我们进行删除。】