HTML5¼¼Êõ

4ÔÂ9ÈÕѧϰ±Ê¼Ç¡ª¡ªHTML5 - ancientMuse

×ÖºÅ+ ×÷ÕߣºH5Ö®¼Ò À´Ô´£º²©¿ÍÔ° 2016-04-11 14:00 ÎÒÒªÆÀÂÛ( )

ÐÂÔö¹¦ÄÜ 1.HTML5бê×¼ÖÐÖ±½ÓÌí¼ÓÁËÓµÓоßÌ庬ÒåµÄHTML±êÇ©±ÈÈ磺article¡¢footer¡¢header¡¢nav¡¢section¡¢video,progress£¨½ø¶ÈÌõ£©¡¢meter£¨ÈÝÁ¿Õ¼ÓÃÌõ£©¡¢time£¨²»ÏÔʾЧ¹û£©,aside£¨ÎÄÕ²àÀ¸£©,canvas ͬʱȡÏûÁËһЩ±êÇ©£¬Èçacronym, applet, basefont

  • ÐÂÔö¹¦ÄÜ
  • 1. HTML5бê×¼ÖÐÖ±½ÓÌí¼ÓÁËÓµÓоßÌ庬ÒåµÄHTML±êÇ©±ÈÈ磺<article>¡¢<footer>¡¢<header>¡¢<nav>¡¢<section>¡¢<video>, <progress>£¨½ø¶ÈÌõ£©¡¢<meter>£¨ÈÝÁ¿Õ¼ÓÃÌõ£©¡¢<time>£¨²»ÏÔʾЧ¹û£©, <aside>£¨ÎÄÕ²àÀ¸£©, <canvas>

        ͬʱȡÏûÁËһЩ±êÇ©£¬Èç<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <isindex>, <noframes>, <strike>,<tt>

    2. HTML5µÄ±ê×¼ÖÐÖ±½ÓÌí¼ÓÁËÖÇÄÜ±íµ¥£¬ÈÃÕâÒ»Çж¼±äµÃÄÇôµÄ¼òµ¥£¬±ÈÈç calendar¡¢date¡¢time¡¢email¡¢url¡¢search

    3. ÔÚHTML5±ê×¼ÖÐÔ­ÉúµÄ¾ÍÖ§³ÖÒôƵ¡¢ÊÓƵ¡¢»­²¼µÈ¼¼Êõ¡£ÈÃWEB³ÌÐò¸ü¼Ó¶ÀÁ¢£¬¸üºÃµÄÊÊÓ¦¶àÖÖÐÎʽµÄ¿Í»§¶Ë¡£

    4. HTML5 ÌṩÁËÁ½ÖÖÔÚ¿Í»§¶Ë´æ´¢Êý¾ÝµÄз½·¨

    5. HTML5 µÄcanvasÔªËØʹÓà JavaScript ÔÚÍøÒ³ÉÏ»æÖÆͼÏñ¡£²¢ÓµÓжàÖÖ»æÖÆ·¾¶¡¢¾ØÐΡ¢Ô²ÐΡ¢×Ö·ûÒÔ¼°Ìí¼ÓͼÏñµÄ·½·¨¡£

    6. ÔÚ²»Ó°ÏìUI update¼°ä¯ÀÀÆ÷ÓëÓû§½»»¥µÄÇé¿öÏÂ, Ç°¶Ë×ö´ó¹æÄ£ÔËË㣬ֻÄÜͨ¹ý setTimeout Ö®ÀàµÄȥģÄâ¶àÏß³Ì ¡£¶øеıê×¼ÖУ¬JSÐÂÔöµÄHTML5 Web Worker¶ÔÏóÔ­ÉúµÄ¾ÍÖ§³Ö¶àÏ̡߳£

    7. WebSocketsÊÇÔÚÒ»¸ö(TCP)½Ó¿Ú½øÐÐË«ÏòͨÐŵļ¼Êõ£¬PUSH¼¼ÊõÀàÐÍ¡£WebSocketÊÇhtml5¹æ·¶ÐÂÒýÈëµÄ¹¦ÄÜ£¬ÓÃÓÚ½â¾öä¯ÀÀÆ÷Óëºǫ́·þÎñÆ÷Ë«ÏòͨѶµÄÎÊÌ⣬ʹÓÃWebSocket¼¼Êõ£¬ºǫ́¿ÉÒÔËæʱÏòÇ°¶ËÍÆËÍÏûÏ¢£¬ÒÔ±£Ö¤Ç°ºǫ́״̬ͳһ£¬ÔÚ´«Í³µÄÎÞ״̬HTTPЭÒéÖУ¬ÕâÊÇ“ÎÞ·¨×öµ½”µÄ¡£

    8. HTML5(text/html)ä¯ÀÀÆ÷½«ÔÚ´íÎóÓï·¨µÄ´¦ÀíÉϸü¼ÓÁé»î¡£HTML5ÔÚÉè¼Æʱ±£Ö¤¾ÉµÄä¯ÀÀÆ÷Äܹ»°²È«µØºöÂÔµôеÄHTML5´úÂë¡£ÓëHTML4.01Ïà±È£¬HTML5¸ø³öÁ˽âÎöµÄÍêÕû¹æÔò£¬Èò»Í¬µÄä¯ÀÀÆ÷¼´Ê¹ÔÚ·¢ÉúÓï·¨´íÎóʱҲÄÜ·µ»ØÍêÈ«ÏàͬµÄ½á¹û¡£

    9. ÓÉÓÚÏîÄ¿Öо­³£Óöµ½ÓÃWebÓ¦ÓÃÖпØÖƲÙ×÷±¾µØÎļþ£¬¶ø֮ǰ¶¼ÊÇʹÓÃһЩ¸»¿Í»§¶Ë¼¼Êõ±ÈÈçflash£¬ActiveX£¬SilverlightµÈ¼¼Êõ¡£ÔÚHTML5µÄеÄÌṩµÄ HTML5 File API ÈÃJS¿ÉÒÔÇáËÉÉÏÕóÁË¡£

    10. HTML5½öÓÐÒ»ÖÖÀàÐÍ£¬<!DOCTYPE html>

     

  • Ò³Ãæ²¼¾Ö±ä»¯
  •    HTML5: 

    ´úÂëÈçÏ£º

    my pageheadernavsectionasidefooter

  • ±êÇ©¾ßÌå½âÊÍ
  • <section>¶¨ÒåÎĵµÖеĽڡ£ËüÓÃÀ´±íÏÖÆÕͨµÄÎĵµÄÚÈÝ»òÓ¦ÓÃÇø¿é£¬µ«sectionÔªËرêÇ©²¢·ÇÒ»¸öÆÕͨµÄÈÝÆ÷ÔªËØ£¬Ëü±íʾһ¶ÎרÌâÐÔµÄÄÚÈÝ£¬Ò»°ã»á´øÓбêÌâ¡£

    <article>ÌØÊâµÄsection±êÇ©£¬Ëü±Èsection¾ßÓиüÃ÷È·µÄÓïÒ壬Ëü´ú±íÒ»¸ö¶ÀÁ¢µÄ¡¢ÍêÕûµÄÏà¹ØÄÚÈÝ¿é¡£µ±ÎÒÃÇÃèÊöÒ»¼þ¾ßÌåµÄÊÂÎïµÄʱºò£¬Í¨³£¹ÄÀøʹÓÃarticleÀ´´úÌæsection¡£article»áÓбêÌⲿ·Ö£¨Í¨³£°üº¬ÔÚheaderÄÚ£©£¬Ò²¿ÉÒÔ°üº¬footer¡£article¿ÉÒÔǶÌ×£¬ÄÚ²ãµÄarticle¶ÔÍâ²ãµÄarticle±êÇ©ÓÐÁ¥Êô¹Øϵ¡£

    <nav>¿ÉÒÔ×÷ΪҳÃæµ¼º½µÄÁ´½Ó×飬ÆäÖеĵ¼º½ÔªËØÁ´½Óµ½ÆäËüÒ³Ãæ»òÕßµ±Ç°Ò³ÃæµÄÆäËü²¿·Ö£¬Ê¹html´úÂëÔÚÓïÒ廯·½Ãæ¸ü¼Ó¾«È·£¬Í¬Ê±¶ÔÓÚÆÁÄ»ÔĶÁÆ÷µÈÉ豸µÄÖ§³ÖÒ²¸üºÃ¡£

    <aside>±êÇ©ÓÃÀ´×°ÔØ·ÇÕýÎĵÄÄÚÈÝ£¬±»ÊÓΪҳÃæÀïÃæÒ»¸öµ¥¶ÀµÄ²¿·Ö¡£Ëü°üº¬µÄÄÚÈÝÓëÒ³ÃæµÄÖ÷ÒªÄÚÈÝÊÇ·Ö¿ªµÄ£¬¿ÉÒÔ±»É¾³ý£¬¶ø²»»áÓ°Ïìµ½ÍøÒ³µÄÄÚÈÝ¡¢Õ½ڻòÊÇÒ³ÃæËùÒª´«´ïµÄÐÅÏ¢¡£ÀýÈç¹ã¸æ£¬³É×éµÄÁ´½Ó£¬²à±ßÀ¸µÈµÈ¡£

    <header>±êÇ©¶¨ÒåÎĵµµÄҳü£¬Í¨³£ÊÇһЩÒýµ¼ºÍµ¼º½ÐÅÏ¢¡£Ëü²»¾ÖÏÞÓÚдÔÚÍøҳͷ²¿£¬Ò²¿ÉÒÔдÔÚÍøÒ³ÄÚÈÝÀïÃ档ͨ³£header±êÇ©ÖÁÉÙ°üº¬Ò»¸ö±êÌâ±ê¼Ç£¨h1-h6£©£¬»¹¿ÉÒÔ°üÀ¨hgroup±êÇ©£¬»¹¿ÉÒÔ°üÀ¨±í¸ñÄÚÈÝ¡¢±êʶ¡¢ËÑË÷±íµ¥¡¢navµ¼º½µÈ¡£

    <footer>±êÇ©¶¨Òåsection»òdocumentµÄÒ³½Å£¬°üº¬ÁËÓëÒ³Ãæ¡¢ÎÄÕ»òÊDz¿·ÖÄÚÈÝÓйصÄÐÅÏ¢£¬±ÈÈç˵ÎÄÕµÄ×÷Õß»òÕßÈÕÆÚ¡£ ËüºÍheader±êǩʹÓûù±¾Ò»Ñù£¬¿ÉÒÔÔÚÒ»¸öÒ³ÃæÖжà´ÎʹÓã¬Èç¹ûÔÚÒ»¸öÇø¶ÎµÄºóÃæ¼ÓÈëfooter£¬ÄÇôËü¾ÍÏ൱ÓÚ¸ÃÇø¶ÎµÄÒ³½ÅÁË¡£

    <hgroup>±êÇ©ÊǶÔÍøÒ³»òÇø¶ÎsectionµÄ±êÌâÔªËØ£¨h1-h6£©½øÐÐ×éºÏ¡£ÀýÈ磬ÔÚÒ»Çø¶ÎÖÐÄãÓÐÁ¬ÐøµÄhϵÁеıêÇ©ÔªËØ£¬Ôò¿ÉÒÔÓÃhgroup½«ËûÃÇÀ¨ÆðÀ´¡£

    <figure>ÓÃÓÚ¶ÔÔªËؽøÐÐ×éºÏ¡£¶àÓÃÓÚͼƬÓëͼƬÃèÊö×éºÏ¡£

     

  • <input>ÐÂÔöÀàÐÍ
  • 1. numberÀàÐÍ

    ¿ØÖÆÊäÈëÊý¾ÝµÄ·¶Î§¡£name: ±êʶ±íµ¥ÌύʱµÄkeyÖµ£¬min: ±êʶµ±Ç°ÊäÈë¿òÊäÈëµÄ×îСֵ£¬ max: ±êʶµ±Ç°ÊäÈë¿òÊäÈëµÄ×î´óÖµ£¬step: ±êʶµã»÷Ôö´ó/¼õСµÄʱºò£¬Ôö¼Ó/¼õСµÄ²½³¤£¬value:¹æ¶¨Ä¬ÈÏÖµ

    2. EmailÀàÐÍ

    ϵͳ×Ô¶¯¼ì²âÊÇ·ñΪÓÊÏä¸ñʽ

    3. URLÀàÐÍ

    ϵͳ×Ô¶¯¼ì²âÊÇ·ñΪÍøÖ·¸ñʽ

    4. rangeÀàÐÍ

    0

    rangeÊÇ»¬¶¯ÌõЧ¹û£¬¿ÉÒÔºÍ<output>±êÇ©Ò»ÆðʹÓÃÏÔʾ»¬¶¯Ìõ´ú±íµÄÊýÖµ£¨form±êÇ©¼ÓÉÏoninput="output.value=parseInt(range.value)"£©

    5. ÈÕÆÚÀàÐÍ

    datetimeÀàÐ͹ȸèä¯ÀÀÆ÷²»Ö§³Ö

    6. colorÀàÐÍ

    7. ±íµ¥×Ô¶¯Ìáʾ

  • ±íµ¥ÐÂÔöÊôÐÔ
  • 1.input±êÇ©ÐÂÔöÊôÐÔ

    2.formÐÂÔöÊôÐÔ

     

  • Îļþ²Ù×÷API
  • Ö÷ÒªÊÇFileList¡¢Blob¡¢File¡¢FileReader¼¸¸öJS¶ÔÏó£º

    FileList£ºËüÊÇFile¶ÔÏóµÄÒ»¸ö¼¯ºÏ£¬ÔÚHTML4±ê×¼ÖÐÎļþÉÏ´«¿Ø¼þÖ»½ÓÊÜÒ»¸öÎļþ£¬¶øÔÚбê×¼ÖУ¬Ö»ÐèÒªÉèÖÃmultiple£¬¾ÍÖ§³Ö¶àÎļþÉÏ´«£¬ËùÒԴӴ˱êÇ©ÖлñÈ¡µÄfilesÊôÐÔ¾ÍÊÇFileList¶ÔÏóʵÀý¡£

    Blob: Æäʵ¾ÍÊÇÒ»¸öԭʼÊý¾Ý¶ÔÏó£¬ËüÌṩÁËslice·½·¨¿ÉÒÔ¶ÁȡԭʼÊý¾ÝÖеÄij¿éÊý¾Ý¡£ÁíÍâÓÐÁ½¸öÊôÐÔ£ºsize£¨Êý¾ÝµÄ´óС£©£¬type£¨Êý¾ÝµÄMIMEÀàÐÍ);

    File: ¼Ì³Ð×ÔBlob¶ÔÏó£¬Ö¸ÏòÒ»¸ö¾ßÌåµÄÎļþ£¬Ëü»¹ÓÐÁ½¸öÊôÐÔ£ºname£¨ÎļþÃû£©,lastModifiedDate£¨×îºóÐÞ¸Äʱ¼ä£©;

    FileReader: Éè¼ÆÓÃÀ´¶ÁÈ¡ÎļþÀïÃæµÄÊý¾Ý£¬ÌṩÈý¸ö³£ÓõĶÁÈ¡ÎļþÊý¾ÝµÄ·½·¨£¬ÁíÍâ¶ÁÈ¡ÎļþÊý¾ÝʹÓÃÁËÒì²½µÄ·½Ê½£¬·Ç³£¸ßЧ¡£ 

    ʵÀý1£º»ñÈ¡ÉÏ´«ÎļþµÄÎļþÃû£¨ÐèÒªjQuery£©

    ¡¡

    1.±¾Õ¾×ñÑ­ÐÐÒµ¹æ·¶£¬ÈκÎתÔصĸå¼þ¶¼»áÃ÷È·±ê×¢×÷ÕߺÍÀ´Ô´£»2.±¾Õ¾µÄÔ­´´ÎÄÕ£¬ÇëתÔØʱÎñ±Ø×¢Ã÷ÎÄÕÂ×÷ÕߺÍÀ´Ô´£¬²»×ðÖØÔ­´´µÄÐÐΪÎÒÃǽ«×·¾¿ÔðÈΣ»3.×÷ÕßͶ¸å¿ÉÄܻᾭÎÒÃDZ༭Ð޸Ļò²¹³ä¡£

    Ïà¹ØÎÄÕÂ
    • HTML5 ½ø½×ϵÁУºÍÏ·Å API ʵÏÖÍÏ·ÅÅÅÐò - _ÁÖöÎ

      HTML5 ½ø½×ϵÁУºÍÏ·Å API ʵÏÖÍÏ·ÅÅÅÐò - _ÁÖöÎ

      2017-05-02 11:02

    • HTTPЭÒéѧϰËæ±Ê - ÌÇ´×ËáÀ±½·

      HTTPЭÒéѧϰËæ±Ê - ÌÇ´×ËáÀ±½·

      2017-05-01 18:03

    • HTML5 ½ø½×ϵÁУºindexedDB Êý¾Ý¿â - _ÁÖöÎ

      HTML5 ½ø½×ϵÁУºindexedDB Êý¾Ý¿â - _ÁÖöÎ

      2017-04-27 14:02

    • HTML5 ¸ß¼¶ÏµÁУºweb Storage - _ÁÖöÎ

      HTML5 ¸ß¼¶ÏµÁУºweb Storage - _ÁÖöÎ

      2017-04-27 14:01

    ÍøÓѵãÆÀ
    í