0
HTMLWMMKS Lab 郭至軒
HTML 5當前版本 HTML 4.01HTML 5:含 HTML、CSS 以及 Javascript尚未正式推出,大多數主流瀏覽器支援部份功能,至於 IE...HTML5 & CSS3 Support
new tagssection, video, progress, nav, meter,time, aside, canvas, command, datalist,details, embed, figcaption, figure,foo...
new tagsection, video, progress, nav, meter,time, aside, canvas, command,datalist, details, embed, figcaption,figure, foot...
new tag  標題  首頁      文章彙整   關於作者   其他  部落格文章  版權宣告
new tag  <div></div>  <div></div>  <div></div>  <div></div>
new tag  <header></header>  <nav></nav>  <section></section>  <footer></footer>
new tag  <header></header>  <div></div>                 網頁更富有語意!  <section></section>  <footer></footer>
removed tagsacronym, applet, basefont, big, center,dir, font, frame, frameset, isindex,noframes, strike, tt
removed tagsacronym, applet, basefont, big,center, dir, font, frame, frameset,isindex, noframes, strike, tt
媒體播放<audio>播放音樂<video>播放影片
動畫製作- Canvas API- CSS 3- Javascript- http://bit.ly/QnNJ14- http://bit.ly/QnNxyW- http://bit.ly/TZZ9yd
Powerful CSS 3圓角、旋轉、變形、移動、漸變...- http://bit.ly/U002qB- http://bit.ly/QnP5J3- http://bit.ly/QnP5sE- http://bit.ly/U00ULU- h...
More...HTML5 - WikipediaHTML5 - Google 搜尋
something about HTML 瀏覽器支援不嚴謹的 HTML 語法<html>     <head>     </head>     <body>          <ol>                 <li>資訊週加油阿! <...
something about HTML 瀏覽器支援不嚴謹的 HTML 語法<html>     <head>     </head>     <body>          <ol>                 <li>資訊週加油阿! <...
something about HTML      01: <html>      02:      <head>      03:      </head>      04:      <body>      05:           <t...
something about HTML
something about HTML01: <html>02:      <head>03:      </head>04:      <body>05:           <table border=1>06:             ...
something about HTML    01:   <html>    02:       <head>    03:       </head>    04:       <body>    05:            <table...
About browserHow browsers work[译]How browsers work
Browser多用不同的瀏覽器測試!Lets Kill IE6
Browser
IE is magic看到的都跟別人不一樣!              資料來源:http://engt.co/SZWheA
IE is magicIE only!!!只有 IE 看得到!WTF...
Debuger右鍵 → 檢查元素 (inspect element)
Firebug (Firefox addon)Firebug
Firefox 3D view
a little tips of coding 縮排
Indentation01: <html>                                  01:   <html>02:      <head>                             02:   <head...
a little tips of coding編輯器
EditorNotepad++ (Windows Only)(g)Vim (Cross-platform)Gedit (Cross-platform)TextMate (Mac OS X)Coda (Mac OS X)
a little tips of coding              行號  語法高亮標記           其他...
Syntax Highlight01: <html>                           01: <html>02:      <head>                      02:      <head>03:    ...
Zen Codingzen-coding- HTML 很冗- 開了還要關- 角括號裡面還要塞一些 attribute    What The F*ck!!!!
Zen Codingdiv#page>div.logo+ul#navigation>li*5>a      <div id="page">          <div class="logo"></div>          <ul id="n...
End
20121019-HTML5
20121019-HTML5
20121019-HTML5
20121019-HTML5
Upcoming SlideShare
Loading in...5
×

20121019-HTML5

491

Published on

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

網頁

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
491
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
28
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×