2018 年面向 Web 開發人員的 30 個 HTML5 教程和資源

網絡是建築師、設計師的作品。 基礎掌握在設計者、開發者手中。 我們可以使用 HTML 為數字時代構建網站、軟件、項目和應用程序。 為了讓 Web 瀏覽器理解和解釋網站，需要根據標準對其進行編碼，大多數情況下該標準是 HTML，並添加了 CSS 和 JavaScript。

掌握 HTML5 有一些有益的好處。 有了足夠的經驗，您可以成為一名自由前端開發人員並通過為他人開發網站來賺錢，但重要的是 HTML5 賦予您在網絡上創建任何您想要的東西的能力。 也許無論是一個廣義的術語，但就網站開發和設計而言，HTML5 是您取得成功的最佳機會。 當今存在一些出色的框架，它們可以與您的 HTML5 知識相輔相成，以構建獨特且動態的數字體驗。

許多資深和專家開發人員已經出版了關於如何成為前端開發人員的書籍——了解 CSS 和 HTML 的人——雖然這些書籍很棒，但它們很快就會落後於當前 Web 開發中正在發生的事情。 這兩種語言——HTML 或 CSS——都不是靜態的，但總是在變化，並且正在改進以提供更精細的工具和技術來構建現代網站。 因此，使用這種方法，學習 HTML5 的一個不錯的選擇是通過有關特定功能如何工作或如何實現特定設計的網絡教程、指南和演練。 我們為您提供最好的、最新的和最現代的教程，以及有關如何在幾週內成為 HTML5 專家的資源。

通過頁面轉換改善用戶流

如果您打算總體上學習 HTML5 和前端 Web 開發，您將不可避免地需要了解用戶體驗，以及它所提供的幾乎所有內容。 能夠編寫簡潔的代碼固然很好，但如果您編寫的代碼反映了您對網站和應用程序的可靠用戶體驗應該是什麼樣子的理解，那就更好了。 如今，無數專家花時間分析頁面性能和最新見解，了解是什麼讓用戶停留在頁面上，以及是什麼讓他們離開頁面。 一項最新的研究案例研究向我們表明，可以改進頁面轉換以提供更精緻的用戶體驗。

傳統上，我們依賴默認轉換，即當我們點擊網站的新頁面時，我們必須等待瀏覽器重新加載該頁面。 儘管一些主題和開發人員正在追趕這個概念的低效，但我們不會很快看到這種查看頁面過渡方式的全局變化，除非我們自己嘗試並逐漸傳播關於它的詞。 在本教程中，您將找到所需的工具和有關如何放大頁面轉換的信息，這樣瀏覽器就不必為訪問者打開的每個新頁面進行硬重新加載，這是對全球用戶體驗的驚人豐富您的桌面和移動應用程序提供的內容。

預覽

智能響應式設計模式，或者當 Off-Canvas 不夠好時

什麼是真實的響應式設計？ 它是一組拼接在一起的塊和元素，並附有一些最小的響應式設計屬性嗎？ 這些天有太多糟糕的設計，雖然它在外面看起來很時髦，但如果我們深入了解內部的代碼庫，我們今天看到的許多領先網站完全避免了任何結構設置的方式頁面的設計被呈現出來，這對那些事後必須來修復該代碼的人來說意味著麻煩。

這篇文章技術含量較低，但提供了更多示例，說明不同的網站如何弄亂響應式設計模式，並在技術上以這種方式提供更糟糕的體驗。 作為一名 HTML5 開發人員，您將想知道要避免的設計模式，以及為了更好地構建項目的可維護性和靈活性而使用的方法。

預覽

表單設計：如何自動格式化用戶輸入

設計好的表單會讓你從其他開發人員那裡獲得一些聲譽點，但不僅僅是他們。 隨著瀏覽器功能的巨大增長，用戶逐漸習慣於自動完成表單之類的東西。 想想在網上進行任何購買，如果您是 Google Chrome 的狂熱用戶，那麼您就會知道 Chrome 可以保存您的信用卡詳細信息以供日後使用，以便於訪問。

這種表單設計確實會影響用戶查看他們正在使用的瀏覽器的方式，還會影響網站所有者對此類自動完成工作的開放程度； 可以阻止它們，但大多數情況下它們是可用的。 Thoriq 的這個教程側重於用戶實時鍵入內容時的自動完成表單功能。 這可以是序列號、出生日期或您需要的字符串。 擁有自動完成和自動排序功能確實可以給初次訪問的用戶留下持久的印象。 有時它甚至對您自己的項目數據庫很有幫助，因為您可以避免讓用戶輸入愚蠢的數據，而是在他們輸入時自動更正它。

預覽

如何使用 Flexbox 構建新聞網站佈局

Flexbox 現在是網頁設計中的官方佈局之王。 這個美妙的小屬性可以幫助您設計一個具有無可挑剔的像素和尺寸清晰度的頁面，無論從哪個設備訪問特定網站。 探索 Flexbox 可能性的一個好方法是通過教程，它們通常很簡潔，並提供了許多示例，說明如何調整不同的網格和設計行以在頁面上完美顯示。 Jeremy Thomas 投入工作製作了以下教程，該教程僅使用 Flexbox 佈局屬性為新聞網站或新聞雜誌構建佈局。 了解如何創建響應式列、如何調整其尺寸以實現設計清晰，以及如何在不犧牲外觀的情況下移動內容。

預覽

動畫技術比較

為您找到合適的動畫工具可能是一個棘手的過程，因為有太多精彩的選擇可供選擇！ 瀏覽器在支持動畫方面變得越來越好，開發人員肯定會通過突破動畫在網頁設計中使用方式的限制來充分利用這一點。 這篇文章探討了兩種解決方案，React Animations 和 Browser Native Animations — 涵蓋的工具是：CSS、Canvas、SMIL、Web Animations API、WebGL、GreenSock、Velocity.js、jQuery、Snap.svg、Three.js、Bodymovin、React Motion ，和 GSAP。 每個工具的優缺點都有簡明的解釋，因此請明確您的目標並做出選擇。 該帖子底部有一些精彩而有見地的評論，因此您可以更多地了解那裡的每個工具，同時還可以探索帖子本身未涵蓋的不同建議。

預覽

社交媒體的基本元標籤

社交媒體是結構良好的設計不可避免的一部分，由於缺乏社交小部件而失去社交份額是愚蠢的，至少可以說是不合理的。 然而，這篇文章並不關注可愛的社交分享按鈕，而是關注社交分享的一個新方面，即社交元標籤。

這些元標記可用於幫助您創建與社會保持一致的內容，這些內容將在特定社交網絡上以更精緻的方式顯示。 對於 Twitter，我們知道它是 Twitter Cards，它允許我們將我們的帖子分享到 Twitter 並在我們寫的評論旁邊顯示圖像/描述，對於 Facebook 來說，它是一樣的東西，除了能夠歸屬適當的作者信用，該信用可以鏈接回該人的官方 Facebook 帳戶。 這是關於如何實現元標記精度的徹底深入指南，以便您的帖子在您的朋友和關注者社交媒體牆上獲得更多曝光。

預覽

粘性頁腳，五種方式

您有沒有想過當您上下滾動特定頁面時，網站如何創建社交共享小部件，這些小部件會固定在頁面底部？ 它被稱為粘性頁腳！ 就像粘性頁眉導航欄一樣，粘性頁腳在那些想要更方便地公開重要信息的人中變得非常流行，有些是社交分享按鈕的公開，有些使用粘性頁腳功能來顯示他們的電子郵件通訊形式，其他人會使用它來廣播有關業務、產品或網站的重要新聞。 一個的用途很多，所以當你學習五種獨特的技術來在你自己的網站上實現粘性頁腳時，讓你的創造力盡情發揮。 這些包括負邊距（兩個版本）、使用 calc() 功能、使用 Flexbox 實現或使用全局網格。

預覽

多文件上傳在 HTML5 中很容易

正確上傳文件至關重要，如今大​​部分網站都管理某種形式的文件上傳，用於個人資料使用或網站範圍的功能列表。 即使您為自己製作了一個投資組合網站，您也可能希望實現某種形式的文件上傳，以便更輕鬆地附加新的投資組合項目。 這不會花費太長時間，事實上，HTML5 使它非常快速、安全和方便。 在 Raymond 的本教程中，您將學習如何創建能夠一次上傳多個文件的 HTML5 文件上傳表單，這是一段不錯的代碼，可以在不同的設置中快速重新調整和重用。

預覽

如何使用 HTML5 和 Cordova 在 24 小時內構建 iOS 和 Android 應用程序

構建一個移動應用程序是當今許多人的夢想，去當地的數字技術專家咖啡館坐一坐，你會發現幾十個書呆子坐在他們的電腦前，竊取他們第一個移動應用程序的功能演示。 如今，移動應用程序是一項巨大的業務，工作機會無處不在，即使在統治市場的大型科技公司也是如此。 達到那個水平當然是一個挑戰，但幾乎沒有任何好處來自沒有提出挑戰的情況。 本教程使用 Cordova 構建 Android/iOS 應用程序重點介紹一種快節奏的方法，為您的朋友準備工作移動應用程序預覽，以便您了解自己的想法。

預覽

如何為 HTML5 視頻配置您的網絡服務器

視頻內容行業的所有知名人士都開始轉向 HTML5 視頻以獲得更好的瀏覽器性能，YouTube 是幾年前從 Flash 轉向 HTML5 的主導視頻平台，直到今天他們仍在繼續改進生態系統，以提供更好的視頻觀看體驗。 Kristof 解釋了有關如何配置 Web 服務器以使其支持 HTML5 文件類型的非常快速和簡單的技巧，否則您可能會嘗試加載 HTML5 視頻內容，但它根本不會顯示。

預覽

HTML5 書籤

HTML5 書籤使您不必經常訪問 Web 開發博客以了解可用於自由市場的最新工具、庫和插件。 除了列出最新的酷工具的每日鏈接之外，HTML5 書籤還有一個側邊欄小部件，其中列出了與 HTML5 相關的所有重要框架、引擎、資源和鏈接。 有時會有多個鏈接，通常至少有一個。 通過這個書籤站點，您可以了解即將可用的工具類型，如果您已經在某個特定的事情上工作了很長時間，您甚至可以提交和登記自己的工具。

預覽

深入 HTML5

教程是學習特定編程語言各個方面的直接資源，通過教程，您不僅可以探索特定概念的微小方面，還可以學習如何將這些方面應用於項目的其他部分。 Dive Into HTML5 是一本免費的在線書籍，向您介紹了 HTML5，並詳細解釋瞭如何從 HTML5 新手轉變為自信的專業人士，在構建網站和 HTML5 應用程序方面可以處理自己的問題。 您將獲得關於 HTML5 歷史、重要概念、如何使用動畫、視頻以及您在閱讀教程時通常會遇到的所有內容的大量報導。

預覽

HTML5 遊戲開發者

除了網站和應用程序之外，您還可以使用 HTML5 構建什麼？ 手機遊戲呢？ 手機遊戲市場已經爆炸式增長，我們今天擁有的許多應用程序商店市場的成功僅靠一己之力。 學習創建自己的 HTML5 遊戲首先要了解 HTML5 如何與瀏覽器交互，此時您可以開始探索不同的 HTML5 遊戲引擎以開始構建您的第一個遊戲地形。 如果您對這樣的冒險感興趣，那麼請不要羞於訪問 HTML5 遊戲開發者論壇，在那裡您可以與其他遊戲開發者學習、聯繫和集思廣益，他們都使用 HTML5 來完成他們的項目。 這是了解行業最新消息的好地方，也是了解人們使用軟件構建遊戲的方式的好地方。

預覽

CSS3 和 HTML5 動畫終極指南

幾年前，您將不得不使用 Flash 來創建一個完全動畫的網站，而如今這一切都可以通過 HTML5 和 CSS3 來完成——而且每天設計師都在推動這些語言的極限，以提供更簡潔的體驗，重塑我們理解網絡動畫的方式。 擁有一個靜態網站很好，但是在您的網站上添加動畫可以在可信度方面增加一些額外的點，即使是簡單的過渡效果也可以被視為動畫，並且知道如何使用過渡是製作具有感覺的應用程序和網站的第一步流暢、清晰且易於導航。

您將要探索的這個龐大的資源充滿了有關 Web 動畫的有趣和足智多謀的信息，您需要什麼樣的庫才能使它們工作，以及它們通常如何與瀏覽器交互。 您距離成為動畫設計大師僅幾步之遙。

預覽

你在 HTML5 中犯的 5 個可怕的錯誤

熟能生巧，確實如此。 每當你養成一種新習慣或一種技能時——你一定會遇到一些經驗，這些經驗可以提高你對特定任務的理解，有時你會學到要避免的事情，有時你會意識到如何更快更好地完成事情。 這一切都是時間遊戲，而編程當然也屬於學習的範疇。

HTML5 與任何其他語言一樣會帶來挑戰，它會使新開發人員對處理設計問題的最佳方法感到困惑，而且您通常不會在教程中解釋這些問題，通常每個人都使用自己的方法來構建東西 - 眾多方法之一人們過去如此討厭（或者可能仍然討厭）PHP 的原因，因為它的多樣性以及由大量不同開發人員編寫的編寫代碼的缺陷。 在這裡，您對常見的 HTML5 編程和語法錯誤有一個很好的回顧，這些錯誤在您的 Web 開發人員職業生涯中至少會犯幾次，因此請探索它們，了解它們並採取必要的步驟來防止它們在未來發生.

預覽

如何克服 HTML5 在線學習的 5 大挑戰

品牌在為其團隊提供電子學習時遇到的常見挑戰是什麼？ Elucidat 涵蓋了您在嘗試向大量人群教授某些東西時通常會遇到的一系列重要要點，在這種特定情況下，主題是 HTML5。

預覽

創建和共享豐富的 HTML5 內容和應用程序

H5P 為開發人員提供了在任何應用程序開發環境中創建豐富且可重用的 HTML5 內容的必要工具。 您可以使用 H5P 插件將此豐富的可重用內容功能添加到您的 Drupal 或 WordPress 網站。

H5P 提供了多層內容類型，可以使您的網站外觀豐富十倍。 其中一些是用於創建可以展開或碰撞的項目列表的手風琴。 它有一個視頻聊天小部件，因此您可以通過真正有意義的媒體與訪問者互動。 它還具有用於創建不同範圍的測驗的算法小部件。 此外，它還具有圖表生成器，因此您可以快速顯示您獲得的最新研究數據。 它還有一個很棒的小部件，用於從圖像中構建拼貼畫。 最後，它有一個令人驚嘆的小部件，可將您的課程直接展示到您的網站上，還有更多精彩的小部件。

需要一些時間來了解所有這些。 但是，這些小部件可以完全改變您網站的感覺，並且肯定會吸引重視交互功能的受眾。 H5P 是圍繞稱為 H5P 庫的可重用構建塊設計的。 例如，有 H5P 庫可用於向您的內容添加視頻、圖像和聲音以及用於創建 UI 元素。 所有現有的 H5P 內容類型也被設計為可重用。 如果您的內容類型需要問題類型，只需幾分鐘即可插入。您可以從 10 種現有問題類型中進行選擇，它們都將遵循相同的問題類型合同。

預覽

理想的設計工作流程

HTML5 正在編碼，對吧？ 它不僅是編碼，還是設計網站的工具。 CSS3 可以添加那些美妙的樣式和顏色層，但是 HTML5 將所有這些小而整潔的屬性結合在一起。 它有助於最終完成您對應用程序、網站或手機遊戲的創意。 理想的設計工作流程是一個很好的小指南，它向您展示如何在不花太多錢的情況下做得更多。

這是一個演示文稿，各種回顧，展示了在您設計新項目時可以使用的最佳工具是什麼，這些工具最終將節省您的工作效率。 幽默似乎有點諷刺，但最終都很有趣。 快速瀏覽一下，看看哪些提示適用於您當前的工作流程，也許您可以對其進行調整，以確保在減少工作的同時完成更多工作。

預覽

技術響應式網頁設計速成課程

隨著我們走向全球現象，響應式設計教程和指南只會變得更加簡潔和深入。 這是大多數互聯網用戶將通過智能手機瀏覽的地方。 您必須了解響應式設計的來龍去脈。 您的網站訪問者中有很大一部分將通過他們的移動設備訪問。 人們根本沒有耐心瀏覽桌面模式的網站。 這種情況尤其發生在網站的所有者無法對其做些什麼的時候。 向業內最優秀的公司之一學習如何完善像素完美的設計。 您需要這樣做，以便它們在任何設備中都變得流暢、響應迅速且靈活。

預覽

如何使用語義 UI 設計豐富的基於卡片的佈局

卡片設計首次亮相，無處不在。 從 Google 到 Pinterest，再到移動應用程序——每個人都開始接受精心設計的卡片設計之美。 關於如何充分利用這一美妙的新趨勢的教程也從四面八方湧來。 Semantic-UI 提供了一組與 Bootstrap 類似的工具和組件，但當然是在更語義化的標記中。 在本教程中，您對如何使用 Semantic-UI 實現完美的卡片設計有一個很好的概述。 您需要設計以準備好在您當前工作的任何網站上實施。 最終的代碼設置可在 JS Bin 上找到，您可以在其中自己嘗試設計。 也許，您可以根據自己的需要進行自定義調整以適合您的項目。

預覽

如何使用 Chrome 開發者工具測試佈局

測試不僅適用於繁重的編程語言。 事實上，測試將始終是網頁設計不可或缺的一部分。 如果不進行測試，您只是押注自己的能力來開發一個沒有任何錯誤的完美網站。 通常情況下，情況永遠不會是這樣，因為單個設計中涉及的內容太多。 確保此設計穩定的唯一方法是通過測試。

現在有許多庫來結束 HTML5 和 CSS3 測試。 但也許，您一直忽略的那個已直接插入您的 Chrome 瀏覽器。 它被稱為 Chrome 開發者工具。 它是一套面向前端開發人員的工具，可用於實時測試和分析您的設計。 這直接在瀏覽器中進行。 您可以採用兩種方法來幫助您改進使用這些工具的方式。 如果您要開始一個新項目，請先編寫 HTML 代碼，然後簡單地玩弄規則。 HTML 的初稿將通過開發工具。 您將看到更改的即時應用將節省您優化項目的時間。

預覽

使用 HTML lang 屬性

HTML5 中的語言屬性可幫助您指定網站使用的默認語言類型。 反過來，該規範可幫助機器人和遠程工具了解如何抓取您的網站並為其編制索引。 您不想在只有英語的網站上使用西班牙語屬性。 這同樣適用於反之亦然的情況。

預覽

HTML5 向上

當您根據書籍或教程從頭開始構建新網站時，可能會出現問題。 這通常會發生，因為您遵循了幾個月制定的規則指南。 在您購買這本書之前，這甚至需要數年時間。 在那些（並不罕見）的情況下，您將使用過時的技術和方法構建網站。 我們想向您展示一種不同的方法來加速您的學習。 您甚至可以保留您的書籍，因為無論如何技術信息都是無價的。

HTML5 UP！ 是一個響應式網站模板集合。 我們曾在某些場合介紹過他們的主題，我們對其設計和無可挑剔的整體結構感到非常滿意。 我們的建議是讓您使用這個美麗的主題作為學習工具。 您還應該下載他們的源代碼並充分探索它。 在一側拉起您的代碼編輯器，在另一側拉起您的瀏覽器。 您將看到每個元素是如何內置在設計中的。 您可以自己學習這些技術，並在將來將其應用到您自己的設計中。 聽起來相當容易吧？ 嗯，實際上是這樣，您可以為任何類型的免費主題網站執行此操作。 這是了解新設計概念以及如何在您自己的工作流程中使用它們的快捷方式。

預覽

Ionic：高級 HTML5 混合移動應用程序框架

Ionic 是市場上最先進和最發達的 HTML5 框架之一。 Ionic 不能做的事情不多，但它實際上可以做的事情太多了。 領先的品牌和技術公司自豪地承認他們也是 Ionic 框架的用戶。 他們將其用於移動和桌面應用程序。 Ionic 擁抱 Web 性能，並且被認為是最快的混合框架之一。 此外，它還包含 Angular 技術。 您始終使用最先進的 Web 開發功能進行構建和原型設計。 令人驚嘆的設計和某種易於使用的感覺是使 Ionic 粉碎競爭白費的原因。

預覽

免費的 HTML5 在線動畫製作工具

我們確實向您推薦了一系列 HTML5 動畫教程。 如果您不想跟隨他們，我們完全理解。 有時，掌握動畫可能有點棘手。 對於這些情況，我們不能推薦足夠的著名動畫軟件。 它是一款可靠的在線工具，用於創建所有基於 HTML5 技術的視頻和動畫。 它非常適合想要製作新廣告視頻的品牌。 此外，它非常適合需要製作課程介紹視頻的導師。 此外，它非常適合希望在其網站上使用一些 HTML5 動畫魔法的開發人員。

預覽

橫幅流

廣告世界每天都在變化。 Adblockers 正在阻止網站管理員賺取他們辛苦賺來的收入。 有了這個，不同的公司正試圖發芽做點什麼。 BannerFlow 確實為構建視覺上可接受的 HTML5 橫幅提供了一個很好的環境。 開發人員當然使用精確的網絡技術構建它，因此它們對所有現代瀏覽器都很友好。 創建自定義橫幅，如果您願意，您甚至可以監控他們的個人表現。

預覽