HTML5

来自开放百科 - 灰狐
(版本间的差异)
跳转到: 导航, 搜索
(文档库)
(peGRBzcFzxNdioIcr)
第1行: 第1行:
[[Image:html5-badge-h-connectivity-css3-device-graphics-multimedia-performance-semantics-storage.png|right]]
+
Your post has moved the debate fraowrd. Thanks for sharing!
 
+
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]]
+
==新闻==
+
{{SeeWikipedia}}
+
[[Image:webstandards.png|right]]
+
<rss>http://www.w3.org/html/planet/atom.xml|short|date|max=10</rss>
+
 
+
==规范与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 特性,对初学者十分有用。
+
 
+
==文档==
+
*[http://docs.huihoo.com/jboss/jbossworld/2011/HTML5-for-the-Java-Developer.pdf HTML5 for the Java Developer]
+
*[http://www.ibm.com/developerworks/cn/xml/x-html5mobile1/ 使用 HTML 5 创建移动 Web 应用程序,第 1 部分: 联合使用 HTML 5、地理定位 API 和 Web 服务来创建移动混搭程序]
+
*[http://www.ibm.com/developerworks/cn/xml/x-html5mobile2/ 使用 HTML 5 创建移动 Web 应用程序,第 2 部分: 使用 HTML 5 开启移动 Web 应用程序的本地存储]
+
*[http://www.ibm.com/developerworks/cn/xml/x-html5mobile3/ 使用 HTML 5 创建移动 Web 应用程序,第 3 部分: 使用 HTML 5 支持移动 Web 应用程序离线工作]
+
*[http://www.ibm.com/developerworks/cn/xml/x-html5mobile4/ 使用 HTML 5 创建移动 Web 应用程序,第 4 部分: 使用 Web Workers 来加速您的移动 Web 应用程序]
+
 
+
==书籍==
+
[[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]]
+

2012年10月27日 (六) 11:49的版本

Your post has moved the debate fraowrd. Thanks for sharing!

分享您的观点
个人工具
名字空间

变换
操作
导航
工具箱