关注前端开发
HTML5、CSS3、Javascript

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

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

Blowing up HTML5 video and mapping it into 3D space(将HTML5视频吹散并组成3D效果)最近我 研究了HTML 5中的Canvas 和Video 标签,并发现了一些很酷的特性。其中之一就是Canvas.drawImage() api。此为详细介绍。

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3(用HTML5 和CSS3 打造向下兼容的网页)HTML5更加语义化,使用HTML5 我们不必在网页上布满没有意义的div。它引入了有意义的tag,比如 navigations 和 footers 使代码更有意义也更接近自然语言。

Coding A HTML 5 Layout From Scratch(HTML 5 布局)
这篇文章将教你

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

Coding a CSS3 and HTML5 One Page Website Template(制作CSS3和 HTML5 一页式站点模板)这 篇文章介绍了如何利用CSS3 和jQuery的新特性制作HTML5 网页模版。 HTML5 仍在完善当中,你也可以选择性的下载XHTML版。

Comprehensive video tutorial on HTML5(全面的HTML5视频指南)这 是一个叫Brad Neuberg的工程师制作的HTML5教学视频。

Create modern Web sites using HTML5 and CSS3(用HTML5与CSS3打造时尚站点)这篇文章介绍了许多 HTML5的功能和语法及API,还有CSS3的新的选择器,效果和特性。最 后, 还将教你如何利用这些新特性开发一个网页。当你读完这篇文章,你就能用HTML5和CSS3开发一个自己的站点啦。

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

Designing for the Future with HTML5 and CSS3 : Tutorials and Best Practices(为未来设计:HTML 5 和 CSS3 指南与最佳案例)这篇文章将介绍用 HTML5和CSS3搭建的几个最佳站点。

Design and Code a Cool iPhone App Website in HTML5(用HTML5设计和实现一个超酷 iPhone App 网站)

Have a Field Day with HTML5 Forms(建立HTML 5表格)这篇文站将教你 如果用HTML 5 和高级CSS技术与最新的CSS3技术建立一个漂亮的表格。

How To Create A Nice Blog Design Touching The Future(不用photoshop,完成网页设计)

How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6(怎样让所有浏览器都渲染HTML5标记——即使是IE6)这篇文章将教你如何用JavaScript和CSS,使 HTML5页面向下兼容,即使是IE6也不例外。

How to Make an HTML5 iPhone App(制作HTML5 iPhone 应用)这是 一篇针对iPhone的指导,但是许多技术也可用在兼容HTML5的手机浏览器上。

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using(HTML 5 和CSS 3:你将用到的技术)这篇文章使用HTML 5和CSS 3 搭建博客页面。如果你已经熟悉html 和CSS,将很容易跟上。

HTML5 for Beginners. Use it now, its easy!(HTML 5初学指南)给 所有具有基础HTML知识的初学者的HTML 5 入门指南

HTML5 Presentation这 篇文章介绍了HTML5 的发展历史和它的基本特性

HTML5 Tutorial – Getting Started(HTML 5 入门指导)

How to Build Web Pages With HTML 5(怎样建立HTML 5网页)

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

HTML5 CHEAT SHEETHTML5 有许多标签帮助网页结构化,这能省去以网页中许多div

HTML5 Boilerplates(HTML 5模板)此文介绍了一些你能拿来就用的HTML5 模板文件

HTML 5 canvas – the basics(HTML 5 基础——Canvas)对HTML 5 Canvas使用方法的全面指导

HTML 5 Tutorials(HTML 5 指南)

Implementing HTML5 Drag and Drop: New Premium Tutorial(HTML 5 拖放)HTML5 的一个新特性就是拖放,不过IE早在5.5时代就支持拖放了,而HTML 5 的拖放也是基于IE的。本例将教你如果用拖放实现一个简单的购物车界面。

Preview of HTML 5这是一篇比较老的文章,介绍了HTML5的特性和优点。

The HTML 5 Canvas For Flash Developers : Drawing(HTML 5 Canvas 的画图功能)

The Power of HTML 5 and CSS 3介绍了HTML 5 与CSS3能创造的各种效果。

View Source Tutorial: Sticky Notes With HTML5 and CSS3(HTML5 和CSS3 打造便利贴效果)

webOS HTML5 Database Storage Tutorial(webOS HTML5 数据存储指南)HTML5 的本地存储功能将使数据存储十分简便。

Yes, You Can Use HTML 5 Today!本文介绍了一些现已被支持的HTML 5 特性,对初学者十分有用。

转载请注明出处大前端 » 给网页设计师的30个HTML5学习资源

分享: