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>

Ç××ÔÊÔÒ»ÊÔ

VUE