HTML5

来自开放百科 - 灰狐
（版本间的差异）
跳转到： 导航, 搜索
小 (→‎链接)
小
 
（未显示5个用户的93个中间版本）
第1行： 第1行：
 +
[[Image:html5-badge-h-connectivity-css3-device-graphics-multimedia-performance-semantics-storage.png|right]]
 +
 
HTML5 不仅仅是一次HTML版本的重大升级，更重要的，它是新一代Web开发标准和[[Open Platform|开放平台]]。
 
HTML5 不仅仅是一次HTML版本的重大升级，更重要的，它是新一代Web开发标准和[[Open Platform|开放平台]]。
  
−
[[Image:html5-badge-h-connectivity-css3-device-graphics-multimedia-performance-semantics-storage.png|right]]
+
[[node.js ecosystem|Node.js, Meteor, React.js, AngularJS, JavaScript 和 HTML5 生态系统]]
 +
 
 +
HTML5、[[CSS3]] 和 [[JavaScript]] 是当前Web的热点。
 +
 
 +
[http://docs.huihoo.com/html/html5-quick-reference-guide-cheat-sheet.pdf HTML5 快速参考指南(速查表)]
 +
 
 +
收集、整理、制作各类速查表([[cheat sheet]])：有 HTML5、CSS3、JavaScript ...
 +
 
 +
另一个重要平台：[[Flash]]
 
==新闻==
 
==新闻==
 
{{SeeWikipedia}}
 
{{SeeWikipedia}}
−
<rss>http://feeds.feedburner.com/html5|short|date|max=10</rss>
+
[[Image:webstandards.png|right]]
 +
<rss>http://www.w3.org/html/planet/atom.xml|short|date|max=10</rss>
  
−
==核心API==
+
==规范与API==
 
*[[HTML5/webdatabase|Web SQL Database API]]
 
*[[HTML5/webdatabase|Web SQL Database API]]
 
*[[HTML5/websockets|WebSocket API]]
 
*[[HTML5/websockets|WebSocket API]]
第13行： 第24行：
 
*[[HTML5/eventsource|Server-Sent Events API]]
 
*[[HTML5/eventsource|Server-Sent Events API]]
 
*[[HTML5/communication|Communication API]]
 
*[[HTML5/communication|Communication API]]
−
*[http://www.w3.org/TR/geolocation-API/ Geolocation API] (W3C规范)
+
*[[HTML5/file|File API]]
 +
*[[HTML5/drag-and-drop|Drag and Drop]]
 +
*[[HTML5/geolocation|Geolocation API]] 通过[[Wi-Fi]]基站和GPS获取定位信息，更准确。
 
*[[HTML5/video|video]] & audio (HTML5新元素)
 
*[[HTML5/video|video]] & audio (HTML5新元素)
 
*[[HTML5/canvas|Canvas]] (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)
 +
 +
==Mobile==
 +
*[http://www.infoq.com/cn/articles/mobile-architecture-html5-javascript 基于HTML5和Javascript的移动应用架构]
 +
[[image:iPhone-Anroid-Web-Apps.png|right|thumb]]
 +
*[http://docs.huihoo.com/apple/wwdc/2013/session_615__integrating_javascript_into_native_applications.pdf Integrating JavaScript into Native Applications]
 +
*[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]
  
 
==项目==
 
==项目==
 +
*[https://github.com/diegocard/awesome-html5 Awesome HTML5] [[image:awesome.png]]
 +
*[https://github.com/dypsilon/frontend-dev-bookmarks Frontend Development] [[image:awesome.png]]
 +
*[[Apache Cordova]]
 
*[[HTML5 Reset]]–A Base For HTML5-CSS3 Projects
 
*[[HTML5 Reset]]–A Base For HTML5-CSS3 Projects
−
*[[PhoneGap]]
 
 
*[[pywebsocket]]
 
*[[pywebsocket]]
 +
*[[fxCanvas]]
 
*[[HTML5/game|HTML5游戏]]
 
*[[HTML5/game|HTML5游戏]]
 +
*[[CasualJS]]
 +
*[[melonJS]]
 +
*[[EaselJS]]
 +
*[[BrowserQuest]]
 +
 +
==编辑器==
 +
*[[Atom editor]]
 +
*[[Nuclide]]
 +
*[[Brackets]]
 +
*[[Visual Studio Code]]
 +
 +
==演示==
 +
*[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>
  
 
==链接==
 
==链接==
−
*[http://dev.w3.org/html5/spec/ HTML5规范]
+
[[Image:HTML5.jpg|right]]
 +
*[http://dev.w3.org/html5/ HTML 5]
 +
*[http://www.whatwg.org/specs/web-apps/current-work/multipage/ HTML Standard]
 +
*[https://platform.html5.org/ The Web platform: Browser technologies]
 +
*[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/vocabulary/ HTML5 Vocabulary]
−
*[http://dev.w3.org/html5/markup-spec/ HTML5: The Markup Language]
+
*[http://dev.w3.org/html5/markup/ HTML5: The Markup Language Reference]
−
*[http://dev.w3.org/html5/markup/ HTML: The Markup Language Reference]
+
 
*[http://dev.w3.org/html5/md/ HTML Microdata]
 
*[http://dev.w3.org/html5/md/ HTML Microdata]
 
*[http://dev.w3.org/html5/offline-webapps/ Offline Web Applications]
 
*[http://dev.w3.org/html5/offline-webapps/ Offline Web Applications]
第41行： 第108行：
 
*[http://html5demos.com/ HTML 5 Demos and Examples]
 
*[http://html5demos.com/ HTML 5 Demos and Examples]
 
*[http://docs.huihoo.com/html/ HTML文档]
 
*[http://docs.huihoo.com/html/ HTML文档]
−
*[http://www.cn-cuckoo.com/2010/10/21/the-design-of-html5-2151.html HTML5设计原理]
+
*[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://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 应用程序]
  
 
{{comment}}
 
{{comment}}

2016年7月6日 (三) 14:41的最后版本

Html5-badge-h-connectivity-css3-device-graphics-multimedia-performance-semantics-storage.png

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

Node.js, Meteor, React.js, AngularJS, JavaScript 和 HTML5 生态系统

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

HTML5 快速参考指南(速查表)

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

另一个重要平台：Flash

目录

[编辑] 新闻

Wikipedia-35x35.png 您可以在Wikipedia上了解到此条目的英文信息 HTML5 Thanks, Wikipedia.
Webstandards.png

自http://www.w3.org/html/planet/atom.xml加载RSS失败或RSS源被墙

[编辑] 规范与API

[编辑] 浏览器

HTML5 and Browser

Firefox-62x61.pngFirefox Chrome-62x61.pngChrome Ie-62x61.pngIE Opera-62x61.pngOpera Safari-62x61.pngSafari

HTML5 and Browser HTML5研究小组成都技术分享沙龙上交流的内容(2011.4.9)

[编辑] Mobile

IPhone-Anroid-Web-Apps.png

[编辑] 项目

[编辑] 编辑器

[编辑] 演示

[编辑] 图集

  • 浏览器支持

  • HTML5元素周期表

  • HTML4和HTML5结构标签

  • HTML5是什么(英文)

  • HTML5是什么(中文)

  • HTML5标签速查表

  • HTML5画布速查表

  • HTML5时代

  • WebSocket服务器架构

  • HTML5 & Friends

  • HTML5移动应用解刨图

[编辑] 链接

HTML5.jpg

[编辑] 学习资源

30 个 HTML5 学习资源，来源：Ntt.cc 翻译：lovelyashes

[编辑] 文档

Comment-32x32.png

<discussion>characters_max=300</discussion>

来自“http://wiki.huihoo.com/wiki/?title=HTML5&oldid=139369”
分享您的观点
个人工具
名字空间

变换
操作
导航
工具箱