HTML5 教學範例

woff

關於 HTML5 教學, 以下30多個資源可幫你開始學習HTML5。


Blowing up HTML5 video and mapping it into 3D
space（將HTML5視訊吹散並組成3D效果）
最近我研究了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 使語法更有意義也更接近自然語言。
Coding A HTML 5 Layout From Scratch（HTML 5
佈局）
這篇文章將教你

• 用原有技術將元素放置在特定位置
• 最新的技術潮流
• Microformats與HTML5協同使用
• 介紹HTML5與CSS3的新特性
  

Coding a CSS3 and HTML5 One Page Website
Template（製作CSS3和 HTML5 一頁式網站樣板）
這篇文章介紹了如何利用CSS3 和jQuery的新特性製作HTML5 網頁模版。 HTML5
仍在完善當中，你也可以選擇性的下載XHTML版。

Comprehensive video tutorial on
HTML5（全面的HTML5視訊指南）
這是一個叫Brad Neuberg的工程師製作的HTML5教學視訊。

Create modern Web sites using HTML5 and
CSS3（用HTML5與CSS3打造時尚網站）
這篇文章介紹了許多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 網站）

[/url]
[url=http://24ways.org/2009/have-a-field-day-with-html5-forms]Have a Field Day with HTML5 Forms（建立HTML 5表格）
這篇文站將教 你 如果用HTML 5 和進階CSS技術與最新的CSS3技術建立一個漂亮的表格。

How To Create A Nice Blog Design Touching The
Future(不用photoshop，完成網頁設計)

[/url]
[url=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也不例外。

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，將很容易跟上。

HTML5 for Beginners. Use it now, its easy!（HTML
5初學指南）
給所有具有基礎HTML知識的初學者的HTML 5 入門指南

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

HTML5 Tutorial – Getting Started（HTML 5 入門指導）

[/url]
[url=http://www.webmonkey.com/2010/02/building_web_pages_with_html_5/]How to Build Web Pages With HTML 5（怎樣建立HTML
5網頁）

[/url]
[url=http://www.designzzz.com/website-layout-tutorial-html-5-css-3/]Simple Website Layout Tutorial Using HTML 5 and
CSS 3（HTML5和CSS3佈局指南）
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 指南）

[/url]
[url=http://net.tutsplus.com/tutorials/html-css-techniques/implementing-html5-drag-and-drop-new-premium-tutorial/]Implementing HTML5 Drag and Drop: New Premium
Tutorial（HTML 5 拖放）
HTML5 的一個新特性就是拖放，不過IE早在5.5時代就支援拖放了，而HTML 5
的拖放也是基於IE的。本例將教你如果用拖放實現一個簡單的購物車界面。

Preview of HTML 5
這是一篇比較老的文章，介紹了HTML5的特性和優點。

The HTML 5 Canvas For Flash Developers :
Drawing（HTML 5 Canvas 的畫圖功能）

[/url]
[url=http://perishablepress.com/press/2009/07/19/power-of-html5-css3/]The Power of HTML 5 and CSS 3
介紹了HTML 5 與CSS3能創造的各種效果。

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

[/url]
[url=http://www.weboshelp.net/getting-started-with-webos/156-palm-webos-html5-database-storage-tutorial]webOS HTML5 Database Storage Tutorial（webOS HTML5
資料存儲指南）
HTML5 的本機存儲功能將使資料存儲十分簡便。

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

原文出處:http://my-web-design.blogspot.com/2010/06/30html5.html

16743532

暈死也不多加點分  

nicoleamy

(*^__^*) 嘻嘻……   

kobebeef

十幾年前和現在的ccs變化好大
已經跟不上時代了
無限感嘆阿

cbzdy

HOHO~~~~~~











bjcars.net