標籤：
*{ margin:0px; padding:0px;}h1{ font:bold 20px verdana,sans-serif;}h1{ font:bold 14px verdana,sans-serif;}header,section,footer,aside,nav,article,figure,figcaption,hgroup{ display:block;}body{ text-align:center;}#wrapper{ width:960px; margin:15px auto; text-align:left; }#main_header{ background:#FFFBB9; border:1px solid #999999; padding:20px;}#main_menu{ background:#ccccc; padding:5px 15px;}#main_menu li{ display:inline-block; list-style:none; padding:5px; font:bold 14jpx verdana,sans-serif;}#main_section{ float:left; width:660px; margin:20px;}#main_aside{ float:left; width:220px; margin:20px 0px; padding:20px; background:#cccccc;}#main_footer{ clear:both; text-align:center; padding:20px; border-top:2px solid #999999;}
article{ background:#fffbcc; border:1px solid #999999; padding:20px; margin-bottom:15px;}article footer{ text-align:right;}time{color:#999999;}figcaption{ font:italic 14px verdana,sans-serif;}
/*p:nth-child(odd){ background:#999999; } p:nth-child(even){ background:#CCCCCC; } p:nth-child(3){ background:#999999; } :not(p){ background:#990000; }*/
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="description" content="This is an HTML5 example"> <meta name="keywords" content="HTML5, CSS3, JavaScript"> <title>This text is the title of the document</title> <link href="../CSS/mysheet.css" rel="stylesheet" type="text/css" /></head><body> <div id="wrapper"> <header id="main_header"> <h1>This is the main title of the website</h1> </header> <nav id="main_menu"> <ul> <li>home</li> <li>photos</li> <li>videos</li> <li>contact</li> </ul> </nav> <section id="main_section"> <article> <header> <hgroup> <h1>Title of post One</h1> <h2>subtitle of the post One</h2> </hgroup> <time datetime="2011-12-10" pubdate>posted 12-10-2011</time> </header> This is the text of my first post <figure> <img src="../Images/QQ20141204125827.png" /> <figcaption> this is the image of the first post </figcaption> </figure> <footer> <p>comments (0)</p> </footer> </article> <article> <header> <hgroup> <h1>Title of post Two</h1> <h2>subtitle of the post Two</h2> </hgroup> <time datetime="2011-12-15" pubdate>posted 12-15-2011</time> </header> This is the text of my second post <footer> <p>comments (0)</p> </footer> </article> </section> <aside id="main_aside"> <blockquote>Article number one</blockquote> <blockquote>Article number two</blockquote> </aside> <!-- 文檔本文結尾--> <footer id="main_footer"> Copyright © 2010-2011 </footer> </div></body></html>
簡單的網頁結構出來了
html5（二）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
