DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> 關於HTML >> HTML5的結構學習(1) --- 新增的主體結構元素
HTML5的結構學習(1) --- 新增的主體結構元素
編輯:關於HTML     
1.article 元素   解釋:代表文檔、頁面和應用程序中獨立的、完整的、可以被獨自引用的內容。   主要用途:博客中的文章、評論,貼吧中的帖子,或者獨立的插件等。   article中可以包含多種元素例如:   復制代碼 <article>     <header>日記隨筆</header>     <p>發表日期:         <time pubdate="pubdate">2014/09/18</time>        </p>     <p>今天早上下雨,天氣很冷需要加衣服</p>     <footer>我的博客</footer> </article> 復制代碼 同時article中也可以嵌入article:   復制代碼 <html>  <head></head>  <body>   <article>     <h1>日志列表</h1>     <section>      <article>       <header>       日記隨筆      </header>       <p>發表日期: <time pubdate="pubdate">2014/09/18</time> </p>       <p>今天早上下雨,天氣很冷需要加衣服...</p>      </article>      <article>       <header>       日記隨筆      </header>       <p>發表日期: <time pubdate="pubdate">2014/09/18</time> </p>       <p>今天早上下雨,天氣很冷需要加衣服...</p>      </article>     </section>    </article>  </body> </html> 復制代碼     2.section元素   解釋:用於網站或者應用程序中的內容進行分塊。一個section元素通常由標題和內容組成。   用途:劃分不同內容區塊。   section就是用於內容的分段,例如:   復制代碼 <article>     <h1>NBA 球隊</h1>     <p>NBA用東西區共有30支球隊組成</p>     <section>          <h2>金州勇士隊</h2>          <p>金州勇士隊位於美國奧克蘭。。。。。。</p>     </section>      <section>          <h2>洛杉矶湖人隊</h2>          <p>洛杉矶湖人隊位於美國娛樂中心洛杉矶。。。。。。</p>     </section> </article> 復制代碼 NBA球隊介紹首先是一段獨立的內容,因而使用article元素,而每支球隊的介紹是彼此並列需要使用分段,所以使用section分隔。   其實這裡的article 和section就算互換使用也未嘗不可(article可以看做一種特殊的section),主要是看這段元素在你當前的網頁中強調的是什麼,強調獨立性使用article,強調分段使用section。   可以訪問https://gsnedders.html5.org/outliner/檢查你代碼結構中沒有section 標題的部分,不要為沒有標題的內容區塊使用section標簽。   注意:section並非一個普通的容器元素,當一個容器元素需要直接被定義樣式或者腳本定義行為時,推薦使用的是div。   3.nav元素   解釋:頁面導航的鏈接組   用途:頁面導航   nav元素就是用於包裹頁面導航元素,例如:   復制代碼 <nav>    <ul>        <li>主頁</li>        <li>我的博客</li>        <li>論壇</li>        .....    </ul> </nav> 復制代碼 注意:不要使用menu元素代替nav   4.aside元素   解釋:用來表示當前頁面和文章的附屬信息部分   用途:用於與當前頁面相關的引用、邊側欄、廣告和導航條。   aside主要有兩種用法:   1.被包含在article中作為主要內容的分屬信息部分,其中內容可以是與當前文章相關的參考資料、名詞解釋。   例如:   復制代碼   <header>     <h1>HTML5新元素</h1>   </header>   <article>      <h1>aside標簽的使用</h1>     <p>aside標簽同article一樣都是HTML5中新加入的元素,但是一般用於與主體內容相關元素。如名詞解釋、引用等等。。。。。。。</p>     <aside>         <h1>名詞解釋</h1>         <dl>             <dt>article</dt>             <dd>HTML5新元素,用於表示獨立元素</dd>

        </dl>     </aside>   </article> 復制代碼     2.在article元素之外使用,作為頁面或者站點全局的附屬信息部分使用。例如友情連接、廣告和其他文章列表。   復制代碼   <aside>     <h1>本周熱門文章</h1>     <ul>         <li>             <span>0</span><a href="....">iPhone6 回事目前技術上最先進的手機嗎?</a>         </li>         <li>             <span>1</span><a href="....">Git工作流指南:集中式工作流</a>         </li>         <li>             <span>2</span><a href="....">圖解KMP算法(Javascript實現)</a>         </li>         ...     </ul>   </aside>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved