濮阳杆衣贸易有限公司

主頁 > 知識庫 > HTML5中的Article和Section元素認(rèn)識及使用

HTML5中的Article和Section元素認(rèn)識及使用

熱門標(biāo)簽:會聲會影怎樣做地圖標(biāo)注效果 洛陽市伊川縣地圖標(biāo)注中心官網(wǎng) 平頂山電子地圖標(biāo)注怎么修改 標(biāo)準(zhǔn)智能外呼系統(tǒng) 地圖標(biāo)注自己去過的地方 高德地圖標(biāo)注錯誤怎么修改 電銷機器人視頻 搜狗星級酒店地圖標(biāo)注 江蘇高頻外呼系統(tǒng)線路
 
HTML5帶出了一系列新元素,并且將在未來被廣泛應(yīng)用。然而,有一些元素在使用時易被混淆,包括以下兩個新元素:<article>和<section>。
最常被問起的問題是:在什么情況下我們應(yīng)該使用這些元素?以及我們應(yīng)該如何正確的使用這些元素?

Section元素
這 是一個最容易產(chǎn)生歧義的元素。它與<div>元素有什么區(qū)別?我們一直在用<div>來劃分段落,所以除 了<div>,我們什么時候使用這個元素。我們引用官方文檔來闡述它。根據(jù)WHATWG文檔,對<section>元素做了以下 描述:
“<section>元素表示了一篇文檔或應(yīng)用中,通用段落 - WHATWG”

從描述中我們可以看出<section>元素的作用就是分段,或多或少類似于<div>。但是它仍有一個特例。在文檔中,加入了一段特別聲明:
“當(dāng)一個元素僅用于風(fēng)格樣式或是為了腳本的方便,我們鼓勵作者使用<div>。<section>元素適用于,當(dāng)元素的內(nèi)容需要明確的列出時。- WHATWG”

基于這一點,我們可以總結(jié)以下兩點
第一,盡管section元素在技術(shù)上是可以設(shè)計樣式的,但是當(dāng)有復(fù)雜的樣式或腳本時,我們?nèi)越ㄗh使用div元素。
第二,類似于<li>元素,section元素是用來列舉內(nèi)容的。

因此在現(xiàn)實例子中,使用<section>元素的原因是結(jié)構(gòu)化的列出博客的內(nèi)容,代碼如下:

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

<div class="blog">
<section class="post">
<h2 class="post-title">Blog Post Title</h2>
<p class="post-excerpt">Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>
</section>
<section class="post">
<h2 class="post-title">Blog Post Title</h2>
<p class="post-excerpt">Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>
</section>
<section class="post">
<h2 class="post-title">Blog Post Title</h2>
<p class="post-excerpt">Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>
</section>
</div>

這只是個例子,<section>元素也可以用作其他用途。

Article元素
從名字上,它已經(jīng)很好的詮釋了自己,但是我們?nèi)砸纯垂俜轿臋n上是如何描述它的:
“在文檔,頁面,應(yīng)用或是站點上的一個獨立部分,并且大體上,是可獨立分配,或是重復(fù)使用的,例如在發(fā)布時。這個可以是論壇帖子,雜志或是新聞,博客條目,用戶提交的評論,互動的小工具或小工具,或任何其他獨立項目的內(nèi)容。”

從上描述中,我們可以總結(jié)出<article>元素專用于結(jié)構(gòu)化文章,特別是我們要發(fā)布的,例如博客,頁面內(nèi)容或是論壇帖子。
以下例子給出了如何使用<article>構(gòu)建一個博客文章。

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

<article class="post">
<header>
<h1>This is Blog Post Title</h1>
<div class="post-meta">
<ul>
<li class="author">Author Name</li>
<li class="categories">Save in Categories</li>
</ul>
</div>
</header>
<div class="post-content">
Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.
Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat
cake tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies
halvah gummies danish biscuit applicake gingerbread jelly-o pastry.
</div>
</article>

此外,<article>元素還可與section元素結(jié)合,需要的時候,可以使用<section>元素將文章分為幾個段落,如下例所示。

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

<article class="post">
<header>
<h1>This is Blog Post Title</h1>
<div class="post-meta">
<ul>
<li class="author">Author Name</li>
<li class="categories">Save in Categories</li>
</ul>
</div>
</header>
<div class="post-content">
<section>
<h2>This is the Sub-Heading</h2>
Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.
Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake
tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah
gummies danish biscuit applicake gingerbread jelly-o pastry.
</section>
<section>
<h3>This is another Sub-Heading</h3>
Topping cheesecake sweet pie carrot cake sweet roll. Gummi bears lemon drops
toffee sesame snaps tart topping chupa chups apple pie gummies. Wafer chocolate
cake. Sugar plum chocolate bar topping ice cream carrot cake danish bonbon.
Cheesecake gummi bears dragée jujubes dragée dragée brownie jelly biscuit. Powder croissant jelly beans pastry.
</section>
</div>
</article>

總結(jié)
如萬維網(wǎng)的創(chuàng)始人和W3C的董事所預(yù)測的那般,所有HTML5創(chuàng)造出來的新元素都是為了是網(wǎng)絡(luò)結(jié)構(gòu)更加語義化。如何正確的應(yīng)用這些元素在網(wǎng)絡(luò)開發(fā)者和設(shè)計者之間,仍存有爭論。
無論如何,不要混淆觀點。如我之前提出的,只要是合理的情況,且你看到使用了它使得結(jié)構(gòu)變得意義非凡,那么請用它。

標(biāo)簽:果洛 阿克蘇 蚌埠 廣西 廣東 常德 鄂爾多斯 松原

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《HTML5中的Article和Section元素認(rèn)識及使用》,本文關(guān)鍵詞  HTML5,中的,Article,和,Section,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《HTML5中的Article和Section元素認(rèn)識及使用》相關(guān)的同類信息!
  • 本頁收集關(guān)于HTML5中的Article和Section元素認(rèn)識及使用的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章
    若尔盖县| 遵义市| 鲜城| 辛集市| 偃师市| 大余县| 桐城市| 涞水县| 芦山县| 樟树市| 台北市| 应城市| 波密县| 逊克县| 赤壁市| 江城| 磐安县| 汕头市| 淳化县| 山阳县| 哈尔滨市| 安乡县| 丰都县| 泾源县| 红原县| 姚安县| 林芝县| 遂平县| 乌兰浩特市| 万安县| 来宾市| 平远县| 沛县| 冕宁县| 长宁县| 枞阳县| 耒阳市| 寿宁县| 洛隆县| 普洱| 陇川县|