HTML5

2012-10-29T06:57:12Z

119.73.67.2：/* 新闻 */

[[Image:html5-badge-h-connectivity-css3-device-graphics-multimedia-performance-semantics-storage.png|right]]

HTML5 不仅仅是一次HTML版本的重大升级，更重要的，它是新一代Web开发标准和[[Open Platform|开放平台]]。

HTML5、[[CSS3]] 和 [[JavaScript]] 是当前Web的热点。

[http://docs.huihoo.com/html/html5-quick-reference-guide-cheat-sheet.pdf HTML5 快速参考指南(速查表)]

收集、整理、制作各类速查表([[cheat sheet]])：有 HTML5、CSS3、JavaScript ...

另一个重要平台：[[Flash]]
Thniikng like that is really amazing

==规范与API==
*[[HTML5/webdatabase|Web SQL Database API]]
*[[HTML5/websockets|WebSocket API]]
*[[HTML5/webstorage|WebStorage API]]
*[[HTML5/workers|Web Workers API]]
*[[HTML5/eventsource|Server-Sent Events API]]
*[[HTML5/communication|Communication API]]
*[[HTML5/file|File API]]
*[[HTML5/drag-and-drop|Drag and Drop]]
*[[HTML5/geolocation|Geolocation API]] 通过[[Wi-Fi]]基站和GPS获取定位信息，更准确。
*[[HTML5/video|video]] & audio (HTML5新元素)
*[[HTML5/canvas|Canvas]] (HTML5新元素)
*[[HTML5/forms|Forms]]
*[[HTML5/parsing|Parsing]]
*[[HTML5/history|HTML5 History API]]
*[[HTML5/sections|HTML5 Sections]]

==浏览器==
[[文件:html5-and-browser.png|right|thumb|HTML5 and Browser]]
[[文件:firefox-62x61.png]][[Firefox]] [[文件:chrome-62x61.png]][[Chrome]] [[文件:ie-62x61.png]][[IE]] [[文件:opera-62x61.png]][[Opera]] [[文件:safari-62x61.png]][[Safari]]

[http://docs.huihoo.com/html/html5-and-browser.pdf HTML5 and Browser] HTML5研究小组成都技术分享沙龙上交流的内容(2011.4.9)

==项目==
*[[HTML5 Reset]]–A Base For HTML5-CSS3 Projects
*[[PhoneGap]]
*[[pywebsocket]]
*[[fxCanvas]]
*[[HTML5/game|HTML5游戏]]
*[[CasualJS]]
*[[melonJS]]
*[[EaselJS]]
*[[BrowserQuest]]

==演示==
*[http://demo.huihoo.com/planetarium/ 行星仪]：一个 (HTML5 + CSS3 + SVG) x JS 的尝试，很酷，支持 [[Firefox/4|Firefox 4]]、[[Chrome]]、[[Safari]] 浏览器。[https://github.com/littleworkshop/planetarium 源码]

==图集==
<gallery widths=100px heights=100px perrow=6>
Image:browser-support-html5.png|浏览器支持
Image:html5-elements.png|HTML5元素周期表
Image:htm4-html5-tag.gif|HTML4和HTML5结构标签
Image:WTF-is-HTML5-en.jpg|HTML5是什么(英文)
Image:WTF-is-HTML5-cn.jpg|HTML5是什么(中文)
Image:HTML5-Visual-Cheat-Sheet.png|HTML5标签速查表
Image:HTML5-Canvas-Cheat-Sheet-v1.1.png|HTML5画布速查表
Image:HTML5-Google-Apple-Microsoft.jpg|HTML5时代
Image:websocket-server-architecture.jpg|WebSocket服务器架构
Image:html5-and-friends.png|HTML5 & Friends
Image:Anatomy-of-a-html5-mobile-app.png|HTML5移动应用解刨图
</gallery>

==链接==
[[Image:HTML5.jpg|right]]
*[http://dev.w3.org/html5/ HTML 5]
*[http://www.whatwg.org/specs/web-apps/current-work/multipage/ HTML Standard]
*[http://www.w3.org/TR/2dcontext/ HTML Canvas 2D Context]
*[http://www.w3.org/TR/html-markup/ HTML: The Markup Language]
*[http://www.w3.org/TR/html-polyglot/ Polyglot Markup: HTML-Compatible XHTML Documents]
*[http://www.w3.org/TR/html-alt-techniques/ HTML5: Techniques for providing useful text alternatives]
*[http://dev.w3.org/html5/vocabulary/ HTML5 Vocabulary]
*[http://dev.w3.org/html5/markup/ HTML5: The Markup Language Reference]
*[http://dev.w3.org/html5/md/ HTML Microdata]
*[http://dev.w3.org/html5/offline-webapps/ Offline Web Applications]
*[http://dev.w3.org/html5/postmsg/ HTML5 Web Messaging]
*[http://dev.w3.org/html5/profiles/drafts/ED-html5-profiles-20100522/ HTML5 Profiles]
*[http://dev.w3.org/html5/pubnotes/ HTML5 Publication Notes]
*[http://dev.w3.org/html5/rdfa/ HTML+RDFa 1.1]: Support for RDFa in HTML4 and HTML5
*[http://dev.w3.org/html5/spec-author-view/ HTML5 Edition for Web Authors]
*[http://dev.w3.org/html5/html-design-principles/ HTML Design Principles]
*[http://dev.w3.org/html5/html-author/ A Web Developer’s Guide to HTML5]
*[http://dev.w3.org/html5/html4-differences/ HTML5 differences from HTML4]
*[http://www.html5rocks.com/ HTML5 Rocks] - A resource for open web HTML5 developers
*[http://html5demos.com/ HTML 5 Demos and Examples]
*[http://docs.huihoo.com/html/ HTML文档]
*[http://www.cn-cuckoo.com/2010/10/21/the-design-of-html5-2151.html HTML5设计原理]、[http://adactio.com/articles/1704/ The Design of HTML5]、[http://docs.huihoo.com/html/design-of-html5.pdf PDF]
*[http://ued.taobao.com/blog/2009/12/17/html5_css3/ 揭秘HTML5和CSS3]
*[http://impactjs.com/ The Awesomest Way to Create Even More Awesome HTML5 Games]
*[http://www.indicthreads.com/3625/html-5-websocket-cracks-the-http-request-response-barrier/ HTML 5 WebSocket cracks the HTTP request-response barrier]
*[http://na.isobar.com/standards/ 前端开发代码标准]，涉及代码兼容性和最佳实践，包含 HTML5、CSS、JavaScript、性能、SEO、代码复审、浏览器测试、Validators、Tools、浏览器 Plugins 等内容，文章从2005年以来一直更新至今，值得收藏和仔细研读。
*[http://html5accessibility.com/ HTML5 accessibility]
*[http://www.enjoyhtml5.com/ Enjoy HTML5]
*[http://html.adobe.com/ Adobe & HTML]

==学习资源==
30 个 HTML5 学习资源，来源：[http://ntt.cc/2010/06/03/30-useful-html5-tutorials-for-web-designers.html Ntt.cc] 翻译：lovelyashes
*[http://www.craftymind.com/2010/04/20/blowing-up-html5-video-and-mapping-it-into-3d-space/ Blowing up HTML5 video and mapping it into 3D space（将HTML5视频吹散并组成3D效果）] 最近我研究了HTML 5中的Canvas 和Video 标签，并发现了一些很酷的特性。其中之一就是Canvas.drawImage() api。此为详细介绍。
*[http://inspectelement.com/tutorials/code-a-backwards-compatible-one-page-portfolio-with-html5-and-css3/ Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3（用HTML5 和CSS3 打造向下兼容的网页）] HTML5更加语义化，使用HTML5 我们不必在网页上布满没有意义的div。它引入了有意义的tag，比如 navigations 和 footers 使代码更有意义也更接近自然语言。
*[http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/ Coding A HTML 5 Layout From Scratch（HTML 5 布局）]，Microformats与HTML5协同使用
*[http://tutorialzine.com/2010/02/html5-css3-website-template/ Coding a CSS3 and HTML5 One Page Website Template（制作CSS3和 HTML5 一页式站点模板）] 这篇文章介绍了如何利用CSS3 和jQuery的新特性制作HTML5 网页模版。 HTML5 仍在完善当中，你也可以选择性的下载XHTML版。
*[http://www.html5trends.com/tutorials/comprehensive-video-tutorial-on-html5/ Comprehensive video tutorial on HTML5（全面的HTML5视频指南）] 这是一个叫Brad Neuberg的工程师制作的HTML5教学视频。
*[http://blog.csdn.net/DL88250/archive/2010/06/10/5660964.aspx Create modern Web sites using HTML5 and CSS3（用HTML5与CSS3打造时尚站点）] 这篇文章介绍了许多HTML5的功能和语法及API，还有CSS3的新的选择器，效果和特性。最后，还将教你如何利用这些新特性开发一个网页。当你读完这篇文章，你就能用HTML5和CSS3开发一个自己的站点啦。
*[http://html5doctor.com/designing-a-blog-with-html5/ Designing a blog with html5（用html5设计博客） ] 许多HTML5特性要结合JavaScript API一起使用，以增加网页的互动性。但仍有一些新元素可让传统的Web1.0页面更加语义化。为了学习这些，我们来看怎样建立一个博客。
*[http://devsnippets.com/article/designing-with-html5-css3.html Designing for the Future with HTML5 and CSS3 : Tutorials and Best Practices（为未来设计：HTML 5 和 CSS3 指南与最佳案例）] 这篇文章将介绍用 HTML5和CSS3搭建的几个最佳站点。
*[http://line25.com/tutorials/design-and-code-a-cool-iphone-app-website-in-html5 Design and Code a Cool iPhone App Website in HTML5（用HTML5设计和实现一个超酷 iPhone App 网站）]
*[http://24ways.org/2009/have-a-field-day-with-html5-forms Have a Field Day with HTML5 Forms（建立HTML5表格）] 这篇文站将教你如果用HTML5和高级CSS技术与最新的CSS3技术建立一个漂亮的表格。
*[http://www.pvmgarage.com/2010/04/touch-the-future-create-an-elegant-website-with-hmtl-5-and-css3/ How To Create A Nice Blog Design Touching The Future(不用photoshop，完成网页设计)]
*[http://net.tutsplus.com/tutorials/html-css-techniques/how-to-make-all-browsers-render-html5-mark-up-correctly-even-ie6/ How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6（怎样让所有浏览器都渲染HTML5标记——即使是IE6）] 这篇文章将教你如何用JavaScript和CSS，使 HTML5页面向下兼容，即使是IE6也不例外。
*[http://sixrevisions.com/web-development/html5-iphone-app/ How to Make an HTML5 iPhone App（制作HTML5 iPhone 应用）] 这是一篇针对iPhone的指导，但是许多技术也可用在兼容HTML5的手机浏览器上。
*[http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/ HTML5 and CSS3: The Techniques You’ll Soon Be Using（HTML5 和CSS3：你将用到的技术）] 这篇文章使用HTML5和CSS3 搭建博客页面。如果你已经熟悉html 和CSS，将很容易跟上。
*[http://www.whatcreative.co.uk/blog/tutorials/html5-for-beginners-use-it-now-its-easy/ HTML5 for Beginners. Use it now, its easy!（HTML5初学指南）] 给所有具有基础HTML知识的初学者的HTML5 入门指南
*[http://apirocks.com/html5/html5.html HTML5 Presentation] 这篇文章介绍了HTML5 的发展历史和它的基本特性
*[http://www.dave-woods.co.uk/index.php/html5-tutorial-getting-started/ HTML5 Tutorial – Getting Started（HTML5 入门指导）]
*[http://www.webmonkey.com/2010/02/building_web_pages_with_html_5/ How to Build Web Pages With HTML5（怎样建立HTML5网页）]
*[http://www.designzzz.com/website-layout-tutorial-html-5-css-3/ Simple Website Layout Tutorial Using HTML5 and CSS3（HTML5和CSS3布局指南）] HTML5最令人期待的新标签包括<header>, <footer>, <aside>, <nav>, <audio>，同时它还包括画图，线下存储数据，拖放等API。页面布局将会更易理解。这里将介绍一个最简单的HTML5 布局页面，用CSS3 设置样式。
*[http://orderedlist.com/our-writing/resources/html-css/structural-tags-in-html5/ Structural Tags in HTML5（HTML5 结构标签）] HTML5 有许多标签帮助网页结构化，这能省去以网页中许多div
*[http://html5doctor.com/html-5-boilerplates/ HTML5 Boilerplates（HTML5模板）] 此文介绍了一些你能拿来就用的HTML5 模板文件
*[http://dev.opera.com/articles/view/html-5-canvas-the-basics/ HTML5 canvas – the basics（HTML5 基础——Canvas）] 对HTML5 Canvas使用方法的全面指导
*[http://html5tutorial.net/category/tutorials HTML5 Tutorials（HTML5 指南）]
*[http://net.tutsplus.com/tutorials/html-css-techniques/implementing-html5-drag-and-drop-new-premium-tutorial/ Implementing HTML5 Drag and Drop: New Premium Tutorial（HTML5 拖放）] HTML5 的一个新特性就是拖放，不过IE早在5.5时代就支持拖放了，而HTML5 的拖放也是基于IE的。本例将教你如果用拖放实现一个简单的购物车界面。
*[http://www.alistapart.com/articles/previewofhtml5/ Preview of HTML5] 这是一篇比较老的文章，介绍了HTML5的特性和优点。
*[http://www.8bitrocket.com/newsdisplay.aspx?newspage=39402 The HTML5 Canvas For Flash Developers : Drawing（HTML5 Canvas 的画图功能）]
*[http://perishablepress.com/press/2009/07/19/power-of-html5-css3/ The Power of HTML5 and CSS3] 介绍了HTML5 与CSS3能创造的各种效果。
*[http://ajaxian.com/archives/view-source-tutorial-sticky-notes-with-html5-and-css3 View Source Tutorial: Sticky Notes With HTML5 and CSS3（HTML5 和CSS3 打造便利贴效果）]
*[http://www.weboshelp.net/getting-started-with-webos/156-palm-webos-html5-database-storage-tutorial webOS HTML5 Database Storage Tutorial（webOS HTML5 数据存储指南）] HTML5 的本地存储功能将使数据存储十分简便。
*[http://articles.sitepoint.com/article/html-5-snapshot-2009 Yes, You Can Use HTML 5 Today!] 本文介绍了一些现已被支持的HTML 5 特性，对初学者十分有用。

Boom saklhaaka boom boom, problem solved.

==书籍==
[[image:iPhone-Anroid-Web-Apps.png|right|thumb]]

*[http://book.huihoo.com/building-iphone-apps-with-html-css-and-javascript/ Building iPhone Apps with HTML, CSS, and JavaScript]
*[http://book.huihoo.com/building-android-apps-with-html-css-and-javascript Building Android Apps with HTML, CSS, and JavaScript]

{{comment}}

[[Category:HTML5]]
[[Category:W3C]]
[[Category:Game]]

开放百科 - 灰狐 - 用户贡献 [zh-cn]

HTML5