• 首页
• 域名注册
• 虚拟主机
• 网站建设
• 服务器租用
• 营销推广
• 网站程序
• 前端开发
• 移动互联网
• 企业邮箱

• 当前位置：创新互联 >> 常见问题 >> 前端开发 >> html >> 经典 HTML5 教程

经典 HTML5 教程

• 作者：创新互联 文章来源：前端开发部 点击数： 更新时间：2014-07-18

•      对于我来说，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
  　　你曾见过缩略图，当鼠标悬停的时候，露出中间的图标来提示什么是即将发生的事情？有没有想过如何实现这个效果？或者曾经试过，但没能让图标完全居中，尤其是当你的缩略图不是固定尺寸的时候？看看这个快速提示。

  

   
  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 的数据属性。

   

  

• HTML5最佳应用开发工具推荐 :上一篇
  火狐做的艰难抉择：开放HTML5要封闭 :下一篇