20121019-HTML5
•
1 gefällt mir•558 views
2012/10/19 成功大學 資訊工程學系 網頁應用及程式設計 Web Applications and Programming 網頁
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie 20121019-HTML5
Ähnlich wie 20121019-HTML5 (20)
Mehr von Chih-Hsuan Kuo
Mehr von Chih-Hsuan Kuo (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
20121019-HTML5
- 2. HTML 5 當前版本 HTML 4.01 HTML 5：含 HTML、CSS 以及 Javascript 尚未正式推出，大多數主流瀏覽器支援部份功 能，至於 IE... HTML5 & CSS3 Support
- 3. new tags section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr
- 4. new tag section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr
- 5. new tag 標題 首頁 文章彙整 關於作者 其他 部落格文章 版權宣告
- 6. new tag <div></div> <div></div> <div></div> <div></div>
- 7. new tag <header></header> <nav></nav> <section></section> <footer></footer>
- 8. new tag <header></header> <div></div> 網頁更富有語意！ <section></section> <footer></footer>
- 11. removed tags acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt
- 12. removed tags acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt
- 15. 動畫製作 - Canvas API - CSS 3 - Javascript - http://bit.ly/QnNJ14 - http://bit.ly/QnNxyW - http://bit.ly/TZZ9yd
- 17. Powerful CSS 3 圓角、旋轉、變形、移動、漸變... - http://bit.ly/U002qB - http://bit.ly/QnP5J3 - http://bit.ly/QnP5sE - http://bit.ly/U00ULU - http://bit.ly/U00kh9
- 18. More... HTML5 - Wikipedia HTML5 - Google 搜尋
- 19. something about HTML 瀏覽器支援不嚴謹的 HTML 語法 <html> <head> </head> <body> <ol> <li>資訊週加油阿！ </li> <li>傳情品可以幫我打折嗎？ </li> <li>不然傳給我也是 OK 的 :) </ol> </body> </html>
- 20. something about HTML 瀏覽器支援不嚴謹的 HTML 語法 <html> <head> </head> <body> <ol> <li>資訊週加油阿！ </li> <li>傳情品可以幫我打折嗎？ </li> <li>不然傳給我也是 OK 的 :) </li> </ol> </body> </html>
- 21. something about HTML 01: <html> 02: <head> 03: </head> 04: <body> 05: <table border=1> 06: <tr> 07: <td> r1,c1 <td> 08: <td> r1,c2 </td> 09: </tr> 10: <tr> 11: <td> r2,c1 </td> 12: <td> r2,c2 </td> 13: </tr> 14: </table> 15: </body> 16: </html>
- 23. something about HTML 01: <html> 02: <head> 03: </head> 04: <body> 05: <table border=1> 06: <tr> 07: <td> r1,c1 <td> 08: <td> r1,c2 </td> 09: </tr> 10: <tr> 11: <td> r2,c1 </td> 12: <td> r2,c2 </td> 13: </tr> 14: </table> 15: </body> 16: </html>
- 24. something about HTML 01: <html> 02: <head> 03: </head> 04: <body> 05: <table border=1> 06: <tr> 07: <td> r1,c1 </td><td></td> 08: <td> r1,c2 </td> 09: </tr> 10: <tr> 11: <td> r2,c1 </td> 12: <td> r2,c2 </td> 13: </tr> 14: </table> 15: </body> 16: </html>
- 25. About browser How browsers work ［译］How browsers work
- 27. Browser
- 28. IE is magic 看到的都跟別人不一樣！ 資料來源：http://engt.co/SZWheA
- 29. IE is magic IE only!!! 只有 IE 看得到！ WTF...
- 30. Debuger 右鍵 → 檢查元素 (inspect element)
- 32. Firefox 3D view
- 33. a little tips of coding 縮排
- 34. Indentation 01: <html> 01: <html> 02: <head> 02: <head> 03: </head> 03: </head> 04: <body> 04: <body> 05: <table border=1> 05: <table border=1> 06: <tr> 06: <tr> 07: <td> r1,c1 07: <td> r1,c1 </td><td></td> </td><td></td> 08: <td> r1,c2 </td> 08: <td> r1,c2 </td> 09: </tr> 09: </tr> 10: <tr> 10: <tr> 11: <td> r2,c1 </td> 11: <td> r2,c1 </td> 12: <td> r2,c2 </td> 12: <td> r2,c2 </td> 13: </tr> 13: </tr> 14: </table> 14: </table> 15: </body> 15: </body> 16: </html> 16: </html>
- 35. a little tips of coding 編輯器
- 36. Editor Notepad++ (Windows Only) (g)Vim (Cross-platform) Gedit (Cross-platform) TextMate (Mac OS X) Coda (Mac OS X)
- 37. a little tips of coding 行號 語法高亮標記 其他...
- 38. Syntax Highlight 01: <html> 01: <html> 02: <head> 02: <head> 03: </head> 03: </head> 04: <body> 04: <body> 05: <table border=1> 05: <table border=1> 06: <tr> 06: <tr> 07: <td> r1,c1 07: <td> r1,c1 </td> </td> 08: <td> r1,c2 08: <td> r1,c2 </td> </td> 09: </tr> 09: </tr> 10: <tr> 10: <tr> 11: <td> r2,c1 11: <td> r2,c1 </td> </td> 12: <td> r2,c2 12: <td> r2,c2 </td> </td> 13: </tr> 13: </tr> 14: </table> 14: </table> 15: </body> 15: </body> 16: </html> 16: </html>
- 39. Zen Coding zen-coding - HTML 很冗 - 開了還要關 - 角括號裡面還要塞一些 attribute What The F*ck!!!!
- 40. Zen Coding div#page>div.logo+ul#navigation>li*5>a <div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> 影片：http://vimeo.com/7405114
- 41. End