作为初入职场的我们，在学习与工作中，总是会遇到不同的挫折，今天南京万和web前端培训教各位如何避免在web前端开发中遇到的那些坑。

　　说到开发一个运行在现代网络中的网站：Web开发人员需要选择虚拟主机平台和底层数据存储，准备编写HTML、CSS和JavaScript用的工具，要有设计执行方式，以及一些可用的JavaScript库/框架。在将任务分解为这几步之后，接下来要做的就简单多了，可以去网上找文章，浏览论坛，看看那些能提供更好的Web体验提示的示例。

　　然而不管是走哪条路，犯错却是每一个开发人员都不可避免的。虽然有些错误与某一个具体的行为相关，但有些错误却是所有Web开发人员都需要面对的挑战。因此，通过研究，体验和观察，南京万和web前端培训总结了Web开发人员常犯的5个错误——以及如何避免这些错误。

　　写一些过时的HTML

　　错误：

　　早期的互联网比起我们现在，标记的选择要少得多。然而，旧习难改，现在很多开发人员写的HTML就好像还身处20世纪一样。举例来说，我们使用<table>元素用于布局，当其他特定语义标签更适合的时候使用<span>或<div>元素，在当前HTML标准不受支持的时候使用<center>或<font>标签，在页面上间隔项目，如果有大量 字符实体的话。更多内容，请咨询南京万和web前端培训。

　　影响：

　　遵从这种过时的HTML规则可能会导致标记过于复杂，结果是在不同的浏览器中发生不同的行为。而且没有了改进浏览器的动力，因为没有必要更新到最新的浏览器，如Microsoft Edge，哪怕是Internet Explorer版本（11、10、9）也变得没有必要。

　　如何避免：

　　停止使用<table>元素用于内容布局，限制使用<table>元素来显示表格数据。例如可以去whatwg.org了解当前可用的标记选项。使用HTML去描述内容是什么，而不是说明内容如何展现。对于如何显示内容，请使用CSS。

　　明明在我的浏览器中是可行的...

　　错误：

　　开发人员往往会偏爱某一个特定的浏览器，或者特别讨厌某一个，可能主要是因为对测试网页视图有所偏见。也有可能是因为从网上找到的代码示例不能保证会如何呈现在其他浏览器中。此外，一些浏览器对风格有不同的默认值。

　　影响：

　　以某一个浏览器为中心写的网站，在其他浏览器中显示时，其质量将会很差。

　　如何避免：

　　在开发过程中，在所有浏览器和版本中测试网页是不切实际的。不过，每隔一段时间，在多个浏览器中检查网站的样子不失为一个好方法。现在，不管你偏好的是什么平台，总有免费的工具可用：免费的虚拟机、网站扫描仪。Visual Studio等工具还可以调用多个浏览器，来显示你正在工作的单一页面。当涉及到CSS设计时，可以参考在meyerweb.com中所示的那样“重置”所有的默认值。

　　如果你的网站正在使用的CSS特性是专为某一浏览器特制的，那么南京万和web前端培训提醒你注意它的引擎前缀，如-webkit-，-moz-和-ms-。对于行业在这方面的发展趋势指导，那么可以阅读以下参考：

　　Microsoft Edge开发博客：A break from the past, part 2: Saying goodbye to ActiveX, VBScript, attachEvent

　　QuirksMode.org：CSS vendor prefixes considered harmful

　　Bruce Lawson： On Internet Explorer supporting -webkit- vendor prefixes

　　上面这些参考资料解说了引擎前缀的革新，以及你还可以点击这里——这个网站提供了一些如何摒弃引擎前缀的实用建议。

　　不好的格式

　　错误：

　　提示用户提供信息(特别是在输入文本字段的时候)，并假设数据会如预期接收。

　　影响：

　　很多事情会(或者很有可能将会)出错，当我们信任用户输入的时候。如果无法提供所需的数据，或接收到的数据不能与下面的数据模式兼容，页面可能会失败。更为严重的是，有的用户可能会故意违背网站的数据库，例如可以通过注入式攻击(见OWASP：Top 10 2013-A1-Injections)。

　　如何避免：

　　你首先要做的事是确保用户清楚你需要什么类型的数据。比如说，如果你只说要地址，那用户不知道指的是单位，家庭还是电子邮件的地址!除了要具体，还要充分利用现在的HTML提供的数据验证技术。不管数据在浏览器端是如何验证的，确保它始终也在服务器端验证。不要让一个串接的T-SQL语句使用来自于用户输入的，各个字段的类型没有经过确认的数据。

　　臃肿的响应结果

　　错误：

　　页面充满了许多高品质的图形和/或图片，这些图形和/或图片借助img元素的高度和宽度属性按比例缩小。来自于页面链接的文件，如CSS和JavaScript，很大。源HTML标记也可能是不必要的复杂和全面。

　　影响：

　　完全渲染页面的时间是如此之久，以致于一些用户放弃了，或者甚至于直接不耐烦地重新请求整个页面。在某些情况下，如果页面处理等待太久，会出现错误。

　　如何避免：

　　不要抱有现在互联网接入越来越快的侥幸心态——从而允许臃肿的场景。相反，要将从浏览器到你的网站的来回当为一种成本。图像是网页臃肿的主要罪犯。为了最大限度地减少图像成本，减轻页面加载的压力，南京万和web前端培训建议你可以试试以下三个技巧：

　　1、问问你自己：“这些图形真的有必要吗?”删除不需要的图片。

　　2、使用例如Shrink O’Matic或RIOT的工具来减少图像文件大小。预加载图像。这不会提高初始下载的成本，但可以让网站其他页面图像加载速度更快。

　　3、另一种减少成本的方式是压缩CSS和JavaScript链接文件。有很多的工具，如Minify CSS和Minify JS都能帮你做到。

　　制作无意义的页面

　　错误：

　　制作面向公众内容的网页才是有用的，绝不能不提供关于搜索引擎的任何线索。没有实现可访问性功能。

　　影响：

　　如果不能让搜索引擎发现网页，那么，可能会只有少量或根本没有访问。

　　如何避免：

　　使用SEO(搜索引擎优化)和HTML的支持可访问性。关于SEO，一定要添加标签以提供有意义的网页关键字和描述。 About Tech就写得很好，可以借鉴。为了能有更好的可访问性功能体验，请对每一个img和area标签提供一个alt="your image description"

　　属性。更多建议请见About Tech。你也可以在Cynthia Says测试公共网页，看它是否兼容Section 508。

　　总结

　　通过识别这些常见的错误，web开发人员可以避免很多让其他人饱受煎熬的挫折。我们不仅需要承认错误，还应该清楚错误的影响，并采取措施避免错误，这样才能有更好的开发表现——并有信心完成任务!

　　以上就是南京万和web前端培训今天为各位总结的学习要点，希望可以帮到各位，有不懂的可以咨询南京万和web前端培训哦！