给网页设计师的30个HTML5学习资源 - Web前端 - ITeye资讯
相关知识库：
早在几个星期前，Adobe就发布了Dreamweaver CS5 HTML5
Pack的预览版下载。众所周知，HTML5在互联网领域掀起了一场大论战，并让Adobe的日子很难熬。HTML5致力于为前端开发提供全面的标记语
言。以下30多个资源可帮你开始学习HTML5。
最近我研究了HTML 5中的Canvas 和Video 标签，并发现了一些很酷的特性。其中之一就是Canvas.drawImage() api。此为详细介绍。
HTML5更加语义化，使用HTML5 我们不必在网页上布满没有意义的div。它引入了有意义的tag，比如 navigations 和 footers 使代码更有意义也更接近自然语言。
这篇文章将教你
用原有技术将元素放置在特定位置
最新的技术潮流
Microformats与HTML5协同使用
介绍HTML5与CSS3的新特性
这篇文章介绍了如何利用CSS3 和jQuery的新特性制作HTML5 网页模版。 HTML5 仍在完善当中，你也可以选择性的下载XHTML版。
这 是一个叫Brad Neuberg的工程师制作的HTML5教学视频。
这篇文章介绍了许多HTML5的功能和语法及API，还有CSS3的新的选择器，效果和特性。最 后， 还将教你如何利用这些新特性开发一个网页。当你读完这篇文章，你就能用HTML5和CSS3开发一个自己的站点啦。
许多HTML5 特性要结合JavaScript API一起使用，以增加网页的互动性。但仍有一些新元素可让传统的Web1.0页面更加语义化。为了学习这些，我们来看怎样建立一个博客。
这篇文章将介绍用 HTML5和CSS3搭建的几个最佳站点。
这篇文站将教你 如果用HTML 5 和高级CSS技术与最新的CSS3技术建立一个漂亮的表格。
这篇文章将教你如何用JavaScript和CSS，使 HTML5页面向下兼容，即使是IE6也不例外。
这是 一篇针对iPhone的指导，但是许多技术也可用在兼容HTML5的手机浏览器上。
这篇文章使用HTML 5和CSS 3 搭建博客页面。如果你已经熟悉html 和CSS，将很容易跟上。
给 所有具有基础HTML知识的初学者的HTML 5 入门指南
这篇文章介绍了HTML5 的发展历史和它的基本特性
最令人期待的新标签包括&header&, &footer&, &aside&, &nav&,
&audio&，同时它还包括画图，线下存储数据，拖放等API。页面布局将会更易理解。这里将介绍一个最简单的HTML 5
布局页面，用CSS3 设置样式。最终结果如下
HTML5 有许多标签帮助网页结构化，这能省去以网页中许多div
此文介绍了一些你能拿来就用的HTML5 模板文件
对HTML 5 Canvas使用方法的全面指导
HTML5 的一个新特性就是拖放，不过IE早在5.5时代就支持拖放了，而HTML 5 的拖放也是基于IE的。本例将教你如果用拖放实现一个简单的购物车界面。
这是一篇比较老的文章，介绍了HTML5的特性和优点。
介绍了HTML 5 与CSS3能创造的各种效果。
HTML5 的本地存储功能将使数据存储十分简便。
本文介绍了一些现已被支持的HTML 5 特性，对初学者十分有用。
文章来源：NTT.cc
翻译：lovelyashes温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
努力做好自己....
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'学习HTML5资源指南 （上）',
blogAbstract:'虽然HTML5规范还没有完整化，如果要真正完善，可能要到2022年（可能会在2014年定稿）。很多设计师已经对HTML5有了强烈的好奇力 量。而部分浏览器也开放了一些使用标准来实现设计师的想法。HTML5开辟了网页设计和网络应用开发的新篇章，而之前这些只能通过JavaScript和 Flash来实现。下面我们分享收集了大量的HTML5的学习资料，包括教程、框架、示例等。欢迎在留言处分享你的感受。基础教程
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}[摘要：1 H5FullscreenPage
/lvmingFullscreenPage
基于zepto.js或jquery.js的构建转动动绘页里的框架，支撑PC战mobile,支撑盒动绘后果。
1 H5FullscreenPage
/lvmingFullscreenPage
基于zepto.js或者jquery.js的构建滚动动画页面的框架，支持PC和mobile,支持音乐盒动画效果。
2 h5slider
/Jinjiang/h5slides
基于HTML5的幻灯片编辑、播放、控制的全套方案
3 html5 boilerplate
/h5bp/html5-boilerplate
一个快速打包好的前端站点框架模板，包括基本结构，基本文件和说明
4 html5 device mockup
/pixelsign/html5-device-mockups
不同设备的显示效果，包括、平板、PC
5 interactive html5
/yyx990803/HTML5-Clear-v2
基于html5的交互体验示例
6 imgly sdk
/imgly/imgly-sdk-html5
功能全面的为web和mobiel打造的编辑SDK
7 html5 desktop notification
/ttsvetko/HTML5-Desktop-Notifications
支持、Safari、、IE9+的桌面消息提醒插件
8 genetic cars
/red42/HTML5_Genetic_Cars
一个有趣的基于canvas的的动画小车，可以调节参数
9 html5 video
/paypal/accessible-html5-video-player
轻量级的html5 视频播放器，由paypal团队打造
10 html5 draw app
/williammalone/Simple-HTML5-Drawing-App
基于canvas和js实现的画布效果，有详细的解释实现步骤}