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 提升到一個新的水平。