HTML5帶出了一系列新元素，并且將在未來被廣泛應用。然而，有一些元素在使用時易被混淆，包括以下兩個新元素：<article>和<section>。

創(chuàng)新互聯(lián)服務項目包括武強網(wǎng)站建設、武強網(wǎng)站制作、武強網(wǎng)頁制作以及武強網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關系等，向廣大中小型企業(yè)、政府機構等提供互聯(lián)網(wǎng)行業(yè)的解決方案，武強網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到武強省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

在問答網(wǎng)站經(jīng)?？梢钥吹絼e人問：在什么情況下我們應該使用這些元素？我們應該如何正確的使用這些元素？<article>和<section>有什么區(qū)別？

鑒于以上的這些問題，E良師益友網(wǎng)為大家講解一下<article>和<section>的區(qū)別：

一、Article元素

從名字上，它已經(jīng)很好的詮釋了自己，但是我們?nèi)砸纯垂俜轿臋n上是如何描述它的：

“在文檔，頁面，應用或是站點上的一個獨立部分，并且大體上，是可獨立分配，或是重復使用的，例如在發(fā)布時。這個可以是論壇帖子，雜志或是新聞，博客條目，用戶提交的評論，互動的小工具或小工具，或任何其他獨立項目的內(nèi)容?！?/p>

從上描述中，我們可以總結出<article>元素專用于結構化文章，特別是我們要發(fā)布的，例如博客，頁面內(nèi)容或是論壇帖子。

以下例子給出了如何使用<article>構建一個博客文章。

<article class="post">

    <header>

    <h2>This is Blog Post Title</h2>

    <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元素結合，需要的時候，可以使用<section>元素將文章分為幾個段落，如下例所示。

<article class="post">

    <header>

    <h2>This is Blog Post Title</h2>

    <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>

        <h3>This is the Sub-Heading</h3>

        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>

        <h4>This is another Sub-Heading</h4>

        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>

二、Section元素

這是一個最容易產(chǎn)生歧義的元素。它與<div>元素有什么區(qū)別？我們一直在用<div>來劃分段落，所以除了<div>,我們什么時候使用這個元素。我們引用官方文檔來闡述它。根據(jù)WHATWG文檔，對<section>元素做了以下描述：

“<section>元素表示了一篇文檔或應用中，通用段落 – WHATWG”

從描述中我們可以看出<section>元素的作用就是分段，或多或少類似于<div>。但是它仍有一個特例。在文檔中，加入了一段特別聲明：

“當一個元素僅用于風格樣式或是為了腳本的方便，我們鼓勵作者使用<div>。<section>元素適用于，當元素的內(nèi)容需要明確的列出時。- WHATWG”

基于這一點，我們可以總結以下兩點：

盡管section元素在技術上是可以設計樣式的，但是當有復雜的樣式或腳本時，我們?nèi)越ㄗh使用div元素。

類似于<li>元素，section元素是用來列舉內(nèi)容的。

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

<div class="blog">

    <section class="post">

        <h3 class="post-title">Blog Post Title</h3>

        <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">

        <h3 class="post-title">Blog Post Title</h3>

        <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">

        <h3 class="post-title">Blog Post Title</h3>

        <p class="post-excerpt">Ice cream tart powder jelly-o.

        Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>

    </section>

</div>

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

總結

如萬維網(wǎng)的創(chuàng)始人和W3C的董事所預測的那般，所有HTML5創(chuàng)造出來的新元素都是為了是網(wǎng)絡結構更加語義化。如何正確的應用這些元素在網(wǎng)絡開發(fā)者和設計者之間，仍存有爭論。最后，想學習HTML5的同學不妨去看看本站的HTML5+CSS3視頻教程！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

名稱欄目：HTML5新元素section和article的區(qū)別詳解-創(chuàng)新互聯(lián)
本文地址：http://www.rwnh.cn/article48/dciiep.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、Google、網(wǎng)站內(nèi)鏈、App設計、網(wǎng)站設計公司、虛擬主機

廣告

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