29个非常实用的HTML 5实例、教程和技巧

29个非常实用的HTML 5实例、教程和技巧

【51CTO精选译文】对于想要着手新建Web项目的人来说，HTML5实例确实很能给人以灵感，毕竟HTML5是未来的网页标记技术，我们都需要为此作好准备。HTML5是作为HTML(超文本标记语言)的下一个主要版本而开发的。主要的市场和互联网领导企业已经在转而改用HTML 5平台。由于苹果和谷歌都大力推行这项标准，以便从事更高级的Web开发，随着更多的公司支持HTML 5的先进特性，我们现在看到实施HTML 5的网站遍地开花。

51CTO推荐专题：HTML 5 下一代Web开发标准详解

由于Flash在Web和互联网应用程序中的应用越来越少，HTML5为Web设计师和开发者打开了新的大门。在这种情况下，每一个Web开发者的确有必要了解HTML 5的基本教程、技巧和术语。

下面我们介绍了一份完整的列表——如果你是位Web开发者，绝对不想错过这30余个HTML5实例、教程和技巧。

不妨先看一下几个HTML5实例

1. 用HTML5创建移动设备上的离线Web应用程序

IBM的技术库里面有一篇由IT架构师Dietmar Krueger撰写的内容翔实的文章。作者在该文中描述和介绍了为什么为操作系统和移动平台编写应用程序困难重重。作者选择了走开放的道路，通过HTML 5来进行开发，而不是依赖学习针对

特定平台的语言，比如面向iPhone平台的带Cocoa框架的Objective-C语言。这篇文章介绍得非常清晰、深入浅出。

2. HTML 5演示和实例

这个网站到处都有HTML5实例，还有很不错的实例。有些是本人一起改动的HTML 5实例和演示。点击浏览器支持图标或技术标签，就可以过滤演示(过滤器是“或”过滤器)。

3. WTF is HTML5

这一页概述了HTML5，非常实用，还有很不错的HTML5实例!

4. 用PHP以及HTML 5构建一个实时新闻博客系统

这个教程表明了如何用HTML 5和CSS3来构建一个新闻网站。HTML和CSS中的每一行代码都附有解释。

5. 用HTML 5设计一个博客

HTML 5的功能特性大部分涉及JavaScript应用编程接口(API)，因而让你更容易开发出交互网页，但是有一批新的元素让你可以为传统的Web 1.0网页添加额外的语义。这个教程通过为你提供博客布局，以便研究分析这些元素。

6. HTML 5中的语义

在最近一年左右的时间里，万维网联盟(W3C)最近加大力度开发的下一代HTML：HTML 5发展势头相当猛。这是个庞大项目，不但涵盖HTML的结构，还涵盖解析模型、错误处理模型、文档对象模型(DOM)、资源获取算法、媒体内容、2D绘图、数据模板、安全模型、网页装入模块、客户端数据存储等方面。

HTML的结构、语法和语义也进行了修改，一些内容在Lachlan Hunt所著的《HTML 5先睹为快》一书(/articles/previewofhtml5)中有所提及。

在本文中，我们不妨只关注HTML的语义。它是作者多年来关注的方面;他认为，语言对HTML的未来来说至关重要。

7. HTML5 Web Applications

概述了HTML 5浏览器兼容性。

8. Dive Into HTML5

Dive Into HTML 5力求详细介绍从HTML 5规范及其他优秀标准精挑细选的一系列特性。时间允许的话，我会定期发布草案(Drafts)。

9. When Can I Use

你在这里能找到非常实用的兼容性表，介绍了HTML5、CSS3、SVG及其他即将推出的Web技术中的特性。

10. HTML5 & CSS3 Readiness

11. 如何用HTML 5 Canvas来绘图

HTML 5规范里面有一堆好东东，其中之一是Canvas，这是一种使用JavaScript，以编程方式来绘图的方法。我们会在本文中介绍Canvas的基本细节，并演示了可以用实例和链接来实现什么。

12. 用HTML5表单大显身手

表单通常被认为是我们必须添加标记和样式的讨厌鬼。我不敢苟同：表单(其重要性不亚于表)是我们所要处理的最激动人心的东西。

我们在这里要看一下如何运用一些先进的CSS和最新的CSS3技巧，为漂亮的HTML 5表单添加样式。你看了本文后，我保证你也想为自己的表单添加样式。

13. 将Web设计概念编程成为HTML5

14. 利用HTML 5和CSS3，编写向后兼容的单页网站模板

HTML5是Web开发的未来;但信不信由你，你现在可以使用它。HTML5非常顾及语义和可访问性，因为我们没必要到处添加毫无意义的div标签。它为导航和脚注等常用元素引入了有意义的标签，这些标签极其合理，也更自然。

这概述了HTML5和CSS3的基本内容，同时仍关注旧版浏览器。在我们开始之前，记下这个问题的答案。

网址：

/tutorials/code-a-backwards-compatible-one-p age-portfolio-with-html5-and-css3/

15. 从头开始编写HTML 5布局

诚然，HTML5和CSS3都在完善之中，这种情况还会持续一段时日，但没有理由不立即开始使用。毕竟，时间证明实施未完成的规范确实可行，很容易换成W3C 建议的完整版。这时候，渐进增强和适度降级就能发挥作用。这里有一些很不错的HTML5实例。

16. 如何开发一个HTML5 iPhone应用程序

我知道，你郁闷了差不多有一年。所有铁杆派的Objective-C开发者一直在争先恐后地为iPhone编写应用程序。你也许甚至试着读一两篇关于为iPhone进行开发的教程，但是发现很难学会。

你可以运用已经拥有的技巧来进行开发：HTML(5)、CSS和JavaScript。

这个教程表明了如何开发一个离线的HTML5 iPhone应用程序。更具体地说，我会逐步介绍开发俄罗斯方块游戏的过程。

17. 用HTML 5和CSS3构建一个精致的网站

学习通过五个宏步骤，运用大脑、铅笔、纸、Photoshop、HTML和CSS来构建一个精致的网站。但幸好技术并没有止步，我们将来还有另外两个朋友：HTML 5和CSS3来设计更好的网站。

18. 编写CSS3和HTML5单页网站模板