Html5 各属性详解
Div
這個(gè)標(biāo)簽是我們見得最多、用得最多的一個(gè)標(biāo)簽。本身沒有任何語義，用作布局以及樣式化或腳本的鉤子(hook)。
?
Section
section?應(yīng)用的典型場景有文章的章節(jié)、標(biāo)簽對話框中的標(biāo)簽頁、或者論文中有編號的部分。一個(gè)網(wǎng)站的主頁可以分成簡介、新聞和聯(lián)系信息等幾部分。其實(shí)我對這里傳達(dá)信息很感興趣，因?yàn)楦杏X section 和下面要介紹的 artilce 更加適用于模塊化應(yīng)用，這個(gè)話題以后會(huì)出篇專門的文章來討論，這里暫時(shí)略過。
?
Article
article 是一個(gè)特殊的 section 標(biāo)簽，它比 section 具有更明確的語義, 它代表一個(gè)獨(dú)立的、完整的相關(guān)內(nèi)容塊。一般來說， article 會(huì)有標(biāo)題部分(通常包含在 header 內(nèi))，有時(shí)也會(huì) 包含 footer 。雖然 section 也是帶有主題性的一塊內(nèi)容，但是無論從結(jié)構(gòu)上還是內(nèi)容上來說，article 本身就是獨(dú)立的、完整的。
當(dāng) article 內(nèi)嵌 article 時(shí)，原則上來說，內(nèi)部的 article 的內(nèi)容是和外層的 article 內(nèi)容是相關(guān)的。例如，一篇博客文章中，包含用戶提交的評論的 article 就應(yīng)該潛逃在包含博客文章 article 之中。
?
注：div section article的區(qū)別
語義是從無到有，逐漸增強(qiáng)的。div 無任何語義，僅僅用作樣式化或者腳本化的鉤子(hook)，對于一段主題性的內(nèi)容，則就適用 section，而假如這段內(nèi)容可以脫離上下文，作為完整的獨(dú)立存在的一段內(nèi)容，則就適用 article。原則上來說，能使用 article 的時(shí)候，也是可以使用 section 的，但是實(shí)際上，假如使用 article 更合適，那么就不要使用 section 。nav 和 aside 的使用也是如此，這兩個(gè)標(biāo)簽也是特殊的 section，在使用 nav 和 aside 更合適的情況下，也不要使用 section 了。
對于 div 和 section、 article 以及其他標(biāo)簽的區(qū)分比較簡單。對于 section 和 article 的區(qū)分乍看比較難，其實(shí)重點(diǎn)就是看看這段內(nèi)容脫離了整體是不是還能作為一個(gè)完整的、獨(dú)立的內(nèi)容而存在，這里面的重點(diǎn)又在完整身上。因?yàn)槠鋵?shí)說起來 section 包含的內(nèi)容也能算作獨(dú)立的一塊，但是它只能算是組成整體的一部分，article 才是一個(gè)完整的整體。
?
Aside
aside元素在網(wǎng)站制作中主要有以下兩種使用方法
1）被包含在article元素中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的相關(guān)資料、名次解釋，等等。
<article><h1>…</h1><p>…</p><aside>…</aside> </article>2）在article元素之外使用作為頁面或站點(diǎn)全局的附屬信息部分。最典型的是側(cè)邊欄，其中的內(nèi)容可以使友情鏈接，博客中的其它文章列表、廣告單元等。
<aside><h2>…</h2><ul><li>…</li><li>…</li></ul><h2>…</h2><ul><li>…</li><li>…</li></ul> </aside>?
Nav
nav元素是一個(gè)可以用來作為頁面導(dǎo)航的鏈接組；其中的導(dǎo)航元素鏈接到其他頁面或當(dāng)前頁面的其他部分。并不是所有的鏈接組都要被放進(jìn)<nav>元素；例如，在頁腳中通常會(huì)有一組鏈接，包括服務(wù)條款、首頁、版權(quán)聲明等；這時(shí)使用<footer>元素是最恰當(dāng)?shù)?#xff0c;而不需要<nav>元素。
一個(gè)頁面中可以擁有多個(gè)<nav>元素，作為頁面整體或不同部分的導(dǎo)航；下面是W3C給出的一個(gè)代碼示例：
<body>
<h1>The Wiki Center Of Exampland</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/events">Current Events</a></li>
...more...
</ul>
</nav>
<article>
<header>
<h1>Demos in Exampland</h1>
<p>Written by A. N. Other.</p>
</header>
<nav>
<ul>
<li><a href="#public">Public demonstrations</a></li>
<li><a href="#destroy">Demolitions</a></li>
...more...
</ul>
</nav>
<div>
<section id="public">
<h1>Public demonstrations</h1>
<p>...more...</p>
</section>
<section id="destroy">
<h1>Demolitions</h1>
<p>...more...</p>
</section>
...more...
</div>
<footer>
<p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
</footer>
</article>
<footer>
<p><small>? copyright 1998 Exampland Emperor</small></p>
</footer>
</body>
在這個(gè)示例中，我們可以看到<nav>不僅可以用來作為頁面全局導(dǎo)航，也可以放在<article>標(biāo)簽內(nèi)，作為單篇文章內(nèi)容的相關(guān)導(dǎo)航鏈接到當(dāng)前頁面的其他位置。
?
轉(zhuǎn)載于:https://www.cnblogs.com/long6286/p/4921085.html
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的Html5 各属性详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [转]python 中的字符串连接
- 下一篇： 娜塔莉波特曼2015哈佛毕业演讲