HTML5 开发人员最常犯的 5 个错误：初学者指南

自从 Tim Berners-Lee 和 Robert Cailliau 指定 HTML 已经 20 多年，HTML 成为用于构建 Internet 的标准标记语言。 从那时起，HTML 开发社区就一直在乞求改进这种语言，但这种呼声主要是 Web 浏览器开发人员听到的，他们试图缓解同事的 HTML 问题。 不幸的是，这导致了更多问题，导致许多跨浏览器兼容性问题和重复开发工作。 在这 20 年中，HTML 升级了 4 次，而大多数浏览器都获得了两位数的重大更新和大量的小补丁。

HTML5 应该最终解决我们的问题并成为统治所有问题的标准（浏览器） 。 这可能是自万维网创建以来最受期待的技术之一。 发生了吗？ 我们最终是否获得了一种完全跨浏览器兼容的标记语言，并且可以在所有桌面和移动平台上工作，为我们提供我们所要求的所有这些功能？ 我不知道！ 就在几天前（2014 年 9 月 16 日），我们再次收到了 W3C 的审查电话，因此 HTML5 规范仍然不完整。

希望有一天，当规范最终确定时，浏览器不会有大量过时的代码，它们将轻松且正确地实现强大的功能，例如Web Workers 、多个同步的音频和视频元素，以及我们需要的其他 HTML5 组件。很久。

然而，我们确实有成千上万的公司基于 HTML5 开展业务并且做得很好。 还有许多基于 HTML5 的优秀应用程序和游戏被数百万人使用，因此成功显然是可能的，并且无论其规范状态如何，HTML5 已经并将继续被使用。

但是，我提到的方法很容易在我们面前爆炸，因此我强调了一些可以避免的最基本的 HTML5 错误。 下面列出的大多数错误是由于不同浏览器中某些 HTML5 元素的实现不完整或缺失造成的，我们应该希望在不久的将来它们会过时。 在此之前，无论您是 HTML5 初学者还是经验丰富的兽医，我建议您在构建下一个 HTML5 应用程序时阅读该列表并牢记这一点。

常见错误 #1：信任本地存储

让他们吃蛋糕！ 这种方法多年来一直是开发人员的负担。 由于对安全漏洞和计算机保护的合理恐惧，在许多人害怕互联网的“黑暗时代”，网络应用程序被允许在计算机上留下不合理的少量数据。 诚然，有些东西是“来自 Microsoft(r) 的优秀浏览器大师”提供给我们的用户数据，或者 Flash 中的本地共享对象等东西，但这远非完美。

因此，开发人员采用的第一个基本 HTML5 功能之一是 Web 存储是合理的。 但是，请注意 Web 存储并不安全。 它比使用 cookie 更好，因为它不会通过网络传输，但它没有加密。 你绝对不应该在那里存储安全令牌。 您的安全策略不应依赖存储在 Web Storage 中的数据，因为恶意用户可以随时轻松修改其localStorage和sessionStorage值。

为了更深入地了解 Web Storage 以及如何使用它，我建议阅读这篇文章。

常见错误 #2：期望浏览器之间的兼容性

HTML5 不仅仅是一种简单的标记语言。 它已经足够成熟，可以将行为与布局结合在一起，您应该将 HTML5 视为扩展的 HTML，并在顶部添加高级 JavaScript。 如果你看看我们之前遇到的所有麻烦，只是为了让 HTML+CSS 的静态组合在所有浏览器上看起来都一样，那么可以公平地假设更多的复杂性将意味着更多的努力来确保跨浏览器的兼容性。

不同浏览器上的 HTML5 解释远非相同，就像 JavaScript 的情况一样。 浏览器大战中的所有主要参与者都参与了 HTML5 规范，因此可以公平地假设浏览器之间的差异会随着时间的推移而减少。 但即使是现在，一些浏览器还是决定完全忽略某些 HTML5 元素，这使得遵循基线和通用特性集变得非常困难。 如果我们在等式中添加更多连接互联网的设备和平台，情况会变得更加复杂，从而导致 HTML5 出现问题。

例如，Web 动画是仅受 Chrome 和 Opera 支持的出色功能，而允许在网页上下文之外向用户发出警报的 Web 通知功能（例如发送电子邮件）完全被 Internet Explorer 忽略。

要了解有关不同浏览器的 HTML5 功能和支持的更多信息，请查看 www.caniuse.com 上的 HTML5 指南。

所以事实仍然是，即使 HTML5 是新的并且被很好地指定，我们应该预料到大量的跨浏览器兼容性问题并提前计划。 浏览器需要填补的空白太多了，可以预期它们无法很好地克服平台之间的所有差异。

常见错误 #3：假设高性能

尽管 HTML5 仍在不断发展，但它是一项非常强大的技术，与之前使用的替代平台相比具有许多优势。 但是，强大的力量伴随着巨大的责任，尤其是对于 HTML5 初学者。 HTML5 已被桌面和移动平台上的所有主要浏览器采用。 考虑到这一点，许多开发团队选择 HTML5 作为他们的首选平台，希望他们的应用程序能够在所有浏览器上平等地运行。 然而，仅仅因为 HTML5 规范这么说就假设在桌面和移动平台上都有合理的性能是不明智的。 许多公司（khm！Facebook khm！）将他们的赌注押在了 HTML5 的移动平台上，并因 HTML5 没有按计划运行而受苦。

然而，同样有一些伟大的公司严重依赖 HTML5。 看看众多在线游戏开发工作室，他们在将 HTML5 和浏览器推向极限的同时，也在做着令人惊叹的事情。 显然，只要您意识到性能问题并解决这些问题，您就可以在一个很棒的地方制作令人惊叹的应用程序。

常见错误 #4：可访问性有限

网络已经成为我们生活中非常重要的一部分。 使依赖辅助技术的人可以访问应用程序是软件开发中经常被搁置的重要话题。 HTML5 试图通过实现一些高级辅助功能来克服这个问题。 不少开发人员认为这已经足够了，并没有真正花时间在他们的应用程序中实现额外的可访问性选项。 不幸的是，在这个阶段，HTML5 存在一些问题，阻止它向所有人提供您的应用程序，如果您想包含更广泛的用户，您应该期望投入更多时间。

您可以查看此位置以获取有关 HTML5 中的可访问性以及最常见的可访问性功能的当前状态的更多信息。

常见错误 #5：不使用 HTML5 增强功能

HTML5 显着扩展了标准的 HTML/XHTML 标记集。 除了新标签之外，我们还有不少新规则和行为。 太多的开发人员只选择了一些增强功能，而跳过了 HTML5 的一些非常酷的新功能。

HTML5 中最酷的事情之一是客户端验证。 此功能可能是 Web 浏览器采用的最早的 HTML5 元素之一。 但是，不幸的是，您会发现很多开发人员默认将novalidate属性添加到他们的表单中。 这样做的原因是合理的，我很确定我们将对此进行辩论。 由于向后兼容性，许多应用程序实现了自定义 JavaScript 验证器，并且在此之上由浏览器完成开箱即用的验证是不方便的。 但是，要确保两种验证方法不会发生冲突并不难，标准化的用户验证将确保共同的体验，同时有助于解决我之前提到的可访问性问题。

另一个很棒的特性与 HTML5 中处理用户输入的方式有关。 在 HTML5 出现之前，我们必须将所有表单字段都包含在<form></form>标记中。 新的表单属性使执行以下操作完全有效：

 <form action="demo_form.asp"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form> Last name: <input type="text" name="lname" form="form1">

即使lname不在表单内，它也会与fname一起发布。

有关新表单属性和增强功能的更多信息，您可以查看 Mozilla 开发者网络。

包起来

我知道 Web 开发人员是浏览器大战中的附带损害，因为上述许多错误都是不同浏览器中存在问题的 HTML5 实现的直接后果。 但是，避免常见的 HTML5 问题并花一些时间了解 HTML5 的新功能仍然至关重要。 一旦我们控制了这一切，我们的应用程序将利用新的强大增强功能并将 Web 提升到一个新的水平。