Web 开发中应用 HTML5 技术的10个实例教程

  HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究。借助尖端功能,技术和 API,HTML5 允许你创建响应性、创新性、互动性以及令人惊叹的漂亮网站。更进一步,你也可以使用 HTML5 创建原来只能用于桌面平台上的复杂应用程序。

  这篇文章挑选了适合中级开发者的10个 HTML5 进阶教程,带你深入学习 HTML5 技术在 Web 开发中的实际应用。

您可能感兴趣的相关文章

  • 35个让人惊讶的 CSS3 动画效果演示
  • 8个惊艳的 HTML5 和 JavaScript 特效
  • 20个惊艳的 HTML5 Canvas 应用试验
  • 10套精美的免费网站后台管理系统模板
  • 29款基于 HTML5 Canvas 的网页游戏

 

1. HTML5 game tutorial 

学会使用 HTML5 Canvas 做一个基本贪吃蛇游戏,以及如何使用 jQuery 实现键盘控制游戏。

Web 开发中应用 HTML5 技术的10个实例教程_第1张图片

 

2. Bouncing a Ball Around with HTML5 and JavaScript

Canvas 元素是 HTML5 标准中最强大的元素之一。在这个教程中,您将学习如何通过一个有趣的例子来使用它。

Web 开发中应用 HTML5 技术的10个实例教程_第2张图片

 

3. Coding An HTML 5 Layout From Scratch

了解如何使用“优雅降级”和“渐进增强”技术来实现一个梦幻般的,跨浏览器的 HTML5 & CSS3 的网站。

Web 开发中应用 HTML5 技术的10个实例教程_第3张图片

 

4. Create an HTML5 Canvas Tile Swapping Puzzle

了解如何使用 HTML5 Canvas 和 JavaScript 来创作一个充满活力的瓷砖交换游戏。

Web 开发中应用 HTML5 技术的10个实例教程_第4张图片

 

5. Create a Minimal Coming Soon Page using HTML5 and CSS3

按照本教程中的步骤以简约的风格和淡雅的色调使用 HTML5 和 CSS3 创建一个预告页面。

Web 开发中应用 HTML5 技术的10个实例教程_第5张图片

 

6. Create An Elegant Website With HTML 5 And CSS3

学习如何建立一个具有专业水准的博客或作品集网站,以展示你的作品。

Web 开发中应用 HTML5 技术的10个实例教程_第6张图片

 

7. Create Your Portfolio Gallery Using HTML5 Canvas

建立一个照片库,并通过 HTML5 的画布和 CSS3 过渡增强效果。如果您的网站有图片库,你一定要了解如何创建这个漂亮的悬停效果。

Web 开发中应用 HTML5 技术的10个实例教程_第7张图片

 

8. Creating a Minimal Blog Design Using HTML5, CSS3 and jQuery

这个教程来学习如何使用 HTML5,CSS3 和 jQuery 创建一个简约的布局的博客。

Web 开发中应用 HTML5 技术的10个实例教程_第8张图片

 

9. How to create water Ripple effect using HTML5 canvas

看看这个教程,学习如何在图像上点击的时候创造出一些漂亮的水滴。

Web 开发中应用 HTML5 技术的10个实例教程_第9张图片

 

10. Rethinking Forms in HTML5

HTML5 表单也是重要内容,了解如何用更少的代码创建更多的可用的表单。

Web 开发中应用 HTML5 技术的10个实例教程_第10张图片

 

您可能感兴趣的相关文章
  • 35款非常优秀的基于 HTML5 网页游戏
  • 让人爱不释手的Web应用程序图标素材
  • 10套精美的免费网站后台管理系统模板
  • 期待已久的2012年度 jQuery 插件揭晓
  • 10大流行的 Metro UI Bootstrap 主题

 

本文链接:在 Web 开发中应用 HTML5 技术的10个实例教程

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

你可能感兴趣的:(Web 开发中应用 HTML5 技术的10个实例教程)