Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

20121019-HTML5

731 views

Published on

2012/10/19
成功大學
資訊工程學系
網頁應用及程式設計 Web Applications and Programming

網頁

Published in: Technology

20121019-HTML5

  1. 1. HTMLWMMKS Lab 郭至軒
  2. 2. HTML 5當前版本 HTML 4.01HTML 5:含 HTML、CSS 以及 Javascript尚未正式推出,大多數主流瀏覽器支援部份功能,至於 IE...HTML5 & CSS3 Support
  3. 3. new tagssection, 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. 4. new tagsection, 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. 5. new tag 標題 首頁 文章彙整 關於作者 其他 部落格文章 版權宣告
  6. 6. new tag <div></div> <div></div> <div></div> <div></div>
  7. 7. new tag <header></header> <nav></nav> <section></section> <footer></footer>
  8. 8. new tag <header></header> <div></div> 網頁更富有語意! <section></section> <footer></footer>
  9. 9. removed tagsacronym, applet, basefont, big, center,dir, font, frame, frameset, isindex,noframes, strike, tt
  10. 10. removed tagsacronym, applet, basefont, big,center, dir, font, frame, frameset,isindex, noframes, strike, tt
  11. 11. 媒體播放<audio>播放音樂<video>播放影片
  12. 12. 動畫製作- Canvas API- CSS 3- Javascript- http://bit.ly/QnNJ14- http://bit.ly/QnNxyW- http://bit.ly/TZZ9yd
  13. 13. Powerful CSS 3圓角、旋轉、變形、移動、漸變...- http://bit.ly/U002qB- http://bit.ly/QnP5J3- http://bit.ly/QnP5sE- http://bit.ly/U00ULU- http://bit.ly/U00kh9
  14. 14. More...HTML5 - WikipediaHTML5 - Google 搜尋
  15. 15. something about HTML 瀏覽器支援不嚴謹的 HTML 語法<html> <head> </head> <body> <ol> <li>資訊週加油阿! </li> <li>傳情品可以幫我打折嗎?</li> <li>不然傳給我也是 OK 的 :) </ol> </body></html>
  16. 16. something about HTML 瀏覽器支援不嚴謹的 HTML 語法<html> <head> </head> <body> <ol> <li>資訊週加油阿! </li> <li>傳情品可以幫我打折嗎?</li> <li>不然傳給我也是 OK 的 :)</li> </ol> </body></html>
  17. 17. 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>
  18. 18. something about HTML
  19. 19. something about HTML01: <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>
  20. 20. 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>
  21. 21. About browserHow browsers work[译]How browsers work
  22. 22. Browser多用不同的瀏覽器測試!Lets Kill IE6
  23. 23. Browser
  24. 24. IE is magic看到的都跟別人不一樣! 資料來源:http://engt.co/SZWheA
  25. 25. IE is magicIE only!!!只有 IE 看得到!WTF...
  26. 26. Debuger右鍵 → 檢查元素 (inspect element)
  27. 27. Firebug (Firefox addon)Firebug
  28. 28. Firefox 3D view
  29. 29. a little tips of coding 縮排
  30. 30. Indentation01: <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>
  31. 31. a little tips of coding編輯器
  32. 32. EditorNotepad++ (Windows Only)(g)Vim (Cross-platform)Gedit (Cross-platform)TextMate (Mac OS X)Coda (Mac OS X)
  33. 33. a little tips of coding 行號 語法高亮標記 其他...
  34. 34. Syntax Highlight01: <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>
  35. 35. Zen Codingzen-coding- HTML 很冗- 開了還要關- 角括號裡面還要塞一些 attribute What The F*ck!!!!
  36. 36. Zen Codingdiv#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
  37. 37. End

×