ihao 2011-1-11 13:21
html5 教學
[font=Verdana]早在幾個星期前，Adobe就發佈了Dreamweaver CS5 HTML5 Pack的預覽版下載。眾所周知，HTML5在網際網路領域掀起了一場大論戰，並讓Adobe的日子很難熬。[b]HTML5[/b]致 力於為前端開發提供全面的標記語 言。
以下30多個資源可幫你開始學習[b]HTML5[/b]。
[/font][font=Verdana]
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****[url]www.craftymind.com/2010/04/20/blowing-up-html5-video-and-mapping-it-into-3d-space/[/url]][color=#286ea0]Blowing up HTML5 video and mapping it into 3D space（將HTML5視訊吹散並組成3D效果）[/color][/url]最近我研究了HTML 5中的Canvas 和Video 標籤，並發現了一些很酷的特性。其中之一就是Canvas.drawImage() api。此為詳細介紹。
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****inspectelement.com/tutorials/code-a-backwards-compatible-one-page-portfolio-with-html5-and-css3/][color=#286ea0]Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3（用HTML5 和CSS3 打造向下相容的網頁）[/color][/url]HTML5更加語義化，使用HTML5 我們不必在網頁上佈滿沒有意義的div。它引入了有意義的tag，比如 navigations 和 footers 使語法更有意義也更接近自然語言。
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****[url]www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/[/url]][color=#286ea0]Coding A HTML 5 Layout From Scratch（HTML 5 佈局）[/color][/url]
這 篇文章將教你
[/font]
[list][font=Verdana][*]用原有技術將元素放置在特定位置[*]最新的技術潮流[*]Microformats與HTML5協同使用[*]介紹HTML5與CSS3的新特性 [/font][/list][font=Verdana][url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****tutorialzine.com/2010/02/html5-css3-website-template/][color=#286ea0]Coding a CSS3 and HTML5 One Page Website Template（製作CSS3和 HTML5 一頁式網站樣板）[/color][/url]這篇文章介紹了如何利用CSS3 和jQuery的新特性製作HTML5 網頁模版。 HTML5 仍在完善當中，你也可以選擇性的下載XHTML版。
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****[url]www.html5trends.com/tutorials/comprehensive-video-tutorial-on-html5/[/url]][color=#286ea0]Comprehensive video tutorial on HTML5（全面的HTML5視訊指南）[/color][/url]這 是一個叫Brad Neuberg的工程師製作的HTML5教學視訊。
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****[url]www.ibm.com/developerworks/web/tutorials/wa-html5/[/url]][color=#286ea0]Create modern Web sites using HTML5 and CSS3（用HTML5與CSS3打造時尚網站）[/color][/url]這篇文章介紹了許多HTML5的功能和語法及API，還有CSS3的新的選擇器，效果和特性。最 後， 還將教你如何利用這些新特性開發一個網頁。當你讀完這篇文章，你就能用HTML5和CSS3開發一個自己的網站啦。
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****html5doctor.com/designing-a-blog-with-html5/][color=#286ea0]Designing a blog with html5（用html5設計部落格）[/color][/url]許多HTML5 特性要結合JavaScript API一起使用，以增加網頁的互動性。但仍有一些新元素可讓傳統的Web1.0頁面更加語義化。為了學習這些，我們來看怎樣建立一個部落格。
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****devsnippets.com/article/designing-with-html5-css3.html][color=#286ea0]Designing for the Future with HTML5 and CSS3 : Tutorials and Best Practices（為未來設計：HTML 5 和 CSS3 指南與最佳案例）[/color][/url]這篇文章將介紹用 HTML5和CSS3搭建的幾個最佳網站。
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****line25.com/tutorials/design-and-code-a-cool-iphone-app-website-in-html5][color=#286ea0]Design and Code a Cool iPhone App Website in HTML5（用HTML5設計和實現一個超酷 iPhone App 網站）[/color][/url]
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****24ways.org/2009/have-a-field-day-with-html5-forms][color=#286ea0]Have a Field Day with HTML5 Forms（建立HTML 5表格）[/color][/url]這篇文站將教 你 如果用HTML 5 和進階CSS技術與最新的CSS3技術建立一個漂亮的表格。
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****[url]www.pvmgarage.com/2010/04/touch-the-future-create-an-elegant-website-with-hmtl-5-and-css3/[/url]][color=#286ea0]How To Create A Nice Blog Design Touching The Future(不用photoshop，完成網頁設計)[/color][/url]
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****net.tutsplus.com/tutorials/html-css-techniques/how-to-make-all-browsers-render-html5-mark-up-correctly-even-ie6/][color=#286ea0]How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6（怎樣讓所有瀏覽器都渲染HTML5標記——即使是IE6）[/color][/url]這篇文章將教你如何用JavaScript和CSS，使 HTML5頁面向下相容，即使是IE6也不例外。
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****sixrevisions.com/web-development/html5-iphone-app/][color=#286ea0]How to Make an HTML5 iPhone App（製作HTML5 iPhone 應用）[/color][/url]這 是 一篇針對iPhone的指導，但是許多技術也可用在相容HTML5的手機瀏覽器上。
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/][color=#286ea0]HTML 5 and CSS 3: The Techniques You』ll Soon Be Using（HTML 5 和CSS 3：你將用到的技術）[/color][/url]這篇文章使用HTML 5和CSS 3 搭建部落格頁面。如果你已經熟悉html 和CSS，將很容易跟上。
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****[url]www.whatcreative.co.uk/blog/tutorials/html5-for-beginners-use-it-now-its-easy/[/url]][color=#286ea0]HTML5 for Beginners. Use it now, its easy!（HTML 5初學指南）[/color][/url]給 所有具有基礎HTML知識的初學者的HTML 5 入門指南
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****apirocks.com/html5/html5.html][color=#286ea0]HTML5 Presentation[/color][/url]這篇文章介紹了HTML5 的發展歷史和它的基本特性
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****[url]www.dave-woods.co.uk/index.php/html5-tutorial-getting-started/[/url]][color=#286ea0]HTML5 Tutorial – Getting Started（HTML 5 入門指導）[/color][/url]
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****[url]www.webmonkey.com/2010/02/building_web_pages_with_html_5/[/url]][color=#286ea0]How to Build Web Pages With HTML 5（怎樣建立HTML 5網頁）[/color][/url]
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****[url]www.designzzz.com/website-layout-tutorial-html-5-css-3/[/url]][color=#286ea0]Simple Website Layout Tutorial Using HTML 5 and CSS 3（HTML5和CSS3佈局指南）[/color][/url]HTML5最令人期待的新標籤包括[/font][font=Verdana]HTML5最令人期待的新標籤包括header, footer, aside, nav,audio，同時它還包括畫圖，線下存儲資料，拖放等API。頁面佈局將會更易理解。這裡將介紹一個最簡單的HTML 5 佈局頁面，用CSS3 設定樣式。最終結果如下
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****orderedlist.com/our-writing/resources/html-css/structural-tags-in-html5/][color=#286ea0]Structural Tags in HTML5（HTML 5 結構標籤）[/color][/url]HTML5 有許多標籤幫助網頁結構化，這能省去以網頁中許多div
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****html5doctor.com/html-5-boilerplates/][color=#286ea0]HTML5 Boilerplates（HTML 5樣板）[/color][/url]此文介紹了一些你能拿來就用的HTML5 樣板檔案
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****dev.opera.com/articles/view/html-5-canvas-the-basics/][color=#286ea0]HTML 5 canvas – the basics（HTML 5 基礎——Canvas）[/color][/url]對HTML 5 Canvas使用方法的全面指導
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****html5tutorial.net/category/tutorials][color=#286ea0]HTML 5 Tutorials（HTML 5 指南）[/color][/url]
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****net.tutsplus.com/tutorials/html-css-techniques/implementing-html5-drag-and-drop-new-premium-tutorial/][color=#286ea0]Implementing HTML5 Drag and Drop: New Premium Tutorial（HTML 5 拖放）[/color][/url]HTML5 的一個新特性就是拖放，不過IE早在5.5時代就支援拖放了，而HTML 5 的拖放也是基於IE的。本例將教你如果用拖放實現一個簡單的購物車界面。
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****[url]www.alistapart.com/articles/previewofhtml5/[/url]][color=#286ea0]Preview of HTML 5[/color][/url]這是一篇比較老的文章，介紹了HTML5的特性和優點。
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****[url]www.8bitrocket.com/newsdisplay.aspx%5C%5C%5C%5Cnewspage=39402[/url]][color=#286ea0]The HTML 5 Canvas For Flash Developers : Drawing（HTML 5 Canvas 的畫圖功能）[/color][/url]
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****perishablepress.com/press/2009/07/19/power-of-html5-css3/][color=#286ea0]The Power of HTML 5 and CSS 3[/color][/url]介紹了HTML 5 與CSS3能創造的各種效果。
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****ajaxian.com/archives/view-source-tutorial-sticky-notes-with-html5-and-css3][color=#286ea0]View Source Tutorial: Sticky Notes With HTML5 and CSS3（HTML5 和CSS3 打造便利貼效果）[/color][/url]
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****[url]www.weboshelp.net/getting-started-with-webos/156-palm-webos-html5-database-storage-tutorial[/url]][color=#286ea0]webOS HTML5 Database Storage Tutorial（webOS HTML5 資料存儲指南）[/color][/url]HTML5 的本機存儲功能將使資料存儲十分簡便。
[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****articles.sitepoint.com/article/html-5-snapshot-2009][color=#286ea0]Yes, You Can Use HTML 5 Today![/color][/url]本文介紹了一些現已被支援的HTML 5 特性，對初學者十分有用。[/font]