![](../icon/headdata.png)
ÊÔè§ãËÁèæ ã¹ HTML5
ÁÕÍÐäÃãËÁèã¹ HTML5 ºéÒ§?
HTML5 ÁÕ¡ÒÃà¾ÔèÁàµÔÁ¤Ø³ÅѡɳìãËÁèæ à¢éÒÁÒà¾ÔèÁàµÔÁ ¾ÃéÍÁ·Ñé§Â¡àÅÔ¡á·ç¡(Tag) ºÒ§µÑÇ «Öè§à»ç¹¡ÒáàÅÔ¡ÃٻẺ¡ÒÃãªé§Ò¹à´ÔÁºÒ§ÊèǹÍÍ¡ä» ÊÔ觷Õèà¾ÔèÁà¢éÒÁÒã¹ HTML5 ·Õè¹èÒʹã¨àªè¹
- Audio/Video Support ã¹ HTML5 ¨ÐÃͧÃѺÁÑŵÔÁÕà´ÕÂä´éÍÂèÒ§àµçÁÃٻẺËÃ×ÍÊÁºÙóìÁÒ¡¢Öé¹ â´Âä´éà¾ÔèÁá·ç¡ÊÓËÃѺ¡ÒÃáÊ´§ÀÒ¾áÅÐàÊÕ§â´ÂµÃ§
- New Form Input à¾ÔèÁÍÔ¹¾Ø· (Input) ª¹Ô´ãËÁèæ à¢éÒÁÒÁÒ¡ÁÒÂà¾×èÍÃѺ¢éÍÁÙÅÃٻẺ¹Ñé¹æ â´ÂµÃ§ àªè¹ email, number, datetime à»ç¹µé¹ ¹Í¡¨Ò¡¨ÐªèÇÂãËéàÃÒä´éÃѺ¢éÍÁÙÅ·Õè¶Ù¡µéͧáÅéÇ ÂѧŴ¢Ñ鹵͹¢Í§¡ÒÃà¢Õ¹ʤÃÔ»µì (JavaScript ËÃ×Í PHP) à¾×è͵ÃǨÊͺ¤ÇÒÁ¶Ù¡µéͧ¢Í§¢éÍÁÙÅ
- Semantic Markup Page Layout ¨Ñ´à»ç¹¡ÅØèÁá·ç¡·Õèãªé㹡ÒèѴâ¤Ã§ÊÃéÒ§¢Í§à¾¨·ÕèÊ×èͤÇÒÁËÁÒ¢ͧÊèǹµèÒ§æ àªè¹ <header>, <nav>, <article>, <section>, <aside> áÅÐ <footer>
- Canvas Graphics ¨ÐªèÇÂãËéàÃÒÇÒ´ÃÙ»¡ÃÒ¿¿Ô¡ÃٻẺµèÒ§ æ µÒÁ·ÕèàÃÒµéͧ¡Òà º¹Ë¹éÒàÇçºà¾¨ä´é§èÒÂáÅÐÊдǡ¢Öé¹
- Drag & Drop ã¹ HTML5 ¹Ñé¹ÃͧÃѺ¡Òà Drag & Drop Íͺà¨ç¡µìº¹Ë¹éÒàÇçº â´Âãªé¤ÓÊÑè§ ¨ÒÇÒʤÃÔ» (JavaScript) ¤Çº¤ØÁ¡Ãкǹ¡ÒÃ
- Web Storage à»ç¹¡Åä¡¡ÒèѴà¡çº¢éÍÁÙŽÑè§àºÃÒà«ÍÃì ẺãËÁè «Öè§ÊÒÁÒö¨Ñ´à¡çº¢éÍÁÙÅẺ«Ñº«é͹ä´é´Õ¡ÇèÒà´ÔÁ·Õè¨Ñ´à¡çºáºº¤Ø¡¡Õé
- Geolocation à»ç¹¡ÒÃËÒ¤èÒÅеԨٴ áÅÐÅͧµÔ¨Ù´à¾×èÍÃкصÓá˹觺¹¾×é¹âÅ¡
<header> | |
<nav> | |
<article> | <aside> |
<section> | |
<footer> |
á·ç¡ (Tag) ãËÁèã¹ HTML5
HTML5 ÁÕ¡ÒÃà¾ÔèÁá·ç¡ãËÁèà¢éÒÁÒÍÕ¡¨Ó¹Ç¹Ë¹Öè§ à¾×èÍ¢ÂÒ¢մ¤ÇÒÁÊÒÁÒö㹡ÒÃÊÃÒé§àÇçºä«µì ´Ñ§àªè¹ã¹µÒÃÒ§´éÒ¹ÅèÒ§¹Õé.
<article>, <aside>,<header>, <footer>, <nav>, <section> | á·ç¡àËÅèÒ¹Õéãªé㹡ÒèѴ¡ÒÃâ¤Ã§ÊÃéÒ§¢Í§àÍ¡ÊÒ÷Õè«Ñº«é͹ãËé´ÕÂÔ觢Öé¹ ¨Ò¡à´ÔÁ·Õèµéͧãªéà»ç¹µÒÃÒ§ |
<audio>, <video>, <track>, <source>, <embed> | à»ç¹á·ç¡ÊÓËÃѺãªé§Ò¹´éÒ¹ÁÑŵÔÁÕà´Õ |
<canvas> | ãªéÊÓËÃѺÇÒ´ÀÒ¾ áÅÐáÊ´§¼Å´éÒ¹¡ÃÒ¿¿Ô¡ |
<mark> | ÊÓËÃѺà¹é¹¢éͤÇÒÁâ´Â·ÓäÎäŵì¾×é¹ËÅѧ¢Í§¢éͤÇÒÁ |
<meter> | ÊÓËÃѺ¡ÒÃÇÑ´¤èÒ |
<progress> | ÊÓËÃѺ¡ÒÃáÊ´§¤ÇÒÁ¤×ºË¹éҢͧ§Ò¹ |
<time> | ÊÓËÃѺáÊ´§Çѹ·Õè áÅÐàÇÅÒ |
<datalist> | ÊÓËÃѺáÊ´§ÃÒ¡ÒÃã¹ Dropdown |
<hgroup> | ÊÓËÃѺ¨Ñ´¡ÅØèÁËÑÇ¢éÍàÍ¡ÊÒà |
<input type="email"> | à»ç¹ªèͧÃѺ¢éÍÁÙŪ¹Ô´ÍÕàÁÅ «Öè§ÊÒÁÒöµÃǨÊͺä´éÇèÒ¢éÍÁÙÅ·ÕèãÊèÁÒ¹Ñ鹵çµÒÁÃٻẺ¢Í§ÍÕàÁÅËÃ×ÍäÁè |
<input type="url"> | à»ç¹ªèͧÃѺ¢éÍÁÙÅ·Õèà»ç¹ URL à·èÒ¹Ñé¹ |
<input type="number"> | à»ç¹ªèͧÃѺ¢éÍÁÙŪ¹Ô´µÑÇàÅ¢ |
<input type="range"> | à»ç¹ªèͧÃѺ¢éÍÁÙÅ·ÕèµéͧÍÂÙè㹪èǧ·Õè¡Ó˹´à·èÒ¹Ñé¹ |
<input type="color"> | áÊ´§ÃÒ¡ÒÃÊÕãËéàÅ×Í¡ |
<input type="datetime"> | ªèͧÃѺ¢éÍÁÙÅà»ç¹ÇѹàÇÅÒà·èÒ¹Ñé¹ |
á·ç¡·Õè¶Ù¡Â¡àÅÔ¡ãªé§Ò¹ã¹ HTML5
HTML5 ä´éÁÕ¡ÒáàÅÔ¡¡ÒÃãªé§Ò¹ã¹á·ç¡ºÒ§ÊèǹÍÕ¡´éÇ â´Âá·ç¡·Õè HTML5 äÁèÃͧÃѺáÅéÇ ´Ñ§¹Õé
- <acronym>
- <applet>
- <basefont>
- <big>
- <center>
- <dir>
- <font>
- <dir>
- <font>
- <frame>
- <frameset>
- <noframes>
- <strike>
- <tt>
㹺ҧá·ç¡ÍÒ¨äÁèä´é¶Ù¡Â¡àÅÔ¡ áµèÍÒ¨ÁÕ¡ÒÃà»ÅÕè¹á»Å§à¡ÕèÂǡѺ¡ÒáÓ˹´¤èÒ á͵·ÃÔºÔǵì (Attribute) ÍÂèÒ§äáçµÒÁ ¶Ö§áÁé HTML5 ¨Ð¡àÅÔ¡á·ç¡ä»ºÒ§ÃÒ¡Òà áµèàÇ纺ÃÒà«ÍÃì (Web Browse) ÍÒ¨¨ÐÂѧÃͧÃѺ¡ÒÃãªé§Ò¹á·ç¡¹Ñé¹ÍÂÙè áÁèàÃÒ¨Ðãªéá·ç¡·Õè HTML5 äÁèÃͧÃѺáÅéÇ¡çµÒÁ ¡ç¨Ðä´éÃѺ¼ÅÅѾ¸ìµÒÁ»¡µÔ
ËÒ¡àÃÒµÑé§ã¨·Õè¨Ð¡éÒÇÊÙèà·¤â¹âÅÂբͧ HTML5 ¡ç¤ÇÃàÅ×Í¡ãªé੾ÒÐÊÔ觷Õè HTML5 ÃͧÃѺ¨Ð´Õ¡ÇèÒ à¾ÃÒÐã¹Í¹Ò¤µËÒ¡àÇçºàºÃÒà«ÍÃìµèÒ§ æ ÃͧÃѺ HTML5 ÍÂèÒ§àµçÁÃٻẺáÅéÇ ÍÒ¨Ê觼ŵèÍàÇçºä«µì¢Í§àÃÒ·Õèãªéá·ç¡äÁèµÃ§¡ÑºÁÒµÃÒ°Ò¹¢Í§ HTML5
![](../icon/underline.jpg)