30个实用的HTML5教程和技巧

HTML5是创建和网络上呈现内容的新标记语言。自从问世以来一直是新闻的头条,这是很流行的。这是非常方便和用户友好的,并提供了增强的功能。Web开发人员喜欢使用HTML5,因为它拥有各种新功能使Web开发方便了很多。你可能会喜欢用HTML5开发网站。

所以今天我们列出30个实用的HTML5教程和技巧,让所有网页设计师和开发人员的技术有进一步的提高。我们希望这些样品,教程和技术将有助于你,所以值得你访问并学习新的很酷的东西。

Implementing HTML5 Drag & Drop

001

HTML5的新特征是本地拖放。本教程将教你如何实现拖放来创建一个简单的购物车界面。

 

How to Draw with HTML 5 Canvas

002

一个伟大的HTML5规格的画布,这是使用JavaScript编程实现的绘图。

 

HTML5 File Uploads with jQuery

003

顾名思义,本教程将教你如何创建一个小型的Web应用程序,它称为上传中心,它可以让人们从自己的电脑上传图片拖放到浏览器窗口。

 

Design a Blog with HTML5

004

HTML5拥有这样的特征包括JavaScript API。这使得它很方便的开发交互式网页。它会教你标记一个博客。

 

How to Build Cross-Browser HTML5 Forms

005

在这个教程中,你将学会兼容HTML5形式的现代浏览器。它弥补了旧的浏览器利用混合webforms2,Modernizr,jQuery UI和各种jQuery插件。

 

How to Code a CSS3 & HTML5 One-Page Website Template

006

在这里,你可以了解如何创建一个HTML5网页模板,利用CSS3和jQuery的最新功能,与scrollto插件。

 

HTML5 Canvas Element Guide

007

这是一个很酷的指南,可以帮助你了解canvas元素及必需的,预览其相关代码的东西。

 

Making an HTML5 iPhone App

008

学习如何创建一个离线HTML5 iPhone应用程序。

 

Have a Field Day with HTML5 Forms

009

本教程将教你如何创建,利用一些先进和最新CSS3技术,制作一个很酷的HTML5表单。

 

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

010

在本教程中,您将学习如何建立一个博客网站,使用HTML5和CSS3的新一代技术。

 

Bouncing a Ball Around with HTML5 and JavaScript

011

这是一个很好的引导,将讨论利用html5 canvas元素一个有趣的例子,如何创建一个跳跃的蓝色球。

 

Another HTML5 Tutorial from Brad Neuberg

012

本教程中的谷歌员工Brad Neuberg告诉我们为什么消费者和开发商对HTML5的支持这么有信心。他还讨论了改变现代浏览器的HTML5支持未来开发的实际意义。

 

Blowing up HTML5 video and mapping it into 3D space

013

这是一个很酷的教程,你可以学习如何“吹”动一个HTML5视频,然后映射到三维空间。这是一个值得尝试的演示。

 

Comprehensive video tutorial on HTML5

014

顾名思义,这是一个由谷歌员工称为“Brad Neuberg综合视频”。在这段视频中他给我们介绍了HTML5。它可以被证明是有用的技术,如果你有足够的时间阅读文章。

 

The Official Guide to HTML5 Boilerplate

015

在这个截屏,爱尔兰保罗给出了每一页详细的评论。然后他也给出了为什么当每一段可以用在你的项目中进一步解释。

 

How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery

016

在这里,您将学习如何创建一个酒吧顶栏,出现在网页的顶部,上面的内容(就像“hellobar”)。它只是在Chrome和Safari测试,所以可能不会在其他浏览器出现。

 

Making a Beautiful HTML5 Portfolio

017

在这个教程中,你可以学习如何创建一个基于jQuery插件的HTML5瀑布流时尚组合。这可以用来展示你的新工作。最好的事情是,它是完全可定制的。

 

An HTML5 Slideshow with Canvas & jQuery

018

此教程主要是Canvas的使用局限于游戏和其他类似的东西。它将教你逐步增强幻灯片过渡效果来创造美丽的画廊。最好的部分是,它在旧的浏览器是完全兼容的。

 

Designing Search Boxes with HTML5 and CSS3

019

在任何网站,有一个搜索框是必须的。在这个教程中,你可以学习设计搜索框样式,也有一些技术和技巧创造实用和好看的搜索功能。

 

Code a Vibrant Professional Web Design with HTML5/CSS3

020

本教程将教你如何使用HTML5和CSS3创建一个充满活力和专业的设计。

 

Simple Website Layout Tutorial Using HTML5 and CSS3

022

在这里你可以学习如何创建一个HTML5和CSS3造型简单的网页。

 

HTML5 Visual Cheat Sheet

023

这是一个很酷的和有用的Web程序,设计人员和开发人员可以派上用场。这是一个简单的HTML标签列表,它是HTML版本4.01/5相关属性的支持及对比。

 

How to Make All Browsers Render HTML5 Correctly — Even IE6!

024

学习如何创建一个共同的布局,利用一些html5的语义元素,然后使用JavaScript和CSS来制作你的设计并兼容IE。

 

Creating an Animated 404 Page

025

它的名字说明了一切,本教程教你如何创建一个动画404页,可以轻松定制和改进。

 

Creating an ad in HTML5

026

HTML5是下一代Web技术与Flash竞争的新技术。其中一个最受欢迎的使用Flash动画和互动广告。你可以阅读这篇文章,找到更多的话题。

 

The video element

027

这是新的HTML5视频元素,允许在你网站播放影片。该元素的数据可以是视频,音频、图像或它相关联的。

 

Create a Stylish Contact Form with HTML5 & CSS3

028

本教程可以帮助你学习HTML5和CSS3,完全在几个简单的步骤创建自己酷的应用程序。它采用了一些新的HTML5功能向窗体添加创新的功能,同时利用CSS3属性,创建再现PS图象处理软件概念等效的代码。

 

webOS HTML5 Database Storage Tutorial

029

这是一个关于webOS/HTML5数据库存储功能的教程。值得你去学习。

 

HTML5 Geolocation Tutorial

030

顾名思义,这个教程教你HTML5的地理定位功能和所有你需要知道的基本原则。

 

原文:http://smashinghub.com/30-awesome-html5-tutorials-and-techniques.htm