對于我來說，Web 前端開發是最酷的職業之一，因為你可以用新的技術發揮，創造出一些驚人的東西。唯一的問題是，你需要跟上這個領域的發展腳步，因此，你必須不斷的學習，不斷的前進。本文將分享能夠幫助您快速掌握 HTML5 的實例教程，值得好好學習。

Measuring Page Load Speed with Navigation Timing

　　Navigation Timing 是用于精確測量網站性能的 JavaScript API。該 API 提供一種簡單的方式來獲得準確，詳細的時序統計，頁面導航和負載事件。它可現在能夠在Internet Explorer 9，谷歌 Chrome 和 Firefox 中使用。本文介紹了該 API 以及如何利用它暴露時間數據。

Multi-touch Web Development

　　移動設備如智能手機和平板電腦通常有一個電容式觸摸屏，以捕捉用戶的手指動作。隨著移動互聯網的發展，應用程序越來越復雜，Web 開發人員需要一種方法來處理這??些事件。例如，幾乎所有的快節奏的游戲需要玩家一次按下多個按鈕，這在觸摸屏的背景下，意味著多點觸摸。

　　在這篇文章中深入介紹了 iOS 和 Android 設備提供的觸摸事件 API，探索什么樣的應用程序你可以建立并提出了一些最佳實踐，使人們更容易開發觸摸功能的應用程序。

Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5

　　在本教程中，您將學習如何將一個 HTML 列表轉換為墻上的“即時貼”，效果就像下面圖片展示的那樣。

Writing Augmented Reality Applications using JSARToolKit

　　這篇文章是關于使用 JSARToolKit 庫與 WebRTC getUserMedia API 在網絡上做增強現實的應用程序。本文的最終結果是把一個三維模型上的增強現實標記在網絡攝像頭視頻之上。

Native HTML5 Drag and Drop

　　多年來，我們一直在使用像 jQuery、YUI 和 Dojo 等 JavaScript 庫來簡化復雜的 UI 元素，例如動畫，圓角和拖放等。拖放（DND）在 HTML5 中是一等公民！該規范定義了一個基于事件機制的 JavaScript API，幫助你創建更強大的拖放功能。

Quick guide to webfonts via @font-face

　　來自 CSS3 的 @font-face 功能使我們能夠以一種可訪問的，可操作和易擴展的方式在網頁上使用自定義的字體。但是，你可能會說，“我們為什么要使用@font-face，如果我們有 Cufon，sIFR 技術以及在圖像中使用文本？”

Perfectly Positioned Plusses

　　你曾見過縮略圖，當鼠標懸停的時候，露出中間的圖標來提示什么是即將發生的事情？有沒有想過如何s實現這個效果？或者曾經試過，但沒能讓圖標完全居中，尤其是當你的縮略圖不是固定尺寸的時候？看看這個快速提示。

A Beginner’s Guide to Using the Application Cache

　　應用程序緩存（或 AppCache）允許開發人員指定哪些文件瀏覽器應緩存并提供給離線用戶。您的應用程序將加載并正常工作，即使用戶離線的時候按下刷新按鈕。

CSS3 Transitions And Transforms From Scratch

　　網上有很多 CSS 轉換和過渡效果的驚人的例子。本教程將帶您回到最基礎的。我們要建立一些基本的 CSS3 過渡性的動作，一步一步來。

Best Practices for a Faster Web App with HTML5

　　多年以來，Cookie 都被用于跟蹤唯一用戶數據，它最大的缺陷就是所有的 Cookie 數據被添加到每個 HTTP 請求頭。這可以對于頁面的響應時間產生重要影響，尤其是在使用 XHR 的時候。所以，最好的做法就是減少 Cookie 的大小。

　　在 HTML5 中，我們可以做的比這更好：使用 sessionStorage 和 localStorage 代替 Cookie。這兩個網絡存儲對象可以用來把用戶的數據保存在客戶端，它們的數據不通過 HTTP 請求傳送到服務器。

Creating a Mobile-First Responsive Web Design

　　在這個教程中，我們將演練如何創建自適應的網絡體驗，學習把網頁設計為移動優先的方法。

Improving HTML5 Canvas Performance

　　HTML5 畫布功能，開始于蘋果的一個實驗，如今成為支持最廣泛的網頁 2D 圖形標準。許多開發商都依賴于它來實現各種各樣的多媒體項目、可視化和游戲。然而，由于我們建立的應用程序復雜性不斷增加，開發人員無意中碰到了性能瓶頸。

Capturing Audio & Video in HTML5

　　HTML5 的興起讓 Web 訪問硬件設備成為了可能。地理定位（GPS）的定位，方位 API（加速度計），WebGL（GPU），以及網絡音頻API（音頻硬件）都是完美的例子。本教程介紹了一個新的 API：navigator.getUserMedia()，它允許網絡應用程序訪問用戶的攝像頭和麥克風。

Menu Notification Badges Using HTML5 Data-Attributes

　　在本文中，您將看到如果事業多種方式來實現徽章的效果，包括使用你可能不熟悉 HTML5 的數據屬性。

您可能感興趣的相關文章

本文鏈接：個每個 Web 前端開發人員必備的經典 HTML5 教程

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源