源代码
<!DOCTYPE html> <html lang="en"> <head> <title>HTML5</title> <meta charset="utf-8"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <![endif]--> <style> body { font-family: Verdana, sans-serif; font-size: 0.8em; } header, nav, article, footer, div.city, div.country { 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>News</li> <li>Sports</li> <li>Weather</li> </ul> </nav> <article> <section> <h2>Famous Cities</h2> <div class="city"> <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> </div> <div class="city"> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </div> <div class="city"> <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> </div> </section> <section> <h2>Famous Countries</h2> <div class="country"> <h2>England</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> </div> <div class="country"> <h2>France</h2> <p>Paris is the capital and most populous city of France.</p> </div> <div class="country"> <h2>Japan</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> </div> </section> </article> <footer> <p>© 2014 W3Schools. All rights reserved.</p> </footer> </body> <!-- Mirrored from www.w3schools.com/html/tryit.asp?filename=tryhtml5_migrate_8 by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 10 Jan 2017 13:21:43 GMT --> </html>
运行结果