HTML5中新標簽和常用標簽有哪些

今天小編給大家分享一下HTML5中新標簽和常用標簽有哪些的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

HTML5 新增結構元素分為主體結構元素和非主體結構元素

1.主體結構元素包括 article、section、nav、aside、time

2.非主體結構元素包括 header、hgroup、footer、address

一、主體結構元素

article

article 標簽，從語義化上看為文檔、頁面，其用法如下：

通常是一篇文章、一個頁面、一個獨立完整的內容模塊

一般會帶個標題，并放在 header 標簽中

article 元素可以互相嵌套

使用頻率極高，強調獨立性，多注意下與 header 標簽的使用。

復制代碼

代碼如下:

<article>

<header>

<h2>是我標簽</h2>

</header>

<p>我是段落</p>

<article>

<div>我的內容</div>

</article>

</article>

section

section 標簽，從語義化上看為部分，其用法如下：

用于頁面內容的獨立分塊，往往是文章的一段

通常由內容和標題組成，沒有標題的內容不推薦使用 section

使用頻率低，強調分段分塊。

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

復制代碼

代碼如下:

<section>

<h2>水果</h2>

<article>

<h3>蘋果</h3>

<div>蘋果是撒？</div>

</article>

<article>

<h3>桔子</h3>

<div>桔子是撒？</div>

</article>

</section>

<!-- article可以看成是一種特殊種類的section元素,它比section更強調獨立性 -->

<article>

<h2>中國人物</h2>

<p>三國、兩晉、南北朝</p>

<section>

<h3>三國</h4>

<p>猛將猛將猛將猛將</p>

</section>

<section>

<h3>兩晉</h4>

<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 標簽中使用時，作為主要內容的附屬信息部分，如有關的參考資料、名詞解釋等。

在 article 標簽外使用時，作為頁面或者站點全局的附屬信息部分，如側邊欄、博客的友情鏈接部分、廣告區域等。

使用頻率低。

復制代碼

代碼如下:

<!-- 在article標簽外使用時 -->

<article>

<h2>馬云是誰</h2>

<p>馬云，男，1964年10月15日出生于浙江省杭州市，中國著名企業家，阿里巴巴集團、淘寶網、支付寶創始人..........</p>

<aside>

<h2>參考資料</h2>

<p>百度網、維基百科...</p>

</aside>

</article></p><p><!-- 在article標簽內使用時 -->

<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 標簽，從語義化上看為文檔的頁眉，其用法如下：

一種具有引導和導航作用的結構元素

通常放置在整個頁面或者頁面內的一個內容區塊的標題

一個網頁內并沒有限制 header 標簽的個數

使用頻率極高，比較容易理解。

復制代碼

代碼如下:

<header>

<h2>我是大頭</h2>

</header>

<article>

<header>

<h2>我是脖子</h2>

</header>

<p>我是身體</p>

</article>

hgroup

hgroup 標簽，從語義化上看為標題組，其用法如下：

作為 header 標簽的子元素

一個內容模塊中包括了主標題和至少一個子標題才使用 hgroup

通常會將 h2~h7 元素進行分組

使用頻率高。

復制代碼

代碼如下:

<article>

<header>

<hgrounp>

<h2>我是劉備</h2>

<h3>我是關羽</h3>

<h4>我是張飛</h4>

</hgrounp>

</header>

<p>呂布驚呆了</p>

</article>

footer

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

一個內容塊區的腳注

通常內容為聯系信息、相關閱讀、版權信息等

使用頻率高，比較容易理解。

復制代碼

代碼如下:

<article>

<p>呂布驚呆了</p>

<footer>

<ul>

<li>關于三國</li>

<li>地圖信息</li>

<li>游戲攻略</li>

</ul>

</footer>

</article>

address

address 標簽，從語義化上看為地址，其用法如下：

用于文檔中呈現的聯系信息

通常內容為作者、網站鏈接、電子郵箱、地址、電話號碼等

使用頻率低。

復制代碼

代碼如下:

<address>

<a href="">作者：張三豐</a>

<a href="">地址：武當山</a>

<a href="">聯系方式：1247</a>

</address>

以上就是“HTML5中新標簽和常用標簽有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。