亚洲av福利永久看片,超97在线观看精品国产,91福利视频网站

主頁 > 知識庫 > HTML5中新標(biāo)簽和常用標(biāo)簽詳解

HTML5中新標(biāo)簽和常用標(biāo)簽詳解

今天先介紹下 html5 新增的結(jié)構(gòu)元素，有的經(jīng)常使用到，有的用不上，雖然說它們的出現(xiàn)是更促進頁面更有語義，更好的 seo，但其實當(dāng)頁面禁用樣式后，它們的展現(xiàn)跟 div 是沒撒差別，有同學(xué)可能會說，既然一樣，又不影響頁面的最終展現(xiàn)，不管是 article 還是 section 能用就好了。如果考慮實際項目的針對用戶，我也是這么認為的，但作為一個重構(gòu)仔，我們還是得專業(yè)點，再考慮到無障礙這塊，那么 html5 標(biāo)簽的作用就更明顯了。于是復(fù)習(xí)下內(nèi)容并記錄在博客上，順便分享給大家，也方便自己以后查找。

HTML5 新增結(jié)構(gòu)元素分為主體結(jié)構(gòu)元素和非主體結(jié)構(gòu)元素

1.主體結(jié)構(gòu)元素包括 article、section、nav、aside、time
2.非主體結(jié)構(gòu)元素包括 header、hgroup、footer、address
一、主體結(jié)構(gòu)元素
article
article 標(biāo)簽，從語義化上看為文檔、頁面，其用法如下：

通常是一篇文章、一個頁面、一個獨立完整的內(nèi)容模塊
一般會帶個標(biāo)題，并放在 header 標(biāo)簽中
article 元素可以互相嵌套
使用頻率極高，強調(diào)獨立性，多注意下與 header 標(biāo)簽的使用。

復(fù)制代碼

代碼如下:

section
section 標(biāo)簽，從語義化上看為部分，其用法如下：

用于頁面內(nèi)容的獨立分塊，往往是文章的一段
通常由內(nèi)容和標(biāo)題組成，沒有標(biāo)題的內(nèi)容不推薦使用 section
使用頻率低，強調(diào)分段分塊。

注：《HTML5與CSS3權(quán)威指南》這本書中說明：一個容器需要被定義樣式或者腳本定義行為時，推薦用div而非section，不要將section用作設(shè)置樣式的容器。

復(fù)制代碼

代碼如下:

<section>
<h1>水果</h1>
<article>
<h2>蘋果</h2>
<div>蘋果是撒？</div>
</article>
<article>
<h2>桔子</h2>
<div>桔子是撒？</div>
</article>
</section>

<article>
<h1>中國人物</h1>
<p>三國、兩晉、南北朝</p>
<section>
<h2>三國</h3>
<p>猛將猛將猛將猛將</p>
</section>
<section>
<h2>兩晉</h3>
<p>猛將猛將猛將猛將</p>
</section>
</article>

nav
nav 標(biāo)簽，從語義化上看為導(dǎo)航，其用法如下：

通常作為頁面導(dǎo)航的鏈接組
側(cè)邊欄導(dǎo)航
使用頻率高。

復(fù)制代碼

代碼如下:

aside
aside 標(biāo)簽，從語義化上看為在旁邊、側(cè)邊，其用法如下：

在 article 標(biāo)簽中使用時，作為主要內(nèi)容的附屬信息部分，如有關(guān)的參考資料、名詞解釋等。
在 article 標(biāo)簽外使用時，作為頁面或者站點全局的附屬信息部分，如側(cè)邊欄、博客的友情鏈接部分、廣告區(qū)域等。
使用頻率低。

復(fù)制代碼

代碼如下:

<article>
<h1>馬云是誰</h1>
<p>馬云，男，1964年10月15日出生于浙江省杭州市，中國著名企業(yè)家，阿里巴巴集團、淘寶網(wǎng)、支付寶創(chuàng)始人..........</p>
<aside>
<h1>參考資料</h1>
<p>百度網(wǎng)、維基百科...</p>
</aside>
</article></p> <p>
<aside>
<nav>
<ul>
<li><a href="">老趙的博客</a></li>
<li><a href="">鬼哥的博客</a></li>
<li><a href="">彪叔的博客</a></li>
</ul>
</nav>
</aside>

time
time 標(biāo)簽，從語義化上看為時間，其用法如下：

代表 24 小時中的某個時刻或某個日期
表示時刻時允許帶時間差
可定義很多格式的日期和時間
使用頻率低。

復(fù)制代碼

代碼如下:

二、非主體結(jié)構(gòu)元素
header
header 標(biāo)簽，從語義化上看為文檔的頁眉，其用法如下：

一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素
通常放置在整個頁面或者頁面內(nèi)的一個內(nèi)容區(qū)塊的標(biāo)題
一個網(wǎng)頁內(nèi)并沒有限制 header 標(biāo)簽的個數(shù)
使用頻率極高，比較容易理解。

復(fù)制代碼

代碼如下:

hgroup
hgroup 標(biāo)簽，從語義化上看為標(biāo)題組，其用法如下：

作為 header 標(biāo)簽的子元素
一個內(nèi)容模塊中包括了主標(biāo)題和至少一個子標(biāo)題才使用 hgroup
通常會將 h1~h6 元素進行分組
使用頻率高。

復(fù)制代碼

代碼如下:

<article>
<header>
<hgrounp>
<h1>我是劉備</h1>
<h2>我是關(guān)羽</h2>
<h3>我是張飛</h3>
</hgrounp>
</header>
<p>呂布驚呆了</p>
</article>

footer
footer 標(biāo)簽，從語義化上看為文檔的腳注，其用法如下：

一個內(nèi)容塊區(qū)的腳注
通常內(nèi)容為聯(lián)系信息、相關(guān)閱讀、版權(quán)信息等
使用頻率高，比較容易理解。

復(fù)制代碼

代碼如下:

<article>
<p>呂布驚呆了</p>
<footer>
<ul>
<li>關(guān)于三國</li>
<li>地圖信息</li>
<li>游戲攻略</li>
</ul>
</footer>
</article>

address
address 標(biāo)簽，從語義化上看為地址，其用法如下：

用于文檔中呈現(xiàn)的聯(lián)系信息
通常內(nèi)容為作者、網(wǎng)站鏈接、電子郵箱、地址、電話號碼等
使用頻率低。

復(fù)制代碼

代碼如下:

希望本文對大家在 html5 結(jié)構(gòu)標(biāo)簽上的運用有一定的指導(dǎo)，如果發(fā)現(xiàn)內(nèi)容有錯誤的地方，歡迎大家指正~

標(biāo)簽：平頂山黃石公主嶺黃石南平山南陜西

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《HTML5中新標(biāo)簽和常用標(biāo)簽詳解》，本文關(guān)鍵詞 HTML5,中新,標(biāo)簽,和,常用,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。