给网页设计师的30个HTML5学习资源

 早在几个星期前，Adobe就发布了Dreamweaver CS5 html5 Pack的预览版下载。众所周知，html5在互联网领域掀起了一场大论战，并让Adobe的日子很难熬。html5致力于为前端开发提供全面的标记语 言。以下30多个资源可帮你开始学习html5。

html5code.net' title='html5模板网'>Blowing up html5 video and mapping it into 3D space（将html5视频吹散并组成3D效果）最近我研究了HTML 5中的Canvas 和Video 标签，并发现了一些很酷的特性。其中之一就是Canvas.drawImage() api。此为详细介绍。

html5code.net' title='html5模板网'>Code a Backwards Compatible, One Page Portfolio with html5 and CSS3（用html5 和CSS3 打造向下兼容的网页）html5更加语义化，使用html5 我们不必在网页上布满没有意义的div。它引入了有意义的tag，比如 navigations 和 footers 使代码更有意义也更接近自然语言。

html5code.net' title='html5模板网'>Coding A HTML 5 Layout From Scratch（HTML 5 布局）
这篇文章将教你

• 用原有技术将元素放置在特定位置
• 最新的技术潮流
• Microformats与html5协同使用
• 介绍html5与CSS3的新特性

html5code.net' title='html5模板网'>Coding a CSS3 and html5 One Page Website Template（制作CSS3和 html5 一页式站点模板）这篇文章介绍了如何利用CSS3 和jQuery的新特性制作html5 网页模版。 html5 仍在完善当中，你也可以选择性的下载XHTML版。

html5code.net' title='html5模板网'>Comprehensive video tutorial on html5（全面的html5视频指南）这 是一个叫Brad Neuberg的工程师制作的html5教学视频。

html5code.net' title='html5模板网'>Create modern Web sites using html5 and CSS3（用html5与CSS3打造时尚站点）这篇文章介绍了许多html5的功能和语法及API，还有CSS3的新的选择器，效果和特性。最 后， 还将教你如何利用这些新特性开发一个网页。当你读完这篇文章，你就能用html5和CSS3开发一个自己的站点啦。

html5code.net' title='html5模板网'>Designing a blog with html5（用html5设计博客）许多html5 特性要结合JavaScript API一起使用，以增加网页的互动性。但仍有一些新元素可让传统的Web1.0页面更加语义化。为了学习这些，我们来看怎样建立一个博客。

html5code.net' title='html5模板网'>Designing for the Future with html5 and CSS3 : Tutorials and Best Practices（为未来设计：HTML 5 和 CSS3 指南与最佳案例）这篇文章将介绍用 html5和CSS3搭建的几个最佳站点。

html5code.net' title='html5模板网'>Design and Code a Cool iPhone App Website in html5（用html5设计和实现一个超酷 iPhone App 网站）

html5code.net' title='html5模板网'>Have a Field Day with html5 Forms（建立HTML 5表格）这篇文站将教你 如果用HTML 5 和高级CSS技术与最新的CSS3技术建立一个漂亮的表格。

html5code.net' title='html5模板网'>How To Create A Nice Blog Design Touching The Future(不用photoshop，完成网页设计)

html5code.net' title='html5模板网'>How to Make All Browsers Render html5 Mark-up Correctly – Even IE6（怎样让所有浏览器都渲染html5标记——即使是IE6）这篇文章将教你如何用JavaScript和CSS，使 html5页面向下兼容，即使是IE6也不例外。

html5code.net' title='html5模板网'>How to Make an html5 iPhone App（制作html5 iPhone 应用）这是 一篇针对iPhone的指导，但是许多技术也可用在兼容html5的手机浏览器上。

html5code.net' title='html5模板网'>HTML 5 and CSS 3: The Techniques You’ll Soon Be Using（HTML 5 和CSS 3：你将用到的技术）这篇文章使用HTML 5和CSS 3 搭建博客页面。如果你已经熟悉html 和CSS，将很容易跟上。

html5code.net' title='html5模板网'>html5 for Beginners. Use it now, its easy!（HTML 5初学指南）给 所有具有基础HTML知识的初学者的HTML 5 入门指南

html5code.net' title='html5模板网'>html5 Presentation这篇文章介绍了html5 的发展历史和它的基本特性

html5code.net' title='html5模板网'>html5 Tutorial – Getting Started（HTML 5 入门指导）

html5code.net' title='html5模板网'>How to Build Web Pages With HTML 5（怎样建立HTML 5网页）

html5code.net' title='html5模板网'>Simple Website Layout Tutorial Using HTML 5 and CSS 3（html5和CSS3布局指南）html5最令人期待的新标签包括<header>, <footer>, <aside>, <nav>, <audio>，同时它还包括画图，线下存储数据，拖放等API。页面布局将会更易理解。这里将介绍一个最简单的HTML 5 布局页面，用CSS3 设置样式。最终结果如下

html5code.net' title='html5模板网'>Structural Tags in html5（HTML 5 结构标签）html5 有许多标签帮助网页结构化，这能省去以网页中许多div

html5code.net' title='html5模板网'>html5 Boilerplates（HTML 5模板）此文介绍了一些你能拿来就用的html5 模板文件

html5code.net' title='html5模板网'>HTML 5 canvas – the basics（HTML 5 基础——Canvas）对HTML 5 Canvas使用方法的全面指导

html5code.net' title='html5模板网'>HTML 5 Tutorials（HTML 5 指南）

html5code.net' title='html5模板网'>Implementing html5 Drag and Drop: New Premium Tutorial（HTML 5 拖放）html5 的一个新特性就是拖放，不过IE早在5.5时代就支持拖放了，而HTML 5 的拖放也是基于IE的。本例将教你如果用拖放实现一个简单的购物车界面。

html5code.net' title='html5模板网'>Preview of HTML 5这是一篇比较老的文章，介绍了html5的特性和优点。

html5code.net' title='html5模板网'>The HTML 5 Canvas For Flash Developers : Drawing（HTML 5 Canvas 的画图功能）

html5code.net' title='html5模板网'>The Power of HTML 5 and CSS 3介绍了HTML 5 与CSS3能创造的各种效果。

html5code.net' title='html5模板网'>View Source Tutorial: Sticky Notes With html5 and CSS3（html5 和CSS3 打造便利贴效果）

html5code.net' title='html5模板网'>webOS html5 Database Storage Tutorial（webOS html5 数据存储指南）html5 的本地存储功能将使数据存储十分简便。

html5code.net' title='html5模板网'>Yes, You Can Use HTML 5 Today!本文介绍了一些现已被支持的HTML 5 特性，对初学者十分有用。