HTML5中div，article，section怎么使用

今天小編給大家分享一下HTML5中div，article，section怎么使用的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

10年積累的成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有磁縣免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

DIV

HTML規(guī)格：“div元素沒有特殊意義可言”

這個(gè)。標(biāo)簽是我們見得最多，用得最多的一個(gè)標(biāo)簽本身沒有任何語義，用作布局以及樣式化或腳本的鉤子（鉤）

部

HTML規(guī)格：“的一節(jié)元素表示一個(gè)文檔或應(yīng)用程序的通用部分。在此上下文中，一節(jié)是內(nèi)容的主題分組，通常帶有標(biāo)題。”

與div的無語義相對(duì)，簡單指向section就是帶有語義的div了，但是千萬不要覺得真得這么簡單。一段專題性的內(nèi)容，一般會(huì)帶有標(biāo)題看到這里，我們也許會(huì)想到，那么一篇博客文章，或者一條單獨(dú)的評(píng)論豈不是正好可以用部分嗎接著看：？

“鼓勵(lì)作者使用聯(lián)合元素的內(nèi)容是合理的，而不是section元素。

當(dāng)元素內(nèi)容聚合起來更加言之有物時(shí)，應(yīng)該使用文章來替換部分。

那么，部分應(yīng)該什么時(shí)候用呢再接著看：

“節(jié)的例子是章節(jié)，在一個(gè)標(biāo)簽式對(duì)話框中的各個(gè)標(biāo)簽頁面，或論文的編號(hào)部分。網(wǎng)站的主頁可以分為幾個(gè)部分，以進(jìn)行介紹，新聞和聯(lián)系信息。”

部分應(yīng)用的典型場(chǎng)景有文章的章節(jié)，章節(jié)和標(biāo)簽中間的標(biāo)簽頁，或者論文中有編號(hào)的部分。興趣，因?yàn)楦杏X部分和下面要介紹的artilce更加適用于替代應(yīng)用，這個(gè)話題以后會(huì)出篇專門的文章來討論，這里暫時(shí)略過。

要注意，W3C還警告說：

“ section元素不是通用容器元素。當(dāng)出于樣式目的或?yàn)榱朔奖憔帉懩_本而需要某個(gè)元素時(shí)，鼓勵(lì)作者改用div元素。一般規(guī)則是，只有在文檔的大綱中明確列出該元素的內(nèi)容時(shí)，section元素才是合適的。”

節(jié)不僅僅是一個(gè)普通的容器標(biāo)簽。當(dāng)一個(gè)標(biāo)簽只是為了樣式化或者方便腳本使用時(shí)，應(yīng)該使用DIV。一般來說，當(dāng)元素內(nèi)容明確地出現(xiàn)在文檔大綱中時(shí)，部分就是適用的。

文章

HTML規(guī)范：“ article元素代表文檔，頁面，應(yīng)用程序或站點(diǎn)中的獨(dú)立組成，并且原則上可以獨(dú)立分發(fā)或重用，例如在聯(lián)合組織中。”

一般來說，文章會(huì)有一個(gè)標(biāo)題部分（通常包含在header內(nèi)），有時(shí)也會(huì)包含footer。雖然section也是帶有主題性的一塊內(nèi)容，但是無論從結(jié)構(gòu)上還是內(nèi)容上來說，文章本身就是獨(dú)立的，完整的

。HTML Spec論壇的帖子，一本雜志或報(bào)紙上的文章，博客條目，用戶提交的評(píng)論，一個(gè)互動(dòng)的小部件或小工具，或任何其他內(nèi)容無關(guān)的項(xiàng)目。”

當(dāng)文章內(nèi)嵌的文章時(shí)，原則上來說，內(nèi)部的文章的內(nèi)容是和外層的文章內(nèi)容是相關(guān)的。例如，文章博客文章中，包含用戶提交的評(píng)論的文章就應(yīng)該潛逃在包含博客文章文章之中。

問題是怎么算“完整的獨(dú)立內(nèi)容”？一個(gè)最簡單的判斷方法是看該內(nèi)容在RSS feed中是不是完整的。看這段內(nèi)容脫離了所在的語境，是否還是完整的，獨(dú)立的。

示例：

html頁面：

復(fù)制代碼

代碼如下：

<！DOCTYPE html>

<head>

<！-meta標(biāo)簽->

<元名稱=”描述“ content =”“>

<！-stylesheets->

<！ --javascript->

<！-條件注釋->

<！-[如果是IE]>

<！[endif]->

</ head>

<ul>

</ ul>

</ nav>

</ header>

<部分>

<h2>這是一個(gè)用HTML5做的網(wǎng)頁</ h2>

</ hgroup>

<p> Lorem ipsum dolor坐著，安全地?fù)崞絜litVivamus ac iaculis。Maecenas id fermentum dioo。每名土著人和每位遠(yuǎn)見人均獲得的類許可。Fusce sagittis porta mauris，埃庫里斯·埃格斯塔斯·梅斯·普埃斯特埃梅特。Sed ullamcorper orci eu dolor egestas sodales。Donec tempor aliquet pulvinar。sed sed turpis sapien，ac dictum sem。Phasellus metus leo，在不合時(shí)宜的地心引力，bibendum id magna。Vivamus ac nunc Tortor。Lorem ipsum dolor坐下，一直保持良好狀態(tài)。在quis justo ligula。Suspendisse sodales的潰瘍會(huì)導(dǎo)致后果。埃涅阿調(diào)味品eros mi。Duis consectetur胎盤車輛。</ p>

<h3>列表項(xiàng)的演示</ h3>

<ul>

<li> Lorem ipsum dolor sit amet </ li>

</ li>

</ li> </ li> </ li> UL>

<OL>

<LI> Lorem存有悲坐阿梅特</ LI>

<LI> Lorem存有悲坐阿梅特< / li>

<li> Lorem ipsum dolor sit amet </ li>

</ ol>

</ section>

<aside>

<h3>這就是aside部分的內(nèi)容</ h3>

<p>在Turpis的Aliquam id lorem actellus fringilla bibendum等。在utautor justo中。整數(shù)和semper hendrerit。埃尼安（Aenean）狐臭間斷性自體性硬化，sap dapibus miultricies患病。Curabitur一個(gè)nunc nisi，ac ornare nisi。坦帕（Semper）Placerat Accumsan。Cras eu nibh lorem。塞德（Sed）坐著ligula vitae orci molestie sollicitudin坐著odio。毛利人非精英accilsums eleifend。Maecenas eu velit坐在amet neque iaculis dapibus。整數(shù)mol est id dignissim blandit。Quisque malesuada mattis sollicitudin。Pellentesque volutpat pellentesque luctus。Lorem ipsum dolor坐下，一直保持良好狀態(tài)。Sed cursus au s sem convallis ullamcorper。Donec vitan magna nec lacus varius pellentesque vel nec diam。Morbi sagittis，magna sit amet sollicitudin ultricies，neque orci fermentum ipsum，非詛咒在賽前。Donec neque在sem suscipit faucibus中。Aliquam nisi turpis，volutpat quis suscipit in，varius vitae nunc。</ p>

</ aside>

</ article>

</ div>

＆copy; 版權(quán)所有Dave Woods 2009

</ footer>

</ body>

</ html>

css頁面：

復(fù)制代碼

代碼如下：

@charset“ utf-8”;

/ * CSS文檔* /

#container {

寬度：840px；

邊距：20px自動(dòng);

背景：#fff;

內(nèi)邊距：30px;

溢出：隱藏

}

/ * ---------------標(biāo)頭---------------- * /

＃main-navigation {

border-bottom：5px solid＃666 ;

}

＃main-navigation ul {

overflow：hidden;

寬度：100％;

list-style：無；

字體大小：1.6em;

}

＃main-navigation li {

float：left;

}

＃main-navigation li a {

背景：＃999;

邊距：0 5px 0 0;

內(nèi)邊距：5px 30px;

顯示：塊;

顏色：#fff;

文字修飾：無；

}

＃main-navigation li.current a {

背景：＃666;

}

＃main-navigation li a：hover {

背景：＃777;

}

/ * --------------------------文章-------------------- ---- * /

文章{

寬度：100％；

溢出：隱藏

}

部分{

float：left;

寬度：500像素；

}

/ * --------------------------文章-------------------- ---- * /

除了{(lán)

float：right;

寬度：310像素；

}

/ * --------------------------文章-------------------- ---- * /

footer {

width：840px;

邊距：20px自動(dòng);

字體大小：1.4em;

text-align：center;

}

以上就是“HTML5中div，article，section怎么使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站標(biāo)題：HTML5中div，article，section怎么使用
分享URL：http://chinadenli.net/article14/jiicde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、云服務(wù)器、網(wǎng)站建設(shè)、網(wǎng)站收錄、建站公司、網(wǎng)站維護(hù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

HTML5中div，article，section怎么使用