做移動端有一段時間，今天有同事問了我 article 和 section 標簽的使用，模模糊糊的解釋了下，他似懂非懂，有點小尷尬。忽然間覺得自己有必要再翻翻書籍，重溫下 html5 的新元素。今天先介紹下 html5 新增的結構元素，有的經(jīng)常使用到，有的用不上，雖然說它們的出現(xiàn)是更促進頁面更有語義，更好的 seo，但其實當頁面禁用樣式后，它們的展現(xiàn)跟 div 是沒撒差別，有同學可能會說，既然一樣，又不影響頁面的最終展現(xiàn)，不管是 article 還是 section 能用就好了。如果考慮實際項目的針對用戶，我也是這么認為的，但作為一個重構仔，我們還是得專業(yè)點，再考慮到無障礙這塊，那么 html5 標簽的作用就更明顯了。于是復習下內(nèi)容并記錄在博客上，順便分享給大家，也方便自己以后查找。
　　
　　HTML5 新增結構元素分為主體結構元素和非主體結構元素
　　
　　主體結構元素包括 article、section、nav、aside、time
　　
　　非主體結構元素包括 header、hgroup、footer、address
　　
　　一、主體結構元素
　　
　　article
　　
　　article 標簽，從語義化上看為文檔、頁面，其用法如下：
　　
　　通常是一篇文章、一個頁面、一個獨立完整的內(nèi)容模塊
　　
　　一般會帶個標題，并放在 header 標簽中
　　
　　article 元素可以互相嵌套
　　
　　使用頻率極高，強調獨立性，多注意下與 header 標簽的使用。
　　
　　復制代碼
　　
　　<article>
　　
　　<header>
　　
　　<h1>是我標簽</h1>
　　
　　</header>
　　
　　<p>我是段落</p>
　　
　　<article>
　　
　　<div>我的內(nèi)容</div>
　　
　　</article>
　　
　　</article>
　　
　　復制代碼
　　
　　section
　　
　　section 標簽，從語義化上看為部分，其用法如下：
　　
　　用于頁面內(nèi)容的獨立分塊，往往是文章的一段
　　
　　通常由內(nèi)容和標題組成，沒有標題的內(nèi)容不推薦使用 section
　　
　　使用頻率低，強調分段分塊。
　　
　　注：《HTML5與CSS3權威指南》這本書中說明：一個容器需要被定義樣式或者腳本定義行為時，推薦用div而非section，不要將section用作設置樣式的容器。
　　
　　復制代碼
　　
　　<section>
　　
　　<h1>水果</h1>
　　
　　<article>
　　
　　<h2>蘋果</h2>
　　
　　<div>蘋果是撒？</div>
　　
　　</article>
　　
　　<article>
　　
　　<h2>桔子</h2>
　　
　　<div>桔子是撒？</div>
　　
　　</article>
　　
　　</section>
　　
　　<!-- article可以看成是一種特殊種類的section元素,它比section更強調獨立性 -->
　　
　　<article>
　　
　　<h1>中國人物</h1>
　　
　　<p>三國、兩晉、南北朝</p>
　　
　　<section>
　　
　　<h2>三國</h3>
　　
　　<p>猛將猛將猛將猛將</p>
　　
　　</section>
　　
　　<section>
　　
　　<h2>兩晉</h3>
　　
　　<p>猛將猛將猛將猛將</p>
　　
　　</section>
　　
　　</article>
　　
　　復制代碼
　　
　　nav
　　
　　nav 標簽，從語義化上看為導航，其用法如下：
　　
　　通常作為頁面導航的鏈接組
　　
　　側邊欄導航
　　
　　使用頻率高。
　　
　　復制代碼
　　
　　<nav>
　　
　　<ul>
　　
　　<li><a href="">菜單1</a></li>
　　
　　<li><a href="">菜單2</a></li>
　　
　　<li><a href="">菜單3</a></li>
　　
　　</ul>
　　
　　</nav>
　　
　　復制代碼
　　
　　aside
　　
　　aside 標簽，從語義化上看為在旁邊、側邊，其用法如下：
　　
　　在 article 標簽中使用時，作為主要內(nèi)容的附屬信息部分，如有關的參考資料、名詞解釋等。
　　
　　在 article 標簽外使用時，作為頁面或者站點全局的附屬信息部分，如側邊欄、博客的友情鏈接部分、廣告區(qū)域等。
　　
　　使用頻率低。
　　
　　復制代碼
　　
　　<!-- 在article標簽外使用時 -->
　　
　　<article>
　　
　　<h1>馬云是誰</h1>
　　
　　<p>馬云，男，1964年10月15日出生于浙江省杭州市，中國著名企業(yè)家，阿里巴巴集團、淘寶網(wǎng)、支付寶創(chuàng)始人..........</p>
　　
　　<aside>
　　
　　<h1>參考資料</h1>
　　
　　<p>百度網(wǎng)、維基百科...</p>
　　
　　</aside>
　　
　　</article>
　　
　　<!-- 在article標簽內(nèi)使用時 -->
　　
　　<aside>
　　
　　<nav>
　　
　　<ul>
　　
　　<li><a href="">老趙的博客</a></li>
　　
　　<li><a href="">鬼哥的博客</a></li>
　　
　　<li><a href="">彪叔的博客</a></li>
　　
　　</ul>
　　
　　</nav>
　　
　　</aside>
　　
　　復制代碼
　　
　　time
　　
　　time 標簽，從語義化上看為時間，其用法如下：
　　
　　代表 24 小時中的某個時刻或某個日期
　　
　　表示時刻時允許帶時間差
　　
　　可定義很多格式的日期和時間
　　
　　使用頻率低。
　　
　　<time datetime="2013-3-6">2014年3月6日</time>
　　
　　<!-- datetime屬性中日期與時間之間要用“T” 文字分隔，“T”表示時間 -->
　　
　　<time datetime="2013-3-6T20:00">2014年3月6日20:00</time>
　　
　　<!-- 時間加上“Z”表示給機器編碼時使用UTC標準時間 -->
　　
　　<time datetime="2013-3-6T20:00Z">2014年3月6日20:00</time>
　　
　　二、非主體結構元素
　　
　　header
　　
　　header 標簽，從語義化上看為文檔的頁眉，其用法如下：
　　
　　一種具有引導和導航作用的結構元素
　　
　　通常放置在整個頁面或者頁面內(nèi)的一個內(nèi)容區(qū)塊的標題
　　
　　一個網(wǎng)頁內(nèi)并沒有限制 header 標簽的個數(shù)
　　
　　使用頻率極高，比較容易理解。
　　
　　復制代碼
　　
　　<header>
　　
　　<h1>我是大頭</h1>
　　
　　</header>
　　
　　<article>
　　
　　<header>
　　
　　<h1>我是脖子</h1>
　　
　　</header>
　　
　　<p>我是身體</p>
　　
　　</article>
　　
　　復制代碼
　　
　　hgroup
　　
　　hgroup 標簽，從語義化上看為標題組，其用法如下：
　　
　　作為 header 標簽的子元素
　　
　　一個內(nèi)容模塊中包括了主標題和至少一個子標題才使用 hgroup
　　
　　通常會將 h1~h6 元素進行分組
　　
　　使用頻率高。
　　
　　復制代碼
　　
　　<article>
　　
　　<header>
　　
　　<hgrounp>
　　
　　<h1>我是劉備</h1>
　　
　　<h2>我是關羽</h2>
　　
　　<h3>我是張飛</h3>
　　
　　</hgrounp>
　　
　　</header>
　　
　　<p>呂布驚呆了</p>
　　
　　</article>
　　
　　復制代碼
　　
　　footer
　　
　　footer 標簽，從語義化上看為文檔的腳注，其用法如下：
　　
　　一個內(nèi)容塊區(qū)的腳注
　　
　　通常內(nèi)容為聯(lián)系信息、相關閱讀、版權信息等
　　
　　使用頻率高，比較容易理解。
　　
　　復制代碼
　　
　　<article>
　　
　　<p>呂布驚呆了</p>
　　
　　<footer>
　　
　　<ul>
　　
　　<li>關于三國</li>
　　
　　<li>地圖信息</li>
　　
　　<li>游戲攻略</li>
　　
　　</ul>
　　
　　</footer>
　　
　　</article>
　　
　　復制代碼
　　
　　address
　　
　　address 標簽，從語義化上看為地址，其用法如下：
　　
　　用于文檔中呈現(xiàn)的聯(lián)系信息
　　
　　通常內(nèi)容為作者、網(wǎng)站鏈接、電子郵箱、地址、電話號碼等
　　
　　使用頻率低。
　　
　　<address>
　　
　　<a href="">作者：張三豐</a>
　　
　　<a href="">地址：武當山</a>
　　
　　<a href="">聯(lián)系方式：1247</a>
　　
　　</address>

轉載于:https://www.cnblogs.com/wushihan/p/4914490.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的HTML5 新增结构元素分为主体结构元素和非主体结构元素的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。