HTML5ÈëÃÅ

28¸ö±ØÐëÖªµÀµÄHTML5ÐÂÌØÐÔ

×ÖºÅ+ ×÷Õߣº À´Ô´£º 2014-11-16 20:49 ÎÒÒªÆÀÂÛ( )

1. еÄDoctype ¾¡¹ÜʹÓÃ!DOCTYPE html£¬¼´Ê¹ä¯ÀÀÆ÷²»¶®Õâ¾ä»°Ò²»á°´ÕÕ±ê׼ģʽȥäÖȾ 2. FigureÔªËØ ÓÃfigureºÍfigcaptionÀ´ÓïÒ廯µØ±íʾ´ø±êÌâµÄͼƬ XML/HTML Code ¸´ÖÆÄÚÈݵ½¼ôÌù°å figure img src

1. еÄDoctype

¾¡¹ÜʹÓÃ<!DOCTYPE html>£¬¼´Ê¹ä¯ÀÀÆ÷²»¶®Õâ¾ä»°Ò²»á°´ÕÕ±ê׼ģʽȥäÖȾ

2. FigureÔªËØ

ÓÃ<figure>ºÍ<figcaption>À´ÓïÒ廯µØ±íʾ´ø±êÌâµÄͼƬ

XML/HTML Code¸´ÖÆÄÚÈݵ½¼ôÌù°å
  1. <figure>  
  2. <img src=”path/to/image” alt=”About image” />  
  3. <figcaption>  
  4. <p>This is an image of something interesting. </p>  
  5. </figcaption>  
  6. </figure>  

3. ÖØж¨ÒåµÄ<small>

<small>ÒѾ­±»ÖØж¨ÒåÁË£¬ÏÖÔÚ±»ÓÃÀ´±íʾСµÄÅŰ棬ÈçÍøÕ¾µ×²¿µÄ°æȨÉùÃ÷

4. È¥µôlinkºÍscript±êÇ©ÀïÃæµÄtypeÊôÐÔ

5. ¼Ó/²»¼Ó À¨ºÅ

HTML5ûÓÐÑϸñµÄÒªÇóÊôÐÔ±ØÐë¼ÓÒýºÅ£¬±ÕºÏ²»±ÕºÏ£¬µ«Êǽ¨Òé¼ÓÉÏÒýºÅºÍ±ÕºÏ±êÇ©

6. ÈÃÄãµÄÄÚÈݿɱ༭£¬Ö»ÐèÒª¼ÓÒ»¸öcontenteditableÊôÐÔ

7. Email Inputs

Èç¹ûÎÒÃǸøInputµÄtypeÉèÖÃΪemail£¬ä¯ÀÀÆ÷¾Í»áÑéÖ¤Õâ¸öÊäÈëÊÇ·ñÊÇemailÀàÐÍ£¬µ±È»²»ÄÜÖ»ÒÀÀµÇ°¶ËµÄУÑ飬ºó¶ËÒ²µÃÓÐÏàÓ¦µÄУÑé

8. Placeholders

Õâ¸öinputÊôÐÔµÄÒâÒå¾ÍÊDz»±Øͨ¹ýjavascriptÀ´×öplaceholderµÄЧ¹ûÁË

9. Local Storage

ʹÓÃLocal Storage¿ÉÒÔÓÀ¾Ã´æ´¢´óµÄÊý¾ÝƬ¶ÎÔÚ¿Í»§¶Ë£¨³ý·ÇÖ÷¶¯É¾³ý£©£¬Ä¿Ç°´ó²¿·Öä¯ÀÀÆ÷ÒѾ­Ö§³Ö£¬ÔÚʹÓÃ֮ǰ¿ÉÒÔ¼ì²âÒ»ÏÂwindow.localStorageÊÇ·ñ´æÔÚ

 

10. ÓïÒ廯µÄheaderºÍfooter

11. ¸ü¶àµÄHTML5±íµ¥ÌØÐÔ

12. IEºÍHTML5

ĬÈϵģ¬HTML5ÐÂÔªËر»ÒÔinlineµÄ·½Ê½äÖȾ£¬²»¹ý¿ÉÒÔͨ¹ýÏÂÃæÕâÖÖ·½Ê½ÈÃ

ÆäÒÔblock·½Ê½äÖȾ

XML/HTML Code¸´ÖÆÄÚÈݵ½¼ôÌù°å
  1. header, footer, article, section, nav, menu, hgroup {  
  2. display: block;  
  3. }  

²»ÐÒµÄÊÇIE»áºöÂÔÕâЩÑùʽ£¬¿ÉÒÔÏñÏÂÃæÕâÑùfix:

JavaScript Code¸´ÖÆÄÚÈݵ½¼ôÌù°å
  1. document.createElement(”article”);  
  2. document.createElement(”footer”);  
  3. document.createElement(”header”);  
  4. document.createElement(”hgroup”);  
  5. document.createElement(”nav”);  
  6. document.createElement(”menu”);  

13. hgroup

Ò»°ãÔÚheaderÀïÃæÓÃÀ´½«Ò»×é±êÌâ×éºÏÔÚÒ»Æð£¬Èç

XML/HTML Code¸´ÖÆÄÚÈݵ½¼ôÌù°å
  1. <header>  
  2. <hgroup>  
  3. <h1> Recall Fan Page </h1>  
  4. <h2> Only for people who want the memory of a lifetime. </h2>  
  5. </hgroup>  
  6. </header>  

14. RequiredÊôÐÔ

requiredÊôÐÔ¶¨ÒåÁËÒ»¸öinputÊÇ·ñÊDZØÐëµÄ£¬Äã¿ÉÒÔÏñÏÂÃæÕâÑùÉùÃ÷

XML/HTML Code¸´ÖÆÄÚÈݵ½¼ôÌù°å
  1. <input type=”text” name=”someInput” required>  
  2. <!--»òÕß-->  
  3. <input type=”text” name=”someInput” required=”required”>  

15. AutofocusÊôÐÔ

ÕýÈçËüµÄ´ÊÒ壬¾ÍÊǾ۽¹µ½ÊäÈë¿òÀïÃæ

XML/HTML Code¸´ÖÆÄÚÈݵ½¼ôÌù°å
  1. <input type=”text” name=”someInput” placeholder=”Douglas Quaid”  required autofocus>  

16. AudioÖ§³Ö

HTML5ÌṩÁË<audio>±êÇ©£¬Äã²»ÐèÒªÔÙ°´ÕÕµÚÈý·½²å¼þÀ´äÖȾÒôƵ£¬´ó¶àÊýÏÖ´úä¯ÀÀÆ÷ÌṩÁ˶ÔÓÚHTML5 AudioµÄÖ§³Ö£¬²»¹ýÄ¿Ç°ÈÔ¾ÉÐèÒªÌṩһЩ¼æÈÝ´¦Àí£¬Èç

 

XML/HTML Code¸´ÖÆÄÚÈݵ½¼ôÌù°å
  1. <audio autoplay=”autoplay” controls=”controls”>  
  2. <source src=”file.ogg” /><!–FF–>  
  3. <source src=”file.mp3″ /><!–Webkit–>  
  4. <a href=”file.mp3″>Download this file.</a>  
  5. </audio>  

 17. VideoÖ§³Ö

ºÍAudioºÜÏñ£¬<video>±êÇ©ÌṩÁ˶ÔÓÚvideoµÄÖ§³Ö£¬ÓÉÓÚHTML5Îĵµ²¢Ã»ÓиøvideoÖ¸¶¨Ò»¸öÌض¨µÄ±àÂ룬ËùÒÔä¯ ÀÀÆ÷È¥¾ö¶¨ÒªÖ§³ÖÄÄЩ±àÂ룬µ¼ÖÂÁ˺ܶ಻һÖ¡£SafariºÍIEÖ§³ÖH.264±àÂëµÄ¸ñʽ£¬FirefoxºÍOperaÖ§³ÖTheoraºÍVorbis ±àÂëµÄ¸ñʽ£¬µ±Ê¹ÓÃHTML5 videoµÄʱºò£¬Äã±ØÐ붼Ìṩ£º

XML/HTML Code¸´ÖÆÄÚÈݵ½¼ôÌù°å
  1. <video controls preload>  
  2. <source src=”cohagenPhoneCall.ogv” type=”video/ogg; codecs=’vorbis, theora’” />  
  3. <source src=”cohagenPhoneCall.mp4″ type=”video/mp4; ’codecs=’avc1.42E01E, mp4a.40.2′” />  
  4. <p> Your browser is old. <a href=”cohagenPhoneCall.mp4″>Download this video instead.</a> </p>  
  5. </video>  

18. Ô¤¼ÓÔØÊÓƵ

preloadÊôÐÔ¾ÍÏñËüµÄ×ÖÃæÒâ˼ÄÇô¼òµ¥£¬ÄãÐèÒª¾ö¶¨ÊÇ·ñÐèÒªÔÚÒ³Ãæ¼ÓÔصÄʱºòÈ¥Ô¤¼ÓÔØÊÓƵ

XML/HTML Code¸´ÖÆÄÚÈݵ½¼ôÌù°å
  1. <video preload>  

19. ÏÔʾÊÓƵ¿ØÖÆ

XML/HTML Code¸´ÖÆÄÚÈݵ½¼ôÌù°å
  1. <video preload controls>  

20. ÕýÔò±í´ïʽ

ÓÉÓÚpatternÊôÐÔ£¬ÎÒÃÇ¿ÉÒÔÔÚÄãµÄmarkupÀïÃæÖ±½ÓʹÓÃÕýÔò±í´ïʽÁË

XML/HTML Code¸´ÖÆÄÚÈݵ½¼ôÌù°å
  1. <form action=”" method=”post”>  
  2. <label for=”username”>Create a Username: </label>  
  3. <input type=”text” name=”username” id=”username” placeholder=”4 <> 10″ pattern=”[A-Za-z]{4,10}” autofocus required>  
  4. <button type=”submit”>Go </button>  
  5. </form>  

21. ¼ì²âÊôÐÔÖ§³Ö

³ýÁËModernizrÖ®ÍâÎÒÃÇ»¹¿ÉÒÔͨ¹ýjavascript¼òµ¥µØ¼ì²âһЩÊôÐÔÊÇ·ñÖ§³Ö£¬È磺

JavaScript Code¸´ÖÆÄÚÈݵ½¼ôÌù°å
  1. <script>  
  2. if (!’pattern’ in document.createElement(’input’) ) {  
  3. // do client/server side validation  
  4. }  
  5. </script>  

 22. MarkÔªËØ

°Ñ<mark>ÔªËØ¿´×öÊǸßÁÁµÄ×÷Ó㬵±ÎÒÑ¡ÔñÒ»¶ÎÎÄ×ÖµÄʱºò£¬javascript¶ÔÓÚHTMLµÄmarkupЧ¹ûÓ¦¸ÃÊÇÕâÑùµÄ£º

XML/HTML Code¸´ÖÆÄÚÈݵ½¼ôÌù°å
  1. <h3> Search Results </h3>  
  2. <p> They were interrupted, just after Quato said, <mark>”Open your Mind”</mark></p>  

23. ʲôʱºòÓÃ<div>

HTML5ÒѾ­ÒýÈëÁËÕâô¶àÔªËØ£¬ÄÇôdivÎÒÃÇ»¹ÒªÓÃÂð£¿divÄã¿ÉÒÔÔÚûÓиüºÃµÄÔªËصÄʱºòÈ¥Óá£

24. ÏëÁ¢¼´Ê¹ÓÃHTML5?

²»ÒªµÈ2022ÁË£¬ÏÖÔھͿÉÒÔʹÓÃÁË£¬just do it.

25. ÄÄЩ²»ÊÇHTML5

1)SVG

2)CSS3

3)Geolocation

4)Client Storage

5)Web Sockets

26. DataÊôÐÔ

XML/HTML Code¸´ÖÆÄÚÈݵ½¼ôÌù°å
  1. <div id=”myDiv” data-custom-attr=”My Value”> Bla Bla </div>  

CSSÖÐʹÓãº

XML/HTML Code¸´ÖÆÄÚÈݵ½¼ôÌù°å
  1. <style>  
  2. h1:hover:after {  
  3. content: attr(data-hover-response);  
  4. color: black;  
  5. position: absolute;  
  6. left: 0;  
  7. }  
  8. </style>  
  9. <h1 data-hover-response=”I Said Don’t Touch Me!”> Don’t Touch Me </h1>  

27. OutputÔªËØ

<output>ÔªËØÓÃÀ´ÏÔʾ¼ÆËã½á¹û£¬Ò²ÓÐÒ»¸öºÍlabelÒ»ÑùµÄforÊôÐÔ

28. ÓÃRange InputÀ´´´½¨»¬¿é

HTML5ÒýÓõÄrangeÀàÐÍ¿ÉÒÔ´´½¨»¬¿é£¬Ëü½ÓÊÜmin, max, stepºÍvalueÊôÐÔ

¿ÉÒÔʹÓÃcssµÄ:beforeºÍ:afterÀ´ÏÔʾminºÍmaxµÄÖµ

XML/HTML Code¸´ÖÆÄÚÈݵ½¼ôÌù°å
  1. <input type=”range” name=”range” min=”0″ max=”10″ step=”1″ value=”">    
  2. <style>  
  3. input[type=range]:before { content: attr(min); padding-right: 5px;    
  4. }    
  5. input[type=range]:after { content: attr(max); padding-left: 5px;}  
  6. </style>  

 

¡¡

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

Ïà¹ØÎÄÕÂ
  • ³¬¼¶Ñ¤ÀöµÄhtml5µÄÒ³Ãæ

    ³¬¼¶Ñ¤ÀöµÄhtml5µÄÒ³Ãæ

    2014-11-16 20:49

  • HTML5»ù´¡£¬µÚ4²¿·Ö£ºµã¾¦Ö®±ÊCanvas

    HTML5»ù´¡£¬µÚ4²¿·Ö£ºµã¾¦Ö®±ÊCanvas

    2014-11-16 20:49

  • HTML5»ù´¡£¬µÚ3²¿·Ö£ºHTML5 APIµÄÍþÁ¦

    HTML5»ù´¡£¬µÚ3²¿·Ö£ºHTML5 APIµÄÍþÁ¦

    2014-11-16 20:49

  • HTML5»ù´¡£¬µÚ2²¿·Ö£º×éÖ¯Ò³ÃæµÄÊäÈë

    HTML5»ù´¡£¬µÚ2²¿·Ö£º×éÖ¯Ò³ÃæµÄÊäÈë

    2014-11-16 20:49

ÍøÓѵãÆÀ
ø