發新話題
打印

html5 教學

html5 教學

早在幾個星期前,Adobe就發佈了Dreamweaver CS5 HTML5 Pack的預覽版下載。眾所周知,HTML5在網際網路領域掀起了一場大論戰,並讓Adobe的日子很難熬。HTML5致 力於為前端開發提供全面的標記語 言。

以下30多個資源可幫你開始學習HTML5


[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****www.craftymind.com/2010/04/20/bl ... g-it-into-3d-space/]Blowing up HTML5 video and mapping it into 3D space(將HTML5視訊吹散並組成3D效果)[/url]最近我研究了HTML 5中的Canvas 和Video 標籤,並發現了一些很酷的特性。其中之一就是Canvas.drawImage() api。此為詳細介紹。

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3(用HTML5 和CSS3 打造向下相容的網頁)HTML5更加語義化,使用HTML5 我們不必在網頁上佈滿沒有意義的div。它引入了有意義的tag,比如 navigations 和 footers 使語法更有意義也更接近自然語言。

[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****www.smashingmagazine.com/2009/08 ... ayout-from-scratch/]Coding A HTML 5 Layout From Scratch(HTML 5 佈局)[/url]
這 篇文章將教你

  • 用原有技術將元素放置在特定位置
  • 最新的技術潮流
  • Microformats與HTML5協同使用
  • 介紹HTML5與CSS3的新特性
Coding a CSS3 and HTML5 One Page Website Template(製作CSS3和 HTML5 一頁式網站樣板)這篇文章介紹了如何利用CSS3 和jQuery的新特性製作HTML5 網頁模版。 HTML5 仍在完善當中,你也可以選擇性的下載XHTML版。

[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****www.html5trends.com/tutorials/co ... -tutorial-on-html5/]Comprehensive video tutorial on HTML5(全面的HTML5視訊指南)[/url]這 是一個叫Brad Neuberg的工程師製作的HTML5教學視訊。

[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****www.ibm.com/developerworks/web/tutorials/wa-html5/]Create modern Web sites using HTML5 and CSS3(用HTML5與CSS3打造時尚網站)[/url]這篇文章介紹了許多HTML5的功能和語法及API,還有CSS3的新的選擇器,效果和特性。最 後, 還將教你如何利用這些新特性開發一個網頁。當你讀完這篇文章,你就能用HTML5和CSS3開發一個自己的網站啦。

Designing a blog with html5(用html5設計部落格)許多HTML5 特性要結合JavaScript API一起使用,以增加網頁的互動性。但仍有一些新元素可讓傳統的Web1.0頁面更加語義化。為了學習這些,我們來看怎樣建立一個部落格。

Designing for the Future with HTML5 and CSS3 : Tutorials and Best Practices(為未來設計:HTML 5 和 CSS3 指南與最佳案例)這篇文章將介紹用 HTML5和CSS3搭建的幾個最佳網站。

Design and Code a Cool iPhone App Website in HTML5(用HTML5設計和實現一個超酷 iPhone App 網站)

Have a Field Day with HTML5 Forms(建立HTML 5表格)這篇文站將教 你 如果用HTML 5 和進階CSS技術與最新的CSS3技術建立一個漂亮的表格。

[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****www.pvmgarage.com/2010/04/touch- ... th-hmtl-5-and-css3/]How To Create A Nice Blog Design Touching The Future(不用photoshop,完成網頁設計)[/url]

How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6(怎樣讓所有瀏覽器都渲染HTML5標記——即使是IE6)這篇文章將教你如何用JavaScript和CSS,使 HTML5頁面向下相容,即使是IE6也不例外。

How to Make an HTML5 iPhone App(製作HTML5 iPhone 應用)這 是 一篇針對iPhone的指導,但是許多技術也可用在相容HTML5的手機瀏覽器上。

HTML 5 and CSS 3: The Techniques You』ll Soon Be Using(HTML 5 和CSS 3:你將用到的技術)這篇文章使用HTML 5和CSS 3 搭建部落格頁面。如果你已經熟悉html 和CSS,將很容易跟上。

[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****www.whatcreative.co.uk/blog/tuto ... se-it-now-its-easy/]HTML5 for Beginners. Use it now, its easy!(HTML 5初學指南)[/url]給 所有具有基礎HTML知識的初學者的HTML 5 入門指南

HTML5 Presentation這篇文章介紹了HTML5 的發展歷史和它的基本特性

[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****www.dave-woods.co.uk/index.php/html5-tutorial-getting-started/]HTML5 Tutorial – Getting Started(HTML 5 入門指導)[/url]

[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****www.webmonkey.com/2010/02/building_web_pages_with_html_5/]How to Build Web Pages With HTML 5(怎樣建立HTML 5網頁)[/url]

[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****www.designzzz.com/website-layout-tutorial-html-5-css-3/]Simple Website Layout Tutorial Using HTML 5 and CSS 3(HTML5和CSS3佈局指南)[/url]HTML5最令人期待的新標籤包括
HTML5最令人期待的新標籤包括header, footer, aside, nav,audio,同時它還包括畫圖,線下存儲資料,拖放等API。頁面佈局將會更易理解。這裡將介紹一個最簡單的HTML 5 佈局頁面,用CSS3 設定樣式。最終結果如下

Structural Tags in HTML5(HTML 5 結構標籤)HTML5 有許多標籤幫助網頁結構化,這能省去以網頁中許多div

HTML5 Boilerplates(HTML 5樣板)此文介紹了一些你能拿來就用的HTML5 樣板檔案

HTML 5 canvas – the basics(HTML 5 基礎——Canvas)對HTML 5 Canvas使用方法的全面指導

HTML 5 Tutorials(HTML 5 指南)

Implementing HTML5 Drag and Drop: New Premium Tutorial(HTML 5 拖放)HTML5 的一個新特性就是拖放,不過IE早在5.5時代就支援拖放了,而HTML 5 的拖放也是基於IE的。本例將教你如果用拖放實現一個簡單的購物車界面。

[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****www.alistapart.com/articles/previewofhtml5/]Preview of HTML 5[/url]這是一篇比較老的文章,介紹了HTML5的特性和優點。

[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****www.8bitrocket.com/newsdisplay.aspx%5C%5C%5C%5Cnewspage=39402]The HTML 5 Canvas For Flash Developers : Drawing(HTML 5 Canvas 的畫圖功能)[/url]

The Power of HTML 5 and CSS 3介紹了HTML 5 與CSS3能創造的各種效果。

View Source Tutorial: Sticky Notes With HTML5 and CSS3(HTML5 和CSS3 打造便利貼效果)

[url=http://bbs.flash2u.com.tw/PriveLink.asp?s=****www.weboshelp.net/getting-starte ... se-storage-tutorial]webOS HTML5 Database Storage Tutorial(webOS HTML5 資料存儲指南)[/url]HTML5 的本機存儲功能將使資料存儲十分簡便。

Yes, You Can Use HTML 5 Today!本文介紹了一些現已被支援的HTML 5 特性,對初學者十分有用。

FB臉書網友討論

TOP

發新話題