標籤：3.2 UI 標示 nis char pat 上下文 sum str
HTML5新增結構元素：
header元素表示頁面中一個內容區塊或整個頁面的標題。
section元素表示頁面中的一個內容區塊，比如章節、頁首、頁尾或頁面中的其他部分。它可以與h1、h2、h3、h4、h5、/6等元素結合使用，標示文檔結構。
article元素表示頁面中的一塊與上下文不相關的獨立內容，譬如部落格中的一篇文章或報紙中的一篇文章。
aside元素表示article元素的內容之外的。與article元素的內容相關的輔助資訊。
nav元素表示頁面中導航連結的部分。
footer元素報時整個頁面或頁面中一個內容區塊的腳註。一般來說，它會包含創作者的姓名、創作日期以及作者的聯絡資訊。
figure元素表示一段獨立的流內容，一般表示文檔主體流內容中的一個獨立單元。使用figcaption元素為figure元素組添加標題。
main元素表示網頁中的主要內容。主內容地區意指與網頁標題或應用程式中本頁主要功能直接相關或進行擴充的內容。
下面是我找到的一篇頁面結構比較完整的使用到HTML5的標籤。最後我附上了連結地址，感興趣的可以去看看。
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>初學html5</title> <!--meta tags--> <meta name="keywords" content=""> <meta name="description" content=""> <!--stylesheets--> <link rel="stylesheet" href="css/common.css" type="text/css"> <link rel="stylesheet" href="css/layout.css" type="text/css"> <link rel="stylesheet" href="css/reset.css" type="text/css"> <!--javascript--> <script src="js/jquery-1.3.2.min.js"></script> <!--conditional comments--> <!--[if IE]> <script src="js/html5.js"></script> <![endif]--></head><body class="home"> <div id="container"> <header id="page-header"> <div id="logo"><a href="/"><img src="images/graphic-logo.gif" alt="mylogo"></a></div> <nav id="main-navigation"> <ul> <li class="current"><a href="#">首頁</a></li> <li style="color:red;"><a href="#">關於</a></li> <li><a href="#">服務</a></li> <li><a href="#">資訊</a></li> <li><a href="#">聯絡</a></li> </ul> </nav> </header> <article id="page-content"> <section> <hgroup> <h1>這是一個用HTML5做的網頁</h1> <h2>HTML5+CSS3網頁</h2> </hgroup> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elitVivamus ac iaculis erat. Maecenas id fermentum odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sagittis porta mauris, iaculis egestas metus posuere sit amet. Sed ullamcorper orci eu dolor egestas sodales. Donec tempor aliquet pulvinar. Sed sed turpis sapien, ac dictum sem. Phasellus metus leo, gravida in imperdiet sit amet, bibendum id magna. Vivamus ac nunc tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis justo ligula. Suspendisse sodales ultricies consequat. Aenean condimentum eros mi. Duis consectetur placerat vehicula. Fusce vel massa erat.</p> <h2>A demonstration of list items</h2> <ul> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ul> <ol> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ol> </section> <aside> <h2>這就是aside部分的內容</h2> <p>Aliquam id lorem ac tellus fringilla bibendum et at turpis. In ut auctor justo. Integer ac quam sed est semper hendrerit. Aenean vulputate interdum augue, sed dapibus mi ultricies convallis. Curabitur a nunc nisi, ac ornare nisi. Ut semper placerat accumsan. Cras eu nibh lorem. Sed sit amet ligula vitae orci molestie sollicitudin sit amet at odio. Mauris non elit ac ipsum facilisis eleifend. Maecenas eu velit sit amet neque iaculis dapibus. Integer mollis est id erat dignissim blandit. Quisque malesuada mattis sollicitudin. Pellentesque volutpat pellentesque luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus augue ut sem convallis ullamcorper. Donec vitae magna nec lacus varius pellentesque vel nec diam. Morbi sagittis, magna sit amet sollicitudin ultricies, neque orci fermentum ipsum, non cursus lectus velit at ante. Donec nec neque in sem suscipit faucibus. Aliquam nisi turpis, volutpat quis suscipit in, varius vitae nunc.</p> </aside> </article> </div> <footer> © Copyright Dave Woods 2009 </footer></body></html>
HTML5中div、article、section的區別及使用介紹_html5教程技巧_指令碼之家 http://www.jb51.net/html5/97873.html
1.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
