HTML5 ä¯ÀÀÆ÷Ö§³Ö
Äú¿ÉÒÔ°ïÖúÀϰ汾ä¯ÀÀÆ÷´¦Àí HTML5¡£
HTML5 ä¯ÀÀÆ÷Ö§³Ö
ËùÓÐÏÖ´úä¯ÀÀÆ÷¶¼Ö§³Ö HTML5¡£
´ËÍ⣬ËùÓÐä¯ÀÀÆ÷£¬²»ÂÛоɣ¬¶¼»á×Ô¶¯°Ñδʶ±ðÔªËØµ±×öÐÐÄÚÔªËØÀ´´¦Àí¡£
ÕýÒòÈç´Ë£¬Äú¿ÉÒÔ°ïÖúÀÏʽä¯ÀÀÆ÷´¦Àí¡±Î´ÖªµÄ¡° HTML ÔªËØ¡£
×¢ÊÍ£ºÄúÉõÖÁ¿ÉÒÔ½ÌÊÚʯÆ÷ʱ´úµÄ IE6 ÈçºÎ´¦Àíδ֪µÄ HTML ÔªËØ¡£
°Ñ HTML5 ÔªËØ¶¨ÒåΪ¿é¼¶ÔªËØ
HTML5 ¶¨ÒåÁ˰˸öеÄÓïÒå HTML ÔªËØ¡£ËùÓж¼ÊÇ¿é¼¶ÔªËØ¡£
Äú¿ÉÒÔ°Ñ CSS display ÊôÐÔÉèÖÃΪ block£¬ÒÔÈ·±£ÀÏʽä¯ÀÀÆ÷ÖÐÕýÈ·µÄÐÐΪ£º
ʵÀý
header, section, footer, aside, nav, main, article, figure { display: block; }
Ïò HTML Ìí¼ÓÐÂÔªËØ
Äú¿ÉÒÔͨ¹ýä¯ÀÀÆ÷ trick Ïò HTML Ìí¼ÓÈκÎÐÂÔªËØ£º
±¾ÀýÏò HTML Ìí¼ÓÁËÒ»¸öÃûΪ <myHero> µÄÐÂÔªËØ£¬²¢ÎªÆä¶¨Òå display Ñùʽ£º
ʵÀý
<!DOCTYPE html> <html> <head> <title>Creating an HTML Element</title> <script>document.createElement("myHero")</script> <style> myHero { display: block; background-color: #ddd; padding: 50px; font-size: 30px; } </style> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> <myHero>My First Hero</myHero> </body> </html>
ÒÑÌí¼ÓµÄ JavaScript Óï¾ä document.createElement("myHero")£¬½öÊÊÓÃÓÚ IE¡£
Internet Explorer µÄÎÊÌâ
ÉÏÊö·½°¸¿ÉÓÃÓÚËùÓÐÐ嵀 HTML5 ÔªËØ£¬µ«ÊÇ£º
×¢Ò⣺Internet Explorer 8 ÒÔ¼°¸üÔçµÄ°æ±¾£¬²»ÔÊÐí¶ÔÎ´ÖªÔªËØÌí¼ÓÑùʽ¡£
ÐÒÔ˵ÄÊÇ£¬Sjoerd Visscher ´´ÔìÁË "HTML5 Enabling JavaScript", "the shiv"£º
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
ÒÔÉÏ´úÂëÊÇÒ»¶Î×¢ÊÍ£¬µ«ÊÇ IE9 µÄÔçÆÚ°æ±¾»á¶ÁÈ¡Ëü£¨²¢Àí½âËü£©¡£
ÍêÕûµÄ Shiv ½â¾ö·½°¸
ʵÀý
<!DOCTYPE html> <html> <head> <title>Styling HTML5</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <h1>My First Article</h1> <article> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </article> </body> </html>
ÒýÓà shiv ´úÂëµÄÁ´½Ó±ØÐëλÓÚ <head> ÔªËØÖУ¬ÒòΪ Internet Explorer ÐèÒªÔÚ¶Áȡ֮ǰÈÏʶËùÓÐÐÂÔªËØ¡£
HTML5 Skeleton
ʵÀý
<!DOCTYPE html> <html lang="en"> <head> <title>HTML5 Skeleton</title> <meta charset="utf-8"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <style> body {font-family: Verdana, sans-serif; font-size:0.8em;} header,nav, section,article,footer {border:1px solid grey; margin:5px; padding:8px;} nav ul {margin:0; padding:0;} nav ul li {display:inline; margin:5px;} </style> </head> <body> <header> <h1>HTML5 SKeleton</h1> </header> <nav> <ul> <li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li> <li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li> <li><a href="html5_canvas.asp">HTML5 Graphics</a></li> </ul> </nav> <section> <h1>Famous Cities</h1> <article> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </article> <article> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </article> <article> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </article> </section> <footer> <p>© 2014 W3Schools. All rights reserved.</p> </footer> </body> </html>