人人人妻人人人妻人人人,99精品国产综合久久久久五月天 ,欧美白人最猛性XXXXX,日韩AV无码免费播放


News新聞

業(yè)界新聞動(dòng)態(tài)、技術(shù)前沿
Who are we?

您的位置：首頁(yè)      DIV+CSS      HTML5中新標(biāo)簽和常用標(biāo)簽詳解

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

標(biāo)簽： 發(fā)布日期：2014-03-07 00:00:00 976

今天先介紹下 html5 新增的結(jié)構(gòu)元素，有的經(jīng)常使用到，有的用不上，雖然說(shuō)它們的出現(xiàn)是更促進(jìn)頁(yè)面更有語(yǔ)義，更好的 css3權(quán)威指南》這本書(shū)中說(shuō)明：一個(gè)容器需要被定義樣式或者腳本定義行為時(shí)，推薦用div而非section，不要將section用作設(shè)置樣式的容器。

 

復(fù)制代碼
代碼如下:

<section>
<h1>水果</h1> 
<article> 
<h2>蘋果</h2>
<div>蘋果是撒？</div> 
</article> 
<article> 
<h2>桔子</h2>
<div>桔子是撒？</div> 
</article> 
</section>
<!-- article可以看成是一種特殊種類的section元素,它比section更強(qiáng)調(diào)獨(dú)立性 -->
<article>
<h1>中國(guó)人物</h1>
<p>三國(guó)、兩晉、南北朝</p>
<section>
<h2>三國(guó)</h3>
<p>猛將猛將猛將猛將</p>
</section>
<section>
<h2>兩晉</h3>
<p>猛將猛將猛將猛將</p>
</section>
</article>


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

 

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

 

復(fù)制代碼
代碼如下:

<nav>
<ul>
<li><a href="">菜單1</a></li>
<li><a href="">菜單2</a></li>
<li><a href="">菜單3</a></li>
</ul>
</nav>


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

 

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

 

復(fù)制代碼
代碼如下:

<!-- 在article標(biāo)簽外使用時(shí) -->
<article>
<h1>馬云是誰(shuí)</h1>
<p>馬云，男，1964年10月15日出生于浙江省杭州市，中國(guó)著名企業(yè)家，阿里巴巴集團(tuán)、淘寶網(wǎng)、支付寶創(chuàng)始人..........</p>
<aside>
<h1>參考資料</h1>
<p>百度網(wǎng)、維基百科...</p>
</aside>
</article></p> <p><!-- 在article標(biāo)簽內(nèi)使用時(shí) -->
<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)簽，從語(yǔ)義化上看為時(shí)間，其用法如下：

 

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

復(fù)制代碼
代碼如下:

<time datetime="2013-3-6">2014年3月6日</time>
<!-- datetime屬性中日期與時(shí)間之間要用“T” 文字分隔，“T”表示時(shí)間 -->
<time datetime="2013-3-6T20:00">2014年3月6日20:00</time>
<!-- 時(shí)間加上“Z”表示給機(jī)器編碼時(shí)使用UTC標(biāo)準(zhǔn)時(shí)間 -->
<time datetime="2013-3-6T20:00Z">2014年3月6日20:00</time>


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

 

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

 

復(fù)制代碼
代碼如下:

<header>
<h1>我是大頭</h1>
</header>
<article>
<header>
<h1>我是脖子</h1>
</header>
<p>我是身體</p>
</article>


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

 

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

 

復(fù)制代碼
代碼如下:

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


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

 

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

 

復(fù)制代碼
代碼如下:

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


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

 

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

復(fù)制代碼
代碼如下:

<address>
<a href="">作者：張三豐</a>
<a href="">地址：武當(dāng)山</a>
<a href="">聯(lián)系方式：1247</a>
</address>

 

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