Web前端新手应该注意的常见错误有哪些?

今天小编要跟大家分享的文章是关于Web前端新手应该注意的常见错误有哪些?Web全栈是目前比较流行的语言，因为前端较其他语言相比，简单好学，而且现在的互联网公司几乎缺少不了Web前端开发，行业的需求致使大量的人转型前端，对于刚学前端的人来讲，他们缺乏开发经验，在项目开发中容易出错，为了使大家少走弯路，综合一批前端程序员，收集了一些最常见的错误，下面我们一起来看一看吧，希望能够对大家有所帮助。

一、JQuery选择器

在一个HTMLDOM

树中，进行一个比较复杂的元素选择，不包含某些文字的带有某某类名的元素的邻居的父元素的然后怎么做?写一个很复杂的jQuery选择器?打住。

jquery选择器原理是用正则表达式去分解你的选择器字符串(这一部分叫做Sizzle)，然后再用内置的一些遍历函数如prev,next等(其实这些函数也是基于DOM提供的方法)，去找到你想要的元素。

我会不去盲目地进行Sizzle的语义歧义测试，而是自己根据自己的逻辑去用prev,next等去找到自己的元素而且退一万步来说，我也会尽量避免使用复杂的选择器(之前的方案也有提及)，单位个元素用ID，多个元素用类，绝对高效准确。

二、基础数据结构与算法

现在有两个不同的JSON，比较复杂，可以参考这里的DEMO中返回的JSON。要比较它们的差异，除了用现成的工具如beyond

compare以外，如果我们的机器上没有安装这个工具，能如何较快解决?

作为一个程序员，一个个对比是不可行的，对比完也不会有什么收获。我会把之放进Excel中(如果你机器连这个都没有，那忽视我)，先排序，再用二分法去快速定位找到有差异的JSON属性，即使是1024个字段的大数据，也最多10次的定位即可找到。

其实算法这东西，并不是给你一道题目然后把死记下来的内容背出来，而是当你遇到相应的情景时，能想到用这个方法去解决。

三、HTTP协议

现在很多项目中都是用ajax去提交JSON到后台了，原始的那种HTTP提交已经比较少见(至少在我的项目中是这样)，但是我们也不能忘记设置form的method、action的原始提交方式，因为这个才是表单提交的原型，有助于我们理解HTTP协议，例如POST和GET的区别，理解数据是怎么样从前端到达后端的，又是怎么样从后端返回到前端。

当你理解了这个，就可以更好地跟后端进行沟通，遇到数据上的问题也能较快地定位解决。

四、javascript作用域

学过好几种的编程语言，作用域问题都是老生常谈了。在javascript中更是有函数的作用域这一基础知识。关于这个，推荐《javascript权威指南》。当时我是把中文的读去再去读英文，把英文的读完去找图解，才感觉到把这一点理解清楚的。

五、HTML/CSSDOCTYPE

曾经项目中遇到这样一个问题，用其他浏览器打开页面是好的，唯独是IE8打开时出奇地慢。我注意到IE8打开时慢但CPU消耗并不高，只是网页空白很久没渲染出来，可以排除JS算法上的问题。

经过细心研读代码发现，有人把一部分script、link等标签放到了DOCTYPE的前面。

DOCTYPE是用来告诉浏览器解释整个文档的一套法则的，一定要放在HTML部分的最前面，先有script标签，那就意味着浏览器已经开始解释了，后面再有DOCTYPE也是没有意义的了。把DOCTYPE放到HTML部分的最前面，一开始提及的问题就解决了。

以上就是小编今天为大家分享的关于Web前端新手应该注意的常见错误有哪些的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助。想要了解更多Web前端知识记得关注北大青鸟Web培训官网。最后祝愿小伙伴们工作顺利！

作为一名HTML5前端工程师，为了工作，为了就业我们免不了要参加各种各样的面试。为此总结了面试前的注意事项：

第一：注意自己的仪容仪表

面试之前，一定要再次从头到脚地将自己的仪容仪表检查一遍。检查时主要包括，自己的牙缝是不是还有食物残渣，所以你需要就近找一个卫生间，如果没有卫生间就近找一个角落也是可以的，但是切记一定不要在大庭广众之下。因此，为了给自己整理出着装的时间请在约定时间前20分钟到达。

第二：再次检查面试时所需的资料是否都已带全

这些资料主要包括：身份z明、学历文凭证明、个人简历、以往作品等等，如果这些东西齐全之后，需要对这些资料做一个整理与排序。因为没有哪个面试官希望看到面试者拿出一堆“莫名其妙”的东西塞给他，让他自己再一页一页的翻找自己需要的内容，如果说这些资料在面试官手中不小心散落一地，结果可想而知。这样的求职者在面试官眼中也一定不是一个让人放心、有条不紊的员工。当然如果检查时发现资料没有带全，也不要紧张。反而你要庆幸幸亏及时检查，也有足够的时间组织语言去向面试官解释。

第三：面试之前将通信工具调成振动或关闭状态

虽然说面试者与面试官之间是一个平等的关系，但毕竟你是去人家公司求职的，始终处于一个被动的状态，所以最起码的尊重还是要做到的。曾经有调查显示，对于面试过程中接电话或是被电话打断的求职者，会被HR减分。

第四：等候面试官时，仔细观察多了解面试公司

在等候面试官时，可以暗自观察一下公司的大体情况比如员工的着装风格、公司的LOGO或是贴在墙上的企业文化、公司的环境等等，一来可以在接下来的面试过程中表现出自己对公司的认同感，二来也可以让自己对求职公司多些了解，以确定是否要接受这里的工作。如果你身边有公司的资料宣传架，不妨取一本翻看一下，也会增加HR对你的好感。

第五：放松心情，保持自信

面试时一定要保持一定的自信，这样也会给面试官留下很好的印象。面试只是你步入工作的第一步，即便是失败了那也是人生重要的经历。失败是为了更好的迎接下一个挑战。

作为一名web前端工程师千万不要觉得懂技术面试就能万事大吉了，像以上五点细节性的东西也是一定要掌握的。

面试题系列：

网页链接

HTML中的标签元素一般分为三大类，它们分别是：块级元素、行内元素、行内块级元素。下面总结一下这几类元素的特点及应用。

01 块级元素

特点：

① 独占一行、从上到下排列

② 可直接控制宽度、高度及盒子模型的CSS属性（width 、height、padding 等属性值）

③ 在不单独设置宽度的情况下，块级元素的宽度（width属性）继承父元素

④ 在不单独设置高度的情况下，块级元素的高度（height属性）靠自己的基因（它本身内容的高度）

块级元素从我的理解来说，就是一个大框框，用来框住其它元素不要乱跑乱窜的，只能在一定范围内活动。所以，它通常会用来进来大的结构搭建。

常用的块级元素：

02 行内元素

特点：

① 元素与元素之间会自动排列成一行，遇到空间不够自动换行

② 默认高度和宽度（width、height）属性与它们的内容有关，无内容那么它本身也就是虚无。

③ 行内元素不支持padding、margin的上下调动（它们就是紧挨着不离不弃、除非用外部手部强制拆散它们）

行内元素一般用来修饰点缀内容而用，语义化比较强，用来加强代码的可读性。

常用的行内元素：

03 行内块元素

特点：

从这个名字就可以看出来，它是一个结合体，块级元素和行内元素的结合体。它具备二者共有的一些特点，使用非常频繁。

① 元素具有块级元素的属性（width、height等属性），可以对其直接控制

② 虽然有宽和高，但是他并不会霸道地独占一行，它具有行内元素的“亲情属性”，会自动排列挨在一起。

③ 行内块元素支持padding、margin的上下调动

欢迎大佬提点指正

---